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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

Ниже приведён следующий пример, где мы задаём единственное свойство —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.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Эффекты Parallax

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

Смотреть

Метки:

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

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

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

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