Скроллер

Скроллер

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

«Параллакс» выше заключен в кавычки, потому что здесь, как и в AOS, у нас нет 3D-эффекта, и мы сами меняем стили при прокрутке. Однако, в зависимости от того, как мы его используем, мы можем применять стили, чтобы некоторые элементы по-прежнему перемещались быстрее / медленнее, чем другие, и тогда название «параллакс» вполне уместно..

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

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

Как правило, не рекомендуется использовать его в будущем. Статья ниже больше похожа на исторический урок.

Пример — HTML

Начнем с базового HTML-кода для вступительного раздела с заголовком, затем 4 разделов с текстом и изображением:

!DOCTYPE html>
html>
голова>
мета-кодировка = "utf-8" />
title> Параллакс со Skrollr / title>
/ голова>
тело>
section class = "intro">
h1 class = "intro__title"> Демо Skrollr / h1>
/ раздел>
section class = "text-image">
div class = "оболочка">
div class = "text-image__text">
h2 class = "text-image__title"> Lorem ipsum dolor sit./h2>
div class = "text-image__content">
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Ошибка labouriosam molestias voluptatum ut quos ratione dolore minus, sit velit incidunt./p>
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Animi velit, dolorem aut sint numquam deserunt, non id repllat odit deleniti quia maiores dignissimos sequi dolor et nemo eum modi vel./p>
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Et natus culpa magni, maxime iure totam./p>
/ div>
/ div>
div class = "text-image__image">
img src = "images / 01.jpg" width = "400" height = "600" alt = "" />
/ div>
/ div>
/ раздел>
section class = "text-image">
div class = "оболочка">
div class = "text-image__text">
h2 class = "text-image__title"> Lorem ipsum dolor sit amet./h2>
div class = "text-image__content">
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Veniam pariatur, ipsum fugit eum voluptatibus molestias, псевдоним quidem impedit, предусмотрительная ошибка quo ipsa conquuntur, maxime blanditiis ./p>
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Nobis optio delectus, facere nemo deleniti, deserunt quibusdam corporis mollitia voluptatibus, aspernatur modi alias eaque iusto dolorem distinctio debitis quaerat ab. Quisquam praesentium voluptate corporis quibusdam iste eos minima sapiente vero vel ab rem, hic, doloribus adipisci./p>
/ div>
/ div>
div class = "text-image__image">
img src = "images / 02.jpg" width = "400" height = "600" alt = "" />
/ div>
/ div>
/ раздел>
section class = "text-image">
div class = "оболочка">
div class = "text-image__text">
h2 class = "text-image__title"> Lorem ipsum./h2>
div class = "text-image__content">
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Molestiae, nihil? / P>
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Ipsa, sequi./p>
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Voluptas aut temporibus quam corporis magni quae sequi excepturi, pariatur ratione sit ./p>
/ div>
/ div>
div class = "text-image__image">
img src = "images / 03.jpg" width = "400" height = "600" alt = "" />
/ div>
/ div>
/ раздел>
section class = "text-image">
div class = "оболочка">
div class = "text-image__text">
h2 class = "text-image__title"> Lorem ipsum dolor sit amet, consctetur./h2>
div class = "text-image__content">
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Dicta velit fugit voluptatibus recusandae neque pariatur delectus tempora earum distinctio architecture. Dignissimos sapiente autem modi non Laborum asperiores, omnis recusandae conquuntur! / P>
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Sed mollitia aperiam placeat rem nobis praesentium non excepturi eum totam, est cum id, similique odit. Nek sapiente reiciendis quibusdam nobis qui./p>
Lorem ipsum dolor sit amet, conctetur adipisicing elit./p>
/ div>
/ div>
div class = "text-image__image">
img src = "images / 04.jpg" width = "400" height = "600" alt = "" />
/ div>
/ div>
/ раздел>
/ body>
/ html>

Читать также:  Платформа анимации GreenSock (GSAP)

Пример — CSS

Затем давайте продолжим немного CSS, чтобы страница выглядела хорошо:

