Анимация фона

#1 9 сентября 2018 в 17:08

Здравствуйте! Подскажите как правильно прикрутить анимацию как тут tympanus.net/Development/AnimatedHeaderBackgrounds/ к фону подключил js и css, а вывести не могу как фон((( Ставится в центре экрана поверх окон(((

#2 9 сентября 2018 в 21:43

В каком месте ставите? Поверх каких окон?

#3 9 сентября 2018 в 22:30

Я однажды делал анимированный фон.
При открытии сайта с таким фоном, на ноутбуке отлетают лопасти от вентилятора, а на дешевом мобильнике он вообще не откроется.

Сегодня в 16:05

#4 10 сентября 2018 в 05:44

В каком месте ставите? Поверх каких окон?
Azami

Вставлял в main.tpl.php, не могу разобрать как вывести его как фон((

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
 
		<link rel="stylesheet" type="text/css" href="css/component.css" />
 
 
	</head>
	<body>
		<div class="container demo-1">
			<div class="content">
				<div id="large-header" class="large-header">
					<canvas id="demo-canvas"></canvas>
					<h1 class="main-title"><span class="thin"></span></h1>
				</div>
 
				<div class="codrops-header">
 
					<nav class="codrops-demos">
						<a class="current-demo" href="index.html">Demo 1</a>
			</nav>
				</div>
			</div>
 
 
 
		</div>
		<script src="js/TweenLite.min.js"></script>
		<script src="js/EasePack.min.js"></script>
		<script src="js/rAF.js"></script>
		<script src="js/demo-1.js"></script>

Вот с эти не могу разобраться, выделил ((((

<div class="container demo-1">
			<div class="content">
				<div id="large-header" class="large-header">
					<canvas id="demo-canvas"></canvas>
					<h1 class="main-title"><span class="thin"></span></h1>
				</div>
 
				<div class="codrops-header">
 
					<nav class="codrops-demos">
						<a class="current-demo" href="index.html">Demo 1</a>
			</nav>
				</div>
			</div>
 
 
 
		</div>

Как это правильно к системе прикрутить!

#5 10 сентября 2018 в 07:58

В main.tpl.php
вставляем

 
<div class="container demo-1">
			<div class="content">
				<div id="large-header" class="large-header">
					<canvas id="demo-canvas"></canvas>
					<h1 class="main-title">Connect <span class="thin">Three</span></h1>
				</div>
 
 
			</div>
 
 
		</div>

Закдываете файлы:
1. normalize.css, demo.css, component.css из папки "css" в папку со стилями на сервере (по умолчанию /templates/default/css)
2. TweenLite.min.js, EasePack.min.js, rAF.js, demo-1.j — в папку "js" на сервере (по умолчанию /templates/default/js)

Добаляем между тегами <head></head>

<?php $this->addMainCSS("templates/{$this->name}/css/normalize.css""); ?>
<?php $this->addMainCSS("templates/{$this->name}/css/demo.css"); ?>
<?php $this->addMainCSS("templates/{$this->name}/css/component.css"); ?>
 
<?php $this->addMainJS("templates/{$this->name}/js/TweenLite.min.js"); ?>
<?php $this->addMainJS("templates/{$this->name}/js/EasePack.min.js"); ?>
<?php $this->addMainJS("templates/{$this->name}/js/rAF.js"); ?>
<?php $this->addMainJS("templates/{$this->name}/js/demo-1.js"); ?>

По идее должно сработать, если нет конфликта с имеющимися js и css
Не получится, напишите ссылку на сайт в личку, гляну.

#6 10 сентября 2018 в 09:04

Сайт на компе( Это я все проделал не встает как фон результат такой же как и у меня, показывается просто как статья, а как фон не встает.(((

#7 10 сентября 2018 в 11:48

@anton1982, скрин хотябы киньте, не понимаю, что не так. Он ограничен по шиирне?

Адаптировать под мобильные уст

Шаблон для отдельной страницы

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

Анимация фона

Похожие темы

В новостях при цвете фона заголовка info скрываются доп ссылки

Анимация для сайта

[ЗАКРЫТО] Анимация горения свечи

[ЕСТЬ РЕШЕНИЕ] Подключение мобильного фона

Смена фона всего сайта

[ЕСТЬ РЕШЕНИЕ] Замена фона шапки

InstantCMS Team

О проекте

Поддержка

Дополнения