Поговорим немного о параллаксе
Приемчик выдуман уже давно, и пользуется популярностью еще с 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), вы можете увидеть градиент, который для картинок является подложкой, в итоге мы имеем нечто похожее на небо с облаками, что выглядит более смотрибельно.
скрипт приведенный выше показывает от куда и куда движется картинка, и с какой скоростью, что можно менять по своему усмотрению.