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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Вращаем шестеренки

Задачка довольно простая: внизу страницы необходимо добавить следующий скрипт.

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

Избавляемся от подергиваний во время анимации

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

Над обработчиком события добавьте анонимную функцию:

В следующих статьях я более подробно расскажу про requestAnimationFrame.

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по CSS3

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

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

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree