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

Живой фон

Предыдущая
1
2
Показаны 16-28 из 28

#16 18 октября 2015 в 00:55

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

<div class="canvasContainer">
    <canvas class="contextCanvas"></canvas>
</div>

и прописать стили:

.canvasContainer
{
    position: fixed;
    left: 0px;
    right: 0px;
    top: 100px;
    bottom: 100px;
    z-index: -1; /* или -2 */
    background-color: #fff;
}
 
.contextCanvas
{   position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: -1;
}

#17 18 октября 2015 в 00:56

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

Stecc

всё равно не работает

https://www.linkads.ru

#18 18 октября 2015 в 00:59

ну как не уплывает? прокрутите вниз
Александр Потапов

даже не в курсе) завис сайт, закрыл.
тяжелый фон видать

Сегодня в 17:16

#19 18 октября 2015 в 00:59

ну как не уплывает? прокрутите вниз
Александр Потапов

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

или вы имели в виду "уплывает" что? эти полосы на воде?

#20 18 октября 2015 в 01:03

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

и прописать стили:

.canvasContainer
{
    position: fixed;
    left: 0px;
    right: 0px;
    top: 100px;
    bottom: 100px;
    z-index: -1; /* или -2 */
    background-color: #fff;
}
 
.contextCanvas
{   position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: -1;
}

и снова нет…

https://www.linkads.ru

#21 18 октября 2015 в 01:04

всё… убираю этот фон… а так хотелось.

https://www.linkads.ru

#22 18 октября 2015 в 01:49

всё… убираю этот фон
Александр Потапов

Да вы что! На сайт с таким фоном народ толпой повалит! Тут самое время о собственном дата-центре думать, а вы, — "… убираю..." stuk

Украинский для инстант

#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> вставляем указанный скрипт:

Код скрипта

<script>
$(document).ready(function() {
	try {
		$('body').ripples({
			resolution: 512,
			dropRadius: 20, //px
			perturbance: 0.04,
		});
		$('main').ripples({
			resolution: 128,
			dropRadius: 10, //px
			perturbance: 0.04,
		});
	}
	catch (e) {
		$('.error').show().text(e);
	}
 
	$('.disable').show().on('click', function() {
		$('body, main').ripples('destroy');
		$(this).hide();
	});
 
	// Automatic drops
	setInterval(function() {
		var $el = $('main');
		var x = Math.random() * $el.outerWidth();
		var y = Math.random() * $el.outerHeight();
		var dropRadius = 20;
		var strength = 0.04 + Math.random() * 0.04;
 
		$el.ripples('drop', x, y, dropRadius, strength);
	}, 400);
});
</script>

4. дописываем стили (или в подключенный файл или в какой другой):

.canvas_wrapper {
	position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: -1;
    background-color: #fff;
}

5. и немного подправляем файл ..\js\jquery.ripples.js (скопированный ранее)
с 94 по 103 строку включительно удаляем следующее:

this.$canvas.css({
			position: 'absolute',
			left: 0,
			top: 0,
			right: 0,
			bottom: 0,
			zIndex: -1
		});
 
		this.$el.append(canvas);

и на это место вставляем:

this.$canvas.css({
			position: 'absolute', 
			width: "100%",
			height: "100%",
			left: 0,
			top: 0, 
			zIndex: -1
		});
 
		this.$el.append(canvas); 
		$("canvas").wrap("<div class='canvas_wrapper'></div>");

Ну и радуемся проделанной работе)) Картинка стоит на месте и не прокручивается — проверенно!
P.S. хотя смотрится это очень на любителя)))

#24 19 октября 2015 в 18:16

навернное у меня всё же лыжи не едут… так и не разобрался… zst

https://www.linkads.ru

#25 19 октября 2015 в 18:30

Александр Потапов, желание есть могу сделать. Нужен ftp-доступ к файлам сайта.

#26 19 октября 2015 в 20:37

Установил, все работает. Правда пришлось удалить, слишком тяжелый для компа, тормозит и зависает. А так конечно смотрится супер и очень эффектно.

#27 19 октября 2015 в 22:33

у меня так и не заработал… конфликты какие то

https://www.linkads.ru

#28 3 ноября 2015 в 22:43

Поставил другой фон… зацените нижний сайт

https://www.linkads.ru

Предыдущая
1
2
Показаны 16-28 из 28

Иконки

Цвет логинов

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

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

Похожие темы

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

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

Живой поиск при добавлении контента

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

[ЕСТЬ РЕШЕНИЕ] Нужно изменить фон на странице услуг

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

InstantCMS Team

О проекте

Поддержка

Дополнения