Простой эффект прокрутки с параллаксом на CSS3Параллакс один из самых красивых эффеков в современном сайтостроении, простота, и необычность эффекта заставляет посетителя восхищаться такой изюминкой. Мы много уделяем внимания данной теме, и она все больше набирает обороты в читаемости. В данном уроке мы рассмотрим один из достаточно простых эффектов, это прокрутка с эффектом параллакса реализованного с помощью CSS3 и JS. У нас будет четыре изображения, которые будут плавно замещать друг друга при прокрутке страницы. Такой эффект уже реализован на многих сайтах.

В этом уроке я покажу, как мы можем построить простой сайт с параллаксом с помощью нескольких строк JavaScript-кода и CSS. Итак, давайте приступим.

Шаг 1. HTML

Первый шагом будет добавление фоновых изображений и классов к ним, кроме этого добавляем параметры data-speed, которые необходимы нам для создания данного эффекта:

Кроме этого Вам необходимо подключить в шапку сайта библиотеку jQuery, обратите внимание, если у Вас уже подключена данная библиотека, то может возникнуть конфликт версий, и весь сайт придет в негодность.

Простой эффект прокрутки с параллаксом на CSS3

Шаг 2. CSS

Теперь нам необходимо определить параметры для каждого изображения, кроме этого изображения будут полностью адаптивными, при сохранении эффекта:

В результате мы получаем практически функциональный эффект, нам осталось добавить только немного магии для полной работы параллакса.

Шаг 3. JS

Основная идея заключается в переходе слайдов с разной скоростью, пока страница прокручивается вверх или вниз. Это может быть достигнуто лишь с помощью нескольких строчек кода. Ниже приводится JavaScript код, который использует HTML5 селектор типов данных, чтобы все слайды и наборы фоновых позиций каждой страницы прокручивались вверх или вниз.

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

 

Читайте также: