Найти на сайте
  2. Форумы
  3. МАСТЕРСКАЯ
  4. Дизайн / Графика / Искусство
  5. Живой фон сайта

Живой фон сайта

Живой фон

#16 18 октября 2015 в 00:55
Попробуйте обернуть canvas так:
  1. <div class="canvasContainer">

  2.     <canvas class="contextCanvas"></canvas>

  3. </div>
и прописать стили:
  1. .canvasContainer
  2. {
  3.     position: fixed;
  4.     left: 0px;
  5.     right: 0px;
  6.     top: 100px;
  7.     bottom: 100px;
  8.     z-index: -1; /* или -2 */
  9.     background-color: #fff;
  10. }
  11.  
  12. .contextCanvas
  13. {   position: absolute;
  14.     width: 100%;
  15.     height: 100%;
  16.     left: 0px;
  17.     top: 0px;
  18.     z-index: -1;
  19. }
0
#17 18 октября 2015 в 00:56


пробовал, не работает

Александр Потапов
потому-что надо не просто fixed а position: fixed 0 0;

Stecc

всё равно не работает
https://www.linkads.ru
0
#18 18 октября 2015 в 00:59

ну как не уплывает? прокрутите вниз

Александр Потапов
даже не в курсе) завис сайт, закрыл.
тяжелый фон видать
0
#19 18 октября 2015 в 00:59

ну как не уплывает? прокрутите вниз

Александр Потапов
у меня в хроме не уплывает. проркутил до самого низа.

или вы имели в виду "уплывает" что? эти полосы на воде?
0
#20 18 октября 2015 в 01:03


Попробуйте обернуть canvas так:

  1.  
  2.  
  3.  
и прописать стили:
  1. .canvasContainer
  2. {
  3.     position: fixed;
  4.     left: 0px;
  5.     right: 0px;
  6.     top: 100px;
  7.     bottom: 100px;
  8.     z-index: -1; /* или -2 */
  9.     background-color: #fff;
  10. }
  11.  
  12. .contextCanvas
  13. {   position: absolute;
  14.     width: 100%;
  15.     height: 100%;
  16.     left: 0px;
  17.     top: 0px;
  18.     z-index: -1;
  19. }

Val

и снова нет…
https://www.linkads.ru
0
#21 18 октября 2015 в 01:04
всё… убираю этот фон… а так хотелось.
https://www.linkads.ru
0
#22 18 октября 2015 в 01:49

всё… убираю этот фон

Александр Потапов
Да вы что! На сайт с таким фоном народ толпой повалит! Тут самое время о собственном дата-центре думать, а вы, — "… убираю..." stuk
Украинский для инстант
0
#23 18 октября 2015 в 01:54
Вчитался в указание и немного переделал))))
1. копируем jquery.ripples.js в папку js, картинку и файл стиле копируем в соответствующие места (не забываем прописать верный путь к изображению)
2. в файле ..\templates\default\main.tpl.php вверху где подключаются все стили и скрипты добавляем
<?php $this->addMainCSS("templates/{$this->name}/css/water.css"); ?> // это если мы файл стилей отдельно подключаем, а не копируем стили в другой файл
<?php $this->addMainJS("templates/{$this->name}/js/jquery.ripples.js"); ?>
3. в конце перед закрывающим тегом </body> вставляем указанный скрипт:
  1. <script>
  2. $(document).ready(function() {
  3. 	try {
  4. 		$('body').ripples({
  5. 			resolution: 512,
  6. 			dropRadius: 20, //px
  7. 			perturbance: 0.04,
  8. 		});
  9. 		$('main').ripples({
  10. 			resolution: 128,
  11. 			dropRadius: 10, //px
  12. 			perturbance: 0.04,
  13. 		});
  14. 	}
  15. 	catch (e) {
  16. 		$('.error').show().text(e);
  17. 	}
  18.  
  19. 	$('.disable').show().on('click', function() {
  20. 		$('body, main').ripples('destroy');
  21. 		$(this).hide();
  22. 	});
  23.  
  24. 	// Automatic drops
  25. 	setInterval(function() {
  26. 		var $el = $('main');
  27. 		var x = Math.random() * $el.outerWidth();
  28. 		var y = Math.random() * $el.outerHeight();
  29. 		var dropRadius = 20;
  30. 		var strength = 0.04 + Math.random() * 0.04;
  31.  
  32. 		$el.ripples('drop', x, y, dropRadius, strength);
  33. 	}, 400);
  34. });
  35. </script>
4. дописываем стили (или в подключенный файл или в какой другой):
  1. .canvas_wrapper {
  2. 	position: fixed;
  3.     left: 0px;
  4.     right: 0px;
  5.     top: 0px;
  6.     bottom: 0px;
  7.     z-index: -1;
  8.     background-color: #fff;
  9. }
5. и немного подправляем файл ..\js\jquery.ripples.js (скопированный ранее)
с 94 по 103 строку включительно удаляем следующее:
  1. this.$canvas.css({
  2. 			position: 'absolute',
  3. 			left: 0,
  4. 			top: 0,
  5. 			right: 0,
  6. 			bottom: 0,
  7. 			zIndex: -1
  8. 		});
  9.  
  10. 		this.$el.append(canvas);
и на это место вставляем:
  1. this.$canvas.css({
  2. 			position: 'absolute', 
  3. 			width: "100%",
  4. 			height: "100%",
  5. 			left: 0,
  6. 			top: 0, 
  7. 			zIndex: -1
  8. 		});
  9.  
  10. 		this.$el.append(canvas); 
  11. 		$("canvas").wrap("<div class='canvas_wrapper'></div>");
Ну и радуемся проделанной работе)) Картинка стоит на месте и не прокручивается — проверенно!
P.S. хотя смотрится это очень на любителя)))
0
#24 19 октября 2015 в 18:16
навернное у меня всё же лыжи не едут… так и не разобрался… zst
https://www.linkads.ru
0
#25 19 октября 2015 в 18:30
Александр Потапов, желание есть могу сделать. Нужен ftp-доступ к файлам сайта.
0
#26 19 октября 2015 в 20:37
Установил, все работает. Правда пришлось удалить, слишком тяжелый для компа, тормозит и зависает. А так конечно смотрится супер и очень эффектно.
0
#27 19 октября 2015 в 22:33
у меня так и не заработал… конфликты какие то
https://www.linkads.ru
0
#28 3 ноября 2015 в 22:43
Поставил другой фон… зацените нижний сайт
https://www.linkads.ru
0
Иконки
Цвет логинов
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Похожие темы

[ЗАКРЫТО] Фон на сайте в мобильной версии

Вопросы настройки InstantCMS Создана 1 год назад 13 сообщений

Цветовая гамма всех страниц сайта

Дизайн / Графика / Искусство Создана 4 года назад 3 сообщения

[ЕСТЬ РЕШЕНИЕ] Видео background секции

HTML / CSS / PHP / JS / RegExp Создана 3 года назад 8 сообщений

Фон картинка

Дизайн / Графика / Искусство Создана 3 года назад 7 сообщений

iBuilder - как поменять фон видео?

Разработка и тестирование Создана 3 года назад 5 сообщений

Как скрыть виджеты полностью если ты задал телу или контейнеру бутстрапом цветовой фон

Флейм / Флуд / Оффтопик Создана 2 месяца назад 11 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.