Обертання елементів при прокрутці за допомогою JavaScript

29

Від автора: коли я вирішив переписати код і змінити бренд на сайті The New Code, я дав собі слово, що не буду використовувати фреймворки: основний текст і приклади відображення коду залишилися недоторкані, однак під капотом тепер vanilla JavaScript. Я вже писав схожу статтю про те, як обертати елементи під час скролінгу сторінок за допомогою JavaScript. У цій статті я представлю вам оновлену версію того демо, але тільки тепер на vanilla JavaScript … даний підхід у багатьох відношеннях простіше і ефективніше

Створюємо шестерні

Як і в попередньому прикладі, шестерні розміщуються на сторінці кожна зі своїм ідентифікатором. Наші шестерні це векторні зображення, так що можна уявити їх у SVG:

Обертання елементів при прокрутці за допомогою JavaScript
Обертання елементів при прокрутці за допомогою JavaScript

Розмістити шестерні на сторінці можна як завгодно: дуже часто можна зустріти фіксоване положення; можна також скористатися новим CSS властивість position: sticky. Для розміщення елементів я скористався flexbox, в якості одиниць виміру вибрав vw; самі шестерні мають фіксоване позиціонування, а значить, при прокрутці рухаються разом зі сторінкою.

#gearbox {
display: flex;
justify-content: space between;
}
#leftgear, #rightgear {
width: 20vw;
max-width: 20%;
height: auto;
}

Обертаємо шестерні

Задача досить проста: внизу сторінки необхідно додати наступний скрипт.

var leftgear = document.getElementById(«leftgear»),
rightgear = document.getElementById(«rightgear»);
window.addEventListener. («scroll», function() {
leftgear.style.transform = «rotate(«+window.pageYOffset+»deg)»;
rightgear.style.transform = «rotate(-«+window.pageYOffset+»deg)»;
});

Шестерінки прокручуються на значення, яке дорівнює кількості прокрчуенных пікселів екрану, конвертованих в градуси. Ліва обертається за годинниковою стрілкою, права – проти годинникової. Для прискорення або сповільнення обертання можна скористатися математичним виразом для window.pageYOffset: приміром, помноживши його на 2 або розділивши.

Позбавляємося від посмикувань під час анімації

При використанні скролінгу часто виникає проблема, що маніпульований елемент починає сіпатися: під час перемальовування браузером елемента той починає смикатися, анімація намагається підлаштуватися під поточні значення. Позбутися від такої поведінки можна, змусивши елемент рухатися тільки в ті моменти, коли браузер до цього готовий, тобто за допомогою requestAnimationFrame. Для цього необхідно змінити addEventListener. на користувальницьке подію:

window.addEventListener. («optimizedScroll», function() {

})

Над обробником події додайте анонімну функцію:

;(function() {
var throttle = function(type name, obj) {
var obj = obj || window;
var running = false;
var func = function() {
if (running) { return; }
running = true;
requestAnimationFrame(function() {
obj.dispatchEvent(new CustomEvent(name));
running = false;
});
};
obj.addEventListener. (type, func);
};
throttle («scroll», «optimizedScroll»);
})();

У наступних статтях я більш детально розповім про requestAnimationFrame.