Поговорим немного о параллаксе

Приемчик выдуман уже давно, и пользуется популярностью еще с 80х годов, когда в компьютерных играх задний фон двигался самостоятельно, и это было чем-то вау.

Сегодня хочу вам рассказать, как же мы можем сделать вау-эффект у себя на сайте, примером послужит дизайн из моего второго сайта turboblack.gq

Как вам? Нравится? Если да, читайте дальше, если нет - закройте вкладку браузера, и больше не думайте на тему облагораживания сайта в такой способ )))

Начнем с того, что подвижные объекты на сайте это картинки, а точнее прозрачные png картинки, таковых полно можно скачать через поисковик, по этому я не буду сильно углубляться в то, где конкретно я взял эти белые тучки, и траву с цветуёчкамэ...

что бы заставить двигаться эти самые тучки и цветочки (которые у меня по умолчанию, а у вас то, что у вас), мы в скрипте шаблона пропишем несколько нехитрых строк:

После body в файле theme.php вставляем

  <style>
   body {
    background: url(images/city.png) repeat-x 0 100% fixed,
                url(images/cloud.png) no-repeat fixed,
                url(images/cloud.png) no-repeat fixed,
                linear-gradient(to top, #5080b1, #004e8c) fixed;
    animation: city 90s linear infinite;
    -webkit-animation: city 90s linear infinite;
   }
   @keyframes city {
    from { background-position: -1000px 100%, 120% 30%, 120% 15%, 0 0;}
    to { background-position: 0 100%, -200% 10%, -50% 15%, 0 0; }
   }
   @-webkit-keyframes city {
    from { background-position: -1000px 100%, 120% 30%, 120% 15%, 0 0;}
    to { background-position: 0 100%, -200% 10%, -50% 15%, 0 0; }
   }
  </style>

в корневой папке сайта создаем каталог (если нету) images, в который копируем 2 файла, которые мы бы хотели использовать в качестве заднего фона. если вы читали мой блог, то видели, что есть неплохой велошаблон, в котором подобная технология тоже используется, только чуть более масштабно (больше подвижных объектов), но в шапке.

так же в моем примере (который кстати использован полностью на сайте turboblack.tk), вы можете увидеть градиент, который для картинок является подложкой, в итоге мы имеем нечто похожее на небо с облаками, что выглядит более смотрибельно.

скрипт приведенный выше показывает от куда и куда движется картинка, и с какой скоростью, что можно менять по своему усмотрению.