Простейший параллакс эффект всего в ~6 строчках кода

Простейший параллакс эффект всего в ~6 строчках кода

От автора: В то время, как я занимался оформлением недавней публикации, я почувствовал, что функционалу главного заголовка не хватает чуточку… эмм… параллакса. Прежде чем вы начнёте осуждать меня, я хочу сказать, что параллакс эффект иногда бывает крутым… иногда…ну очень нечасто.

Я не хотел импортировать огромную библиотеку, так что я немного повозился в CodePen, и вот что получилось:

Всего пара строчек кода и заголовок «падает» медленнее, чем остальное содержимое страницы. Анимированная векторная иллюстрация впечатлит вас ещё больше.

КАК ЭТО РАБОТАЕТ

Вдохновлённый некоторыми работами Дана Уилсона, я создаю такой эффект с помощью переменных CSS и JavaScript. Давайте разбнремся в этом коде.

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

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

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

Добавьте в CSS .title { will-change: transform }, и это сделает оформление более красивым. Я очень доволен тем, что благодаря всего ~6 строчкам кода я смог добиться желаемого параллакс-эффекта. Мне удалось быстро справиться с прототипом.

ЗАЧЕМ ИСПОЛЬЗОВАТЬ ПОЛЬЗОВАТЕЛЬСКИЕ СВОЙСТВА CSS?

Хороший вопрос, но я не уверен, что смогу дать хороший ответ1. По-моему, в том, чтобы использовать единственную переменную и передать остальную работу CSS, есть что-то изящное. CSS также обладает некоторыми практическими преимуществами…

Деактивация параллакс на мобильном устройстве с помощью @media запросов.

Деактивация параллакс с помощью @media (prefers-reduced-motion)

Анимирование множества элементов одним свойством.

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

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

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

Использование одного свойства для множества эффектов.

Ниже приведён следующий пример, где мы задаём единственное свойство —scroll-amount для document.body.

Все математические правила переданы в CSS выражению calc(), и мы колдуем уже со свойством —scroll-amount . Добавляя другую переменную —multiplier, изменяющую каждый элемент, мы получим очень аккуратные эффекты.

Мульти-эффект параллакса только для настольных устройств с помощью одной переменной в JavaScript

Бинго! Мне нравится это решение, потому что оно достаточно простое и я понимаю, что происходит под капотом. «Простое» значит, что я могу изменять, расширять и улучшать его2. Я обожаю находить самые простые решения для создания минимального желаемого эффекта.

Апдейт: Тайсон Матанич в Твиттере предложил идею использования requestAnimationFrame и кажется, таким способом можно получить лучшую производительность, добиваясь 60FPS в Edge, а счётчик Chrome FPS показывает >30FPS.

Я раньше слышал, что Пользовательские Свойства CSS дают лучшую производительность, чем element.style, но основываясь на моих сравнениях, я не уверен, что так и есть.

Триггеры на основе классов с помощью Intersection Observer?

Источник: https://daverupert.com/

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

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

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

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

Эффекты Parallax

Прямо сейчас научитесь создавать различные Parallax эффекты!

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

Метки:

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

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

Комментарии 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