Вращение элементов при прокрутке при помощи JavaScript

Вращение элементов при прокрутке при помощи JavaScript

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

Создаем шестеренки

Как и в предыдущем примере, шестеренки размещаются на странице каждая со своим идентификатором. Наши шестеренки это векторные изображения, так что можно представить их в SVG:

<div id="gearbox">
    <img src="gear.svg" alt id="leftgear">
    <img src="gear.svg" alt id="rightgear">
</div>

Разместить шестеренки на странице можно как угодно: очень часто можно встретить фиксированное положение; также можно воспользоваться новым 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.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree