Главная страница » Веб-дизайн » Простой эффект прокрутки с параллаксом на CSS3

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

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

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

Шаг 1. HTML

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

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

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

Шаг 2. CSS

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

#home {

background: url("../images/home.jpg");

background-attachment: fixed;

background-origin: initial;

background-clip: initial;

background-size: cover;

background-repeat:no-repeat;

background-position:100% 0;

position:relative;

min-height:1080px;

}

#about {

background: url("../images/about.jpg");

background-attachment: fixed;

background-origin: initial;

background-clip: initial;

background-size: cover;

background-repeat:no-repeat;

background-position:100% 0;

position:relative;

min-height:1080px;

}

#blog {

background: url("../images/blog.jpg");

background-attachment: fixed;

background-origin: initial;

background-clip: initial;

background-size: cover;

background-repeat:no-repeat;

background-position:100% 0;

position:relative;

min-height:1080px;

}

#contact {

background: url("../images/contact.jpg");

background-attachment: fixed;

background-origin: initial;

background-clip: initial;

background-size: cover;

background-repeat:no-repeat;

background-position:100% 0;

position:relative;

min-height:1080px;

}

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

Шаг 3. JS

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