От автора: В то время, как я занимался оформлением недавней публикации, я почувствовал, что функционалу главного заголовка не хватает чуточку… эмм… параллакса. Прежде чем вы начнёте осуждать меня, я хочу сказать, что параллакс эффект иногда бывает крутым… иногда…ну очень нечасто.
Я не хотел импортировать огромную библиотеку, так что я немного повозился в CodePen, и вот что получилось:
Всего пара строчек кода и заголовок «падает» медленнее, чем остальное содержимое страницы. Анимированная векторная иллюстрация впечатлит вас ещё больше.
КАК ЭТО РАБОТАЕТ
Вдохновлённый некоторыми работами Дана Уилсона, я создаю такой эффект с помощью переменных CSS и JavaScript. Давайте разбнремся в этом коде.
const title = document.querySelector('h1.title');
const speed = 0.2; title.style.transform = 'translateY( calc( var(--scrollparallax) * 1px ) )'; window.addEventListener('scroll', function() { title.style.setProperty('--scrollparallax', (document.body.scrollTop || document.documentElement.scrollTop) * speed);
});
Добавьте в CSS .title { will-change: transform }, и это сделает оформление более красивым. Я очень доволен тем, что благодаря всего ~6 строчкам кода я смог добиться желаемого параллакс-эффекта. Мне удалось быстро справиться с прототипом.
ЗАЧЕМ ИСПОЛЬЗОВАТЬ ПОЛЬЗОВАТЕЛЬСКИЕ СВОЙСТВА CSS?
Хороший вопрос, но я не уверен, что смогу дать хороший ответ1. По-моему, в том, чтобы использовать единственную переменную и передать остальную работу CSS, есть что-то изящное. CSS также обладает некоторыми практическими преимуществами…
Деактивация параллакс на мобильном устройстве с помощью @media запросов.
Деактивация параллакс с помощью @media (prefers-reduced-motion)
Анимирование множества элементов одним свойством.
Использование одного свойства для множества эффектов.
Ниже приведён следующий пример, где мы задаём единственное свойство —scroll-amount для document.body.
window.addEventListener('scroll', function() { document.body.style.setProperty( '--scroll-amount', (document.body.scrollTop || document.documentElement.scrollTop)
});
Все математические правила переданы в CSS выражению calc(), и мы колдуем уже со свойством —scroll-amount . Добавляя другую переменную —multiplier, изменяющую каждый элемент, мы получим очень аккуратные эффекты.
Мульти-эффект параллакса только для настольных устройств с помощью одной переменной в JavaScript
Бинго! Мне нравится это решение, потому что оно достаточно простое и я понимаю, что происходит под капотом. «Простое» значит, что я могу изменять, расширять и улучшать его2. Я обожаю находить самые простые решения для создания минимального желаемого эффекта.
Апдейт: Тайсон Матанич в Твиттере предложил идею использования requestAnimationFrame и кажется, таким способом можно получить лучшую производительность, добиваясь 60FPS в Edge, а счётчик Chrome FPS показывает >30FPS.
Я раньше слышал, что Пользовательские Свойства CSS дают лучшую производительность, чем element.style, но основываясь на моих сравнениях, я не уверен, что так и есть.
Триггеры на основе классов с помощью Intersection Observer?
Источник: https://daverupert.com/
Редакция: Команда webformyself.
