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

 
Посетитель
no avatar
Сообщений: 10
Здравствуйте! Подскажите как правильно прикрутить анимацию как тут https://tympanus.net/Development/AnimatedHeaderBackgrounds/ к фону подключил js и css , а вывести не могу как фон((( Ставится в центре экрана поверх окон(((
Посетитель
small user social cms
Медаль
Сообщений: 272
В каком месте ставите? Поверх каких окон?
Редактировалось: 1 раз (Последний: 9 сентября 2018 в 21:55)
Реклама
cms
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2711
Я однажды делал анимированный фон.
При открытии сайта с таким фоном, на ноутбуке отлетают лопасти от вентилятора, а на дешевом мобильнике он вообще не откроется.
Посетитель
no avatar
Сообщений: 10
Azami:
В каком месте ставите? Поверх каких окон?

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

Код PHP:
  1. <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  2.  
  3. <link rel="stylesheet" type="text/css" href="css/component.css" />
  4.  
  5.  
  6. </head>
  7. <body>
  8. <div class="container demo-1">
  9. <div class="content">
  10. <div id="large-header" class="large-header">
  11. <canvas id="demo-canvas"></canvas>
  12. <h1 class="main-title"><span class="thin"></span></h1>
  13. </div>
  14.  
  15. <div class="codrops-header">
  16.  
  17. <nav class="codrops-demos">
  18. <a class="current-demo" href="index.html">Demo 1</a>
  19. </nav>
  20. </div>
  21. </div>
  22.  
  23.  
  24.  
  25. </div>
  26. <script src="js/TweenLite.min.js"></script>
  27. <script src="js/EasePack.min.js"></script>
  28. <script src="js/rAF.js"></script>
  29. <script src="js/demo-1.js"></script>
Вот с эти не могу разобраться, выделил ((((

Код PHP:
  1. <div class="container demo-1">
  2. <div class="content">
  3. <div id="large-header" class="large-header">
  4. <canvas id="demo-canvas"></canvas>
  5. <h1 class="main-title"><span class="thin"></span></h1>
  6. </div>
  7.  
  8. <div class="codrops-header">
  9.  
  10. <nav class="codrops-demos">
  11. <a class="current-demo" href="index.html">Demo 1</a>
  12. </nav>
  13. </div>
  14. </div>
  15.  
  16.  
  17.  
  18. </div>

Как это правильно к системе прикрутить!
Редактировалось: 1 раз (Последний: 10 сентября 2018 в 05:45)
Посетитель
small user social cms
Медаль
Сообщений: 272
В main.tpl.php
вставляем
Код PHP:
  1.  
  2. <div class="container demo-1">
  3. <div class="content">
  4. <div id="large-header" class="large-header">
  5. <canvas id="demo-canvas"></canvas>
  6. <h1 class="main-title">Connect <span class="thin">Three</span></h1>
  7. </div>
  8.  
  9.  
  10. </div>
  11.  
  12.  
  13. </div>
  14.  
Закдываете файлы:
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:
  1. <?php $this->addMainCSS("templates/{$this->name}/css/normalize.css""); ?>
  2. <?php $this->addMainCSS("templates/{$this->name}/css/demo.css"); ?>
  3. <?php $this->addMainCSS("templates/{$this->name}/css/component.css"); ?>
  4.  
  5. <?php $this->addMainJS("templates/{$this->name}/js/TweenLite.min.js"); ?>
  6. <?php $this->addMainJS("templates/{$this->name}/js/EasePack.min.js"); ?>
  7. <?php $this->addMainJS("templates/{$this->name}/js/rAF.js"); ?>
  8. <?php $this->addMainJS("templates/{$this->name}/js/demo-1.js"); ?>


По идее должно сработать, если нет конфликта с имеющимися js и css
Не получится, напишите ссылку на сайт в личку, гляну.
Редактировалось: 2 раз (Последний: 10 сентября 2018 в 07:59)
Посетитель
no avatar
Сообщений: 10
Сайт на компе( Это я все проделал не встает как фон результат такой же как и у меня, показывается просто как статья, а как фон не встает.(((
Посетитель
small user social cms
Медаль
Сообщений: 272
@anton1982, скрин хотябы киньте, не понимаю, что не так. Он ограничен по шиирне?
Редактировалось: 1 раз (Последний: 10 сентября 2018 в 11:48)
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.