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

#1 9 сентября 2018 в 17:08
Здравствуйте! Подскажите как правильно прикрутить анимацию как тут tympanus.net/Development/AnimatedHeaderBackgrounds/ к фону подключил js и css, а вывести не могу как фон((( Ставится в центре экрана поверх окон(((
#2 9 сентября 2018 в 21:43
В каком месте ставите? Поверх каких окон?
#3 9 сентября 2018 в 22:30
Я однажды делал анимированный фон.
При открытии сайта с таким фоном, на ноутбуке отлетают лопасти от вентилятора, а на дешевом мобильнике он вообще не откроется.
#4 10 сентября 2018 в 05:44

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

Azami

Вставлял в main.tpl.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>
Вот с эти не могу разобраться, выделил ((((

  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>

Как это правильно к системе прикрутить!
#5 10 сентября 2018 в 07:58
В main.tpl.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>

  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
Не получится, напишите ссылку на сайт в личку, гляну.
#6 10 сентября 2018 в 09:04
Сайт на компе( Это я все проделал не встает как фон результат такой же как и у меня, показывается просто как статья, а как фон не встает.(((
#7 10 сентября 2018 в 11:48
@anton1982, скрин хотябы киньте, не понимаю, что не так. Он ограничен по шиирне?
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.