От автора: когда я решил переписать код и сменить бренд на сайте The New Code, я дал себе слово, что не буду использовать фреймворки: основной текст и примеры отображения кода остались нетронуты, однако под капотом теперь vanilla JavaScript. Я уже писал похожую статью про то, как вращать элементы во время скроллинга страницы при помощи JavaScript. В этой статье я представлю вам обновленную версию того демо, но только теперь на vanilla JavaScript … данный подход во многих отношениях проще и эффективнее
Создаем шестеренки
Как и в предыдущем примере, шестеренки размещаются на странице каждая со своим идентификатором. Наши шестеренки это векторные изображения, так что можно представить их в SVG:
|
1 2 3 4 |
<div id="gearbox"> <img src="gear.svg" alt id="leftgear"> <img src="gear.svg" alt id="rightgear"> </div> |
Разместить шестеренки на странице можно как угодно: очень часто можно встретить фиксированное положение; также можно воспользоваться новым CSS свойством position: sticky. Для размещения элементов я воспользовался flexbox, в качестве единиц измерения выбрал vw; сами шестерни имеют фиксированное позиционирование, а значит, при прокрутке двигаются вместе со страницей.
|
1 2 3 4 5 6 7 8 9 |
#gearbox { display: flex; justify-content: space-between; } #leftgear, #rightgear { width: 20vw; max-width: 20%; height: auto; } |
Вращаем шестеренки
Задачка довольно простая: внизу страницы необходимо добавить следующий скрипт.
|
1 2 3 4 5 6 7 |
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 на пользовательское событие:
|
1 2 3 |
window.addEventListener("optimizedScroll", function() { ... }) |
Над обработчиком события добавьте анонимную функцию:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
;(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.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
