Сайты с эффектом параллакс остаются в тренде. Поэтому небольшой урок по построению сайта с параллакс-скроллингом на главной будет актуален. Собственно, это шаблон модной главной страницы, который можно скачать и адаптировать под свои цели. Здесь вы найдете все стандартные красивости главной страницы: эмоциональное широкоэкранное фото, крупные иконки достоинств (которые тоже держатся в моде уже не первый год), милые аватары в стиле флэт.
Базовая идея
Обычно используется одна из библиотек JavaScript - Scrollr, scrollMagic, Parallax.js, scrollReveal.js или что-то еще. Мы будем использовать Scrollr, так как она популярна и работает на всех мобильных девайсах.
Загрузите skrollr.min.js и сделайте ссылку на него в HTML. Затем вызовите skrollr.init(); и ваш скроллинг на странице заработает.
Это очень мощная библиотека.
Введение в Scrollr
После того, как вы подключили библиотеку Scrollr, добавляете атрибуты к элементам, которые хотите анимировать. Вот пример анимации от синего к красному и вот код этой прелести:
Обратите внимания, что цвета надо описывать в формате RGB. Атрибут data-0 указывает на цвет вверху страницы, атрибут data-3000 указывает на цвет внизу страницы, а высота ее, как вы, наверное, догадались, 3000px. Можно сделать градиент. Это вообще извращение:
<!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body data-0="background-image:linear-gradient(0deg, hsl(0, 100%, 50%), hsl(40, 50%, 50%));" data-3000="background-image:linear-gradient(3600deg, hsl(360, 100%, 50%), hsl(400, 100%, 50%));"> <div id="skrollr-body"> <div align="center" id="top"> </div> </div> <script type="text/javascript"> skrollr.init(); </script> </body> </html>
Но вернемся к красивому эффекту скроллинга картинки, который мы так часто видим на главной странице модных сайтов.
Parallax Intro
Здесь картинка вставлена в div и добавлено несколько строчек css:
Красивое возникновение текста
Блоки текста появляются один за другим при скроллинге.
Ну, здесь, как вы видите, по ссылке мы попадаем на все эффекты красивой главной страницы - интересное появление списка достоинств, крутящиеся аватары, плавающая галерея, выезжающий футер. Пожалуй, использовать все эти эффекты одновременно - перебор.
СКАЧАТЬ все 6 эффектов и демо можно на Tutorialzine.