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