Проста техніка Parallax скроллінга

() translation by (you can also view the original English article)

Parallax скроллінг – цікава техніка, при якій фонові зображення переміщуються повільніше, ніж контент на передньому плані, створюючи цим ілюзію 3D глибини. Так як я планував редизайнити свій сайт, моя ціль була написати найкоротший та найпростіший код і при цьому досягти максимально вражаючого ефекту. Я покажу вам, як я це зробив.

Якщо ви шукаєте швидкий спосіб, щоб розпочати роботу з базовим шаблоном для вашої теми, тоді пошук простої Parallax Theme може бути хорошим варіантом. Або ж перегляньте наші односторінкові шаблони. Ви також можете знайти розробників на Envato Studio, які створять для вас сайти з parallax скроллінгом.

В цьому уроці я навчу вас найпростішій техніці параллакс скролінга с которой вы когда-либо сталкивались, поэтому давайте углубимся!

Крок 1: Розмітка

Дана техніка зосереджена навколо контролю швидкості фонового зображення. Отже, давайте розпочнемо з розмітки HTML, створивши два розділи з необхідними атрибутами: "data-type" і "data-speed". Не хвилюйтесь, я поясню це пізніше.

                <section id="home" data-type="background" data-speed="10">                            
                </section>   
                    
                <section id="about" data-type="background" data-speed="10">
                </section>

Я використовую тег <section> з атрибутами data-type і data-speed, які були введені в HTML5. Це робить разметку HTML більш зручною для читання.

Відповідно до специфікації Custom Data Attributes, будь-який атрибут, який починається з data-, буде приянятий як область зберігання даних користувача. Крім того, це не впливатиме на макет або відображення.

Оскільки все, що нам потрібно зробити, це контролювати швидкість фонових зображень, ми будемо використовувати data-type="background" та data-speed="10" в якості ключових атрибутів для вказання необхідних параметрів.

Я знаю, про що ви думаєте: ви хвилюєтесь про IE. Не бійтесь, в мене є рішення і для цієї проблеми. За мить ми це обговоримо.

Далі, давайте додамо контент в тег <article> в середині кожної <section> .

                <section id="home" data-type="background" data-speed="10" class="pages">     
                         <article>I am absolute positioned</article>
                    </section>   
                    
                <section id="about" data-type="background" data-speed="10" class="pages">
                         <article>Simple Parallax Scroll</article>
                </section>

Зараз ми намагаємося зробити фонову прокрутку повільнішою, ніж її контент, тобто <article>. Це допоможе нам створити ілюзію паралаксу. Перш ніж перейти до чудес jQuery, додамо фонові зображення в наш CSS для кожної <section>.

                                
                #home { 
                background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
                }
                
                #about { 
                background: url(about-bg.jpg) 50% 0 no-repeat min-height: 1000px;  
                }

Після додавання фона для обох розділів, має бути ось такий вигляд:

Давайте додамо ще декілька CSS стилей та оживимо сторінку!

                #home { 
                  background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
                  height: 1000px; 
                  margin: 0 auto; 
                  width: 100%; 
                  max-width: 1920px; 
                  position: relative; 
                }
                
                #home article { 
                  height: 458px; 
                  position: absolute; 
                  text-align: center; 
                  top: 150px; 
                  width: 100%; 
                }
                
                #about { 
                  background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
                  height: 1000px; 
                  margin: 0 auto; 
                  width: 100%; 
                  max-width: 1920px; 
                  position: relative; 
                  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
                  box-shadow: 0 0 50px rgba(0,0,0,0.8);
                }
                
                #about article { 
                  height: 458px; 
                  position: absolute; 
                  text-align: center; 
                  top: 150px; 
                  width: 100%; 
                }

Тепер це має виглядати ось так…

Крок 2: Чарівний код

Так, це дійсно так, саме зараз починаються чудеса! Використовуючи jQuery, ми почнемо зі стандартного методу document.ready(), щоб переконатись, що сторінка завантажена і готова до маніпуляцій.

1	$(document).ready(function(){
2
3
4	});

Цей метод зосереджується навколо контролю швидкості фонового зображення, яке існує в обох розділах.

Тепер мені потрібна ваша увага. Перше, що відбується нижче, це те, що ми інтеруємося по кожній <section> на сторінці, де є атрибут data-type="background".

                $(document).ready(function(){
                
                    $('section[data-type="background"]').each(function(){
                      var $bgobj = $(this); // assigning the object
                    }); 
                
                });

Додайте ще одну функцію, .scroll(), в .each(), яка викликається, коли користувач починаю прокрутку.

1	$(window).scroll(function() {
2
3	});

Нам потрібно визначити, скільки користувач скроллив, а потім розділити це значення, на значення data-speed, вказане в розмітці.

1	var yPos = -($window.scrollTop() / $bgobj.data('speed'));

$window.scrollTop(): ми отримуємо поточне значення скролал зверху. Це в основному визначає, скільки користувач скроллив. $bgobj.data('speed') відноситься до data-speed, визначеній в розмітці, а yPos – це останнє значення, яке нам потрібно застосувати до скролінга. Проте, значення буде від'ємне, оскільки ми повинні перемістити фон в напрямі, протилежному скролінга користувача.

Розглянемо це більш детально, використовуючи приклад:

На приведеному вище зображенні data-speed рівний 10, і, припустимо, що вікно браузера скроллився на 57px. Це означає, що 57px ділиться на 10 = 5.7px.

                // Put together our final background position
                var coords = '50% '+ yPos + 'px';
                
                // Move the background
                $bgobj.css({ backgroundPosition: coords });

Останнє, що нам потрібно зробити, це зібрати наше кінцеве розміщення фону в змінну. Щоб зберегти горизонтальне положення екрану статичним, мы встановили 50% в якості xPosition. Потім ми додали yPos в якості yPosition і, наостанок, назначили фонові координаты на наш : $bgobj.css ({backgroundPosition: coords});.

Ваш фінальный код повинен виглядати ось так:

$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object
    
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed')); 
            
            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });
        }); 
    });    
});

Так, ми це зробили! Спробуйте зробити самі для себе!

Фікси IE

Останній моммент: старіша версія IE не можевідображати теги <section> і <article>. Це легко виправити; ми використовуватимемо стандартні методи створення елементів, що саме і робить браузер, розпізнаючи теги HTML5.

1	// Create HTML5 elements for IE
2
3	document.createElement("article");
4	document.createElement("section");

Крім того, нам потрібно використовувати базовий файл reset CSS, щоб всі баузери працювали як слід. На щастя, інструменти HTML5 Boilerplate, потурбувалися про це для нас, коли діло доходить до нормалізації крос-браузерності.

Це все по даному уроку! У вас є запитання чи зауваження якими ви б хотіли поділитися? Дайте мені знати про це в коментарях!

І якщо ви шукаєте швидке рішення з професійним результатом ознайомтесь з нашими темами та шаблонами Parallax Theme і One Page, які ви можете купити на ThemeForest.