Отображение текста с параллаксом

Отображение текста с параллаксом

Мы продолжаем серию уроком об эффекте параллакса, с помощью которого на этот раз мы можем интересно изменить цвет текста..

В большинстве библиотек мы можем привязать прокрутку браузера к цвету текста, чтобы он плавно переходил от одного к другому. Здесь же мы будем искать что-то другое, чтобы одна строка была одного цвета до середины (по вертикали), а внизу — другим..

На этот раз давайте начнем с примера конечного результата, а потом поговорим о том, как мы его добились..

Дорога к цели

Давайте пошагово рассмотрим, какие функции у нас есть в разметке, стилях и JavaScript. Последних совсем немного.

HTML

голова стандартная — мета кодировки, заголовок и стили. К последним относится шрифт Poplar, загруженный с помощью TypeKit..

Ниже в теле мы начинаем с самого текста:

h1 class = "подарки"> span class = "present__manufacturer"> MyManufacturer / span> br /> подаркиbr /> span class = "plays__phone"> MyPhone 1 / span> / h1>

Я использую разные классы для псевдопроизводителя и модели телефона. Подчеркнем их тополем и более крупным шрифтом..

Затем мы просто показываем картинку образца телефона, которую я взял из Википедии..

Наконец, мы добавляем элемент, чтобы фон прокрутки оставался зеленым. В нем дублируем разметку для заголовка.

div class = "intro-cover"> h1 class = "представляет"> span class = "present__manufacturer"> MyManufacturer / span> br /> подаркиbr /> span class = "plays__phone"> MyPhone 1 / span> / h1> / div>

Затем сделаем один белый, а другой зеленый. Фактически в скролле мы покажем одно и скроем другое.

CSS

Добавим стили к нашему тексту:

.представляет {position: fixed; z-индекс: 200; верх: 12,5%; осталось: 25%; дисплей: встроенный блок; шрифт: обычный 38px / 1.2 Arial, Helvetica, без засечек; преобразовать: translateX (-50%); }

Читать также:  Настроить вебпакет

Особенность:

  • позиция: исправлено, чтобы не перемещаться при прокрутке
  • z-index: 200, чтобы мы могли поиграть с отображением и скрытием элементов позже. Ключ в том, кто находится наверху, а кто внизу, в эффекте, за которым мы гонимся..

вверху, слева и трансформируем, мы используем их, чтобы отрегулировать положение.

Несколько строк о более конкретных стилях производителя и модели:

.представляет__manufacturer, .presents__phone {семейство шрифтов: тополь-стандарт, без засечек; } .представляет __manufacturer {font-size: 1.68em; } .представляет__phone {размер шрифта: 2.11em; }

Также позиционируем картинку:

.телефон-изображение {положение: исправлено; z-индекс: -100; осталось: 50%; внизу: 20 пикселей; ширина: авто; высота: 67%; преобразовать: translateX (-50%); }

Зеленый оверлей

Скрываем изображение и зеленую версию текста зеленым фоном:

.интро-обложка {позиция: относительная; z-индекс: 200; ширина: 100%; высота: calc (100vh — 120px); нижнее поле: calc (100vh + 120px); фон: # 45AFBB; переполнение: скрыто; }

Ключевые стили:

  • position: relative — он должен быть явным, чтобы быть относительным, чтобы повлиять на z-index ниже. Значение по умолчанию — static, на которое никак не влияет какое-либо значение, которое мы установили для z-index.
  • z-index: 200 мы устанавливаем его с тем же значением, что и фиксированный текст. Поскольку этот прямоугольник находится позже в разметке, с тем же z-индексом он фактически появляется вверху..
  • height: calc (100vh — 120px) — мы делаем его во весь экран, но без 120px. Тогда изображение телефона будет «представлено» ниже..
  • margin-bottom: calc (100vh + 120px) — установите маржу так, чтобы у нас было поле прокрутки. Без прокрутки нет параллакса. Значение 100vh, поэтому у нас есть одна полноэкранная прокрутка + еще 120 пикселей. Последний будет компенсировать «дыру» в 120 пикселей, через которую можно смотреть картинку..
Читать также:  Массивы в PHP (часть 1)

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

.вступительная обложка. представляет {позиция: статика; цвет: #FFF; преобразовать: перевести (calc (25vw — 50%), 12,5vh); }

Устанавливаем статическое положение, иначе переполнение контейнера не состоится. И он нужен нам для того, чтобы мы могли «вырезать» этот внутренний текст..

Белый — это цвет для просмотра текста, в противном случае текст становится зеленым на зеленом фоне..

Наконец, мы используем преобразование для достижения той же позиции, без позиции, слева и сверху..

В частности, стили left: 25wh и transform: translateX (-50%) комбинируются только в translate с calc (25vw — 50%). Мы пользуемся преимуществом того факта, что calc () предназначен для вычисления значения на основе разных единиц. В данном случае это vw (процент от ширины всего окна) и% (который в данном случае представляет собой процент от ширины самого элемента..

JavaScript

JavaScript прост:

const coverPresents = document.querySelector ('. intro-cover .presents'); window.addEventListener ('scroll', function (e) {requestAnimationFrame (function () {coverPresents.style.transform = `translate (calc (25vw — 50%), calc (12.5vh + $ {window.scrollY} px)) `;});});

Сначала мы сохраняем ссылку на .intro-cover .presents в переменной. Это сделано для того, чтобы мы могли напрямую манипулировать.

Затем добавьте прослушиватель событий для события прокрутки. Обязательно добавьте requestAnimationFrame для таких событий в функцию обратного вызова. В принципе так же поступаем и с изменением размера.

Читать также:  Параллакс с фиксированным фоном

Наконец, внутри мы меняем стили преобразования элемента. Мы устанавливаем новый перевод, в котором не только X будет с calc (), но и Y. Это так, чтобы мы могли добавлять столько пикселей к базовой позиции 12,5vh по мере прокрутки. Если перемещать текст точно так же, как мы прокручиваем, он всегда будет визуально отображаться в одном месте. А когда придет конец зеленого контейнера, то overflow: hidden скроет белый текст.

Это подводит нас к упомянутому выше примеру..

Тестирование

Однако после нескольких тестов эффект, кажется, идет так, как ожидалось, в большинстве, но не во всех случаях..

По крайней мере, когда я иногда тестирую Chrome при первой прокрутке колесом мыши или когда прокрутка закончилась, я получаю пропуск:

Незначительный пропуск

Firefox ведет себя немного лучше, но Edge просто ужасен.

Я еще не нашел конкретной причины этих артефактов, но, насколько мне известно, эффекты параллакса не очень хорошо работают для элементов с положением, отличным от абсолютного или фиксированного. Об этом также говорится в статье Дэйва Гамаша "Parallax Done Right":

Анимируйте только элементы с абсолютным или фиксированным положением. Я не на 100% [уверен] почему, но я видел значительное улучшение производительности при простой анимации абсолютных / фиксированных элементов. Как только я применяю хотя бы одну анимацию относительного / статического элемента, количество кадров в секунду уменьшается.

Дэйв Гамаш

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

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?