Если вы изучаете веб-разработку, как и я, вы хорошо осведомлены об огромном количестве контента и руководств. Один из моих любимых создателей туториалов — Julio Codes на YouTube. Веб-сайты, которые он делает в своих учебниках, наиболее эстетичны для меня. Я также обнаружил, что благодаря его урокам я узнаю много маленьких советов и приемов, которые я использовал в своих собственных проектах.

Большинство этих советов и приемов я поместил в свои заметки, и, поскольку этот блог посвящен тому, что там есть, сегодня я расскажу об эффекте прокрутки параллакса из его руководства Адаптивный веб-сайт приключений. На самом деле этот проект дал мне четыре или пять небольших советов, некоторыми из которых я, возможно, поделюсь в следующих статьях.

Для этого эффекта есть три элемента изображения и информация о герое, которую нам нужно получить. Затем мы добавим прослушиватель событий scroll к объекту window.

  • Нам нужна позиция вертикальной прокрутки объекта окна, поэтому мы устанавливаем ее в переменную с именем scrollPosition.
  • Затем мы установим свойство преобразования для каждого из наших изображений, а также информацию о герое. Для этого к информации о герое добавлено свойство непрозрачности. ПРИМЕЧАНИЕ.Хотя количество движений, желаемых для каждого элемента, зависит от человека, лучше, чтобы значения были небольшими, иначе элементы будут прокручиваться слишком быстро.
  • Также обратите внимание, что изображения травы и изображения гор имеют отрицательные значения. Таким образом, эти элементы перемещаются вверх по мере того, как мы прокручиваем страницу вниз, усиливая эффект.
  • Положение всех этих элементов основано на оси Y или вертикальной оси, поэтому мы используем translateY() в нашем свойстве преобразования.
  • Что касается непрозрачности, мы хотим, чтобы она исчезала, поэтому в зависимости от положения прокрутки мы вычитаем настройку непрозрачности из 1. 1 — сплошной, а 0 — невидимый. Опять же, при небольшом значении текст в информации о герое будет медленно исчезать.

И это все для этого примера эффекта прокрутки параллакса. Это удивительно прямолинейно и легко, учитывая, какой классный и эстетичный у него вид. Если вы знаете какие-либо замечательные ресурсы с готовыми фотографиями или о том, как создавать многослойные фотографии для использования в этом эффекте, поделитесь ими в комментариях.

Кому интересно, я использую программу для создания заметок Obsidian.