@charset "utf-8";
* {маржа: 0; отступ: 0; } html, body {width: 100%; высота: 100%; }
тело {фон: # E0E0E0; цвет: # 333; шрифт: обычный 14px / 1.35 Arial, Helvetica, без засечек; }
х1, х2, х3, х4, х5, х6 {font-family: Verdana, Helvetica, sans-serif; заполнение: 0,5 мкм 0 1,5 мкм; выравнивание текста: центр; } h1 {размер шрифта: 3em; } h2 {размер шрифта: 2.4em; } h3 {размер шрифта: 2.2em; } h4 {размер шрифта: 1.8em; } h5 {размер шрифта: 1.4em; } h6 {размер шрифта: 1em; }
p {padding-bottom: 1em; }
.оболочка {ширина: 80%; максимальная ширина: 1400 пикселей; маржа: 0 авто; }
.intro {padding: 5% 15%; }
.текст-изображение {padding: 3em 0; переполнение: скрыто; } .text-image: nth-child (даже) {фон: #FFF; }
.текст-изображение. оболочка {дисплей: гибкий; align-items: center; } .text-image: nth-child (даже) .shell {flex-direction: row-reverse; }
.текст-изображение__image {маржа: 0 2em; }

Читать также:  Объявления стилей CSS часть 2

В целом у нас есть:

  1. сброс настроек
  2. основные стили тела, заголовки и абзацы
  3. основные стили оболочки
  4. стили для добавленных нами разделов:
  1. вступление
  2. текст-изображение

Для текстового изображения я использовал display: flex, чтобы текст был в одном столбце, а изображение — в другом. Кроме того, с: nth-child (even) мы меняем порядок так, чтобы изображение чередовалось вправо и влево. Также чередуем цвет фона (белый и светло-серый).

Пример — skrollr

Нам нужно скачать ядро ​​скроллера с https://github.com/Prinzhorn/skrollr и загрузить его на страницу. Нам также нужно его инициализировать:

тип скрипта = "text / javascript" src = "skrollr.min.js"> / script>
сценарий>
const s = scrollr.init (); / скрипт>

Да, но без конфигурации эта инициализация у нас не работает.

Как именно настроить скроллр?

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

div class = "shell" data — 200 = "transform: translateX (-75%); opacity: 0;" data-100-top = "transform: translateX (0); opacity: 1;">

Эти атрибуты данных содержат стили, которые нужно применить ко многим прокруткам в пикселях. Они действуют в значительной степени как ключевые кадры: «столько пикселей прозрачно, и когда так много пикселей видно». И skrollr заботится о каждом промежуточном значении прокрутки, чтобы показать соответствующую полупрозрачность..

После атрибута данных мы добавляем прочерк и с какого числа пикселей мы хотим, чтобы анимация запускалась. Пример: data-100 означает 100 пикселей над линией сгиба..

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

Мы также можем использовать отрицательные числа. Итак, data — 200 (забавно, что у нас есть тире и минус один за другим) означает 200 пикселей ниже линии сгиба. Другими словами, эти стили применяются, когда элемент приближается, но все еще скрыт. И когда действительно приходит свертка, часть анимации уже истекла..

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

Читать также:  DISC категоризация людей в зависимости от того как они работают

Какие стили мы можем использовать?

Скажите все, что вы можете придумать.

Приведенный выше пример представляет собой комбинацию transform: translate и opacity, но есть еще один пример с transform: rotate:

div class = "text-image__image" data-0 = "transform: rotate (-30deg);" данные — 200-top = "transform: rotate (5deg);">

Вы также можете изменить поля, отступы или цвета, если хотите. Для последнего необходимо использовать rgb () или hsl (), потому что skrollr не поддерживает значения HEX. Вы просто не можете правильно анимировать их из одного цвета в другой, так как они представляют 3 отдельных канала..

Однако это может стоить ресурсов.

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

  • вычисление того, насколько мы прокручены на странице
  • любой другой JavaScript, который есть на нашем сайте
  • JS, которого нет даже на нашем сайте, а в другой вкладке браузера, которую открыли пользователи
  • не только JS, но и множество функций, которые браузер должен организовать
  • почему мы вообще говорим только о браузере; посетитель нашего сайта может в это время открыть любые другие программы на своем компьютере.

Однако, глядя на наш сайт, он почти не играет в игры. Так что мы можем спокойно позволить себе использовать его видеокарту для анимации. В настоящее время он не только слегка загружен, но также предназначен для работы с анимацией и перемещением пикселей на экране. Таким образом вы можете быть уверены, что сайт будет работать без сбоев и анимация, которая у вас есть, не будет обрезана. Потому что если анимация не плавная — лучше вообще не иметь.

Демо

Вы можете увидеть реализованный пример на https://magadanski.com/demo/parallax-skrollr/. Он показывает только базовое использование, но с большим воображением вы можете достичь гораздо большего. Однако имейте в виду, что библиотека официально не обслуживается с сентября 2014 года, поэтому приведенное выше является скорее примером того, что возможно. Ожидайте следующего урока, на котором мы представим еще одну подобную библиотеку — ScrollMagic..

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