Сайты с эффектом параллакс остаются в тренде. Поэтому небольшой урок по построению сайта с параллакс-скроллингом на главной будет актуален. Собственно, это шаблон модной главной страницы, который можно скачать и адаптировать под свои цели. Здесь вы найдете все стандартные красивости главной страницы: эмоциональное широкоэкранное фото, крупные иконки достоинств (которые тоже держатся в моде уже не первый год), милые аватары в стиле флэт.

Базовая идея

Обычно используется одна из библиотек JavaScript - ScrollrscrollMagic, Parallax.js, scrollReveal.js или что-то еще. Мы будем использовать Scrollr, так как она популярна и работает на всех мобильных девайсах.

Загрузите skrollr.min.js и сделайте ссылку на него в HTML. Затем вызовите skrollr.init(); и ваш скроллинг на странице заработает.

  1. <script src="assets/skrollr.min.js"></script>
  2.  
  3. skrollr.init();


Это очень мощная библиотека.

Введение в Scrollr

После того, как вы подключили библиотеку Scrollr, добавляете атрибуты к элементам, которые хотите анимировать. Вот пример анимации от синего к красному и вот код этой прелести:

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. </head>
  4. <body data-0="background-color: rgb(255,0,0);" data-3000="background-color: rgb(0,0,255);">
  5. <div id="skrollr-body">
  6. <div align="center" id="top">
  7. <h1>Привет! Я параллакс!</h1>
  8. <p>Крути вниз и все здесь станет синим</p>
  9. <p></p>
  10. </div>
  11. </div>
  12. <script type="text/javascript" src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
  13.  
  14. <script type="text/javascript">
  15. skrollr.init();
  16. </script>
  17. </body>
  18. </html


Обратите внимания, что цвета надо описывать в формате RGB. Атрибут data-0 указывает на цвет вверху страницы, атрибут data-3000 указывает на цвет внизу страницы, а высота ее, как вы, наверное, догадались, 3000px. Можно сделать градиент. Это вообще извращение:

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. </head>
  4. <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%));">
  5. <div id="skrollr-body">
  6. <div align="center" id="top">
  7. <h1>Привет! Я параллакс!</h1>
  8. <p>Крути вниз и тут будет полный трэш</p>
  9. <p></p>
  10. </div>
  11. </div>
  12. <script type="text/javascript" src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
  13.  
  14. <script type="text/javascript">
  15. skrollr.init();
  16. </script>
  17. </body>
  18. </html>

Но вернемся к красивому эффекту скроллинга картинки, который мы так часто видим на главной странице модных сайтов.

Parallax Intro

Здесь картинка вставлена в div и добавлено несколько строчек css:

Красивое возникновение текста

Блоки текста появляются один за другим при скроллинге.

 

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

СКАЧАТЬ все 6 эффектов и демо можно на Tutorialzine.