ScrollMagic

ScrollMagic

ScrollMagic — одна из альтернатив Scrollr. Сама библиотека позволяет фиксировать элемент на экране при прокрутке. Однако в сочетании с GSAP он становится мощным инструментом для достижения эффектов параллакса..

Вы можете скачать библиотеку с http://scrollmagic.io/. И в этом уроке мы рассмотрим несколько основных примеров того, как его использовать..

HTML

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

!DOCTYPE html>
html>
голова>
мета-кодировка = "utf-8" />
title> Parallax ScrollMagic / title>
/ голова>
тело>
span id = "logo"> M / span>
/ body>
/ html>

CSS

Добавим базовый сброс CSS:

* {маржа: 0; отступ: 0; }
html, body {width: 100%; высота: 360vh; } / * 360vh, чтобы иметь поле для прокрутки и параллакса * / body {background: # E0E0E0; цвет: # 333; шрифт: обычный 14px / 1.35 Arial, Helvetica, sans-seerif; }

Давайте установим следующие стили логотипа, чтобы он выглядел примерно так:

#logo {background: # 2060DF; / * синий фон * / color: #FFF; / * белый текст * / font: normal 192px / 1.13 Verdana, Arial, sans-serif; / * большой размер шрифта и семейство шрифтов, которые нам нравятся; специальная высота строки — держать текст по центру вертикально в соответствии с фоном * / display: inline-block; / * чтобы мы могли установить фиксированные элементы в элемент span * / width: 1.2em; / * равная ширина и высота, которые зависят от шрифта; так что он становится красивым квадратом * / height: 1.2em; выравнивание текста: центр; / * для отображения текста по центру по горизонтали * / user-select: none; / * чтобы вести себя больше как изображение и не иметь возможности выбрать букву внутри * / position: absolute; / * разместить его на пустом экране * / top: 100vh; / * быть внизу, чтобы побудить людей пролистать и увидеть больше * / left: 50vw; / * быть по центру по горизонтали * / transform: translate (-50%, -50%); / * для компенсации размеров элемента, вместо того, чтобы верхний левый угол находился в центре экрана * /}

JavaScript

А теперь пришло время JavaScript.

Загрузим сначала все, что нам нужно:

  • TweenLite.min.js — возможно, TweenMax.min.js, но давайте просто загрузим то, что нам действительно нужно
  • CSSPlugin.min.js — это то, что нам нужно для анимации стилей
  • EasePack.min.js — в принципе можно обойтись без него, но некоторые анимации становятся более естественными, когда у нас есть ослабление.
  • ScrollMagic.min.js — мы еще пишем для него урок
  • animation.gsap.min.js — интеграция между ScrollMagic и TweenLite / TweenMax; без этого «клея» между ними страница приведет к ошибкам
Читать также:  Что такое параллакс

script src = "TweenLite.min.js"> / script>
script src = "CSSPlugin.min.js"> / script>
script src = "EasePack.min.js"> / script>
script src = "ScrollMagic.min.js"> / script>
script src = "animation.gsap.min.js"> / script>

А теперь очередь нашего программного кода, который будет перемещать элементы:

Контроллер

const controller = новый ScrollMagic.Controller ();

Внутренний способ работы ScrollMagic требует, чтобы у нас был контроллер, который напрямую подключен к полосе прокрутки на странице..

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

Сцены

Затем давайте добавим самое простое, что умеет ScrollMagic:

const scenePin = new ScrollMagic.Scene ({triggerElement: ‘#logo’}) .setPin (‘# logo’) .addTo (контроллер);

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

Сцена должна содержать изменение стилей (например, чтобы зафиксировать элемент на экране, или добавить класс, или связать его с изменением других параметров стиля и т. Д.).

Первый аргумент, который мы передаем конструктору, — это объект с настройками сцены. Эти настройки включают:

  • triggerElement — может быть строкой с селектором CSS рядом с элементом, на который должна ссылаться анимация, или непосредственно элементом DOM
  • triggerHook — может быть числом от 0 до 1. Также есть три значения, которые могут быть представлены в виде строки:
  • onEnter или просто 1 (100% расстояние от верхнего края экрана) — указывает, что ScrollMagic выполнит свою работу, когда элемент находится в нижней части экрана (входит в область просмотра при прокрутке)
  • onCenter или 0,5 (50% области просмотра) — анимация будет запускаться при попадании элемента в центр экрана. Это также значение по умолчанию, которое будет использоваться, если вы не укажете иное.
  • onLeave или 0 — когда элемент находится вверху и через некоторое время прокрутка выйдет из области просмотра.
  • смещение — по умолчанию 0; в противном случае его можно использовать вместо triggerHook или в сочетании с ним для перемещения начала сцены вверх или вниз по экрану с фиксированным значением в пикселях (а не в процентах, как в случае с triggerHook)
  • duration — «продолжительность» анимации. Другими словами — при прокрутке еще на несколько пикселей вниз сцена должна заканчиваться
  • reverse — нужно ли прокручивать в обратном направлении, сцена также должна выполняться в обратном направлении. По умолчанию верно
  • loglevel — связан с отладкой. Если вам нужна дополнительная информация, лучше обратиться к официальной документации по адресу http://scrollmagic.io/docs/ScrollMagic.Scene.html#constructor.
  • Читать также:  Разделяй и властвуй

    setPin

    Когда у нас есть сцена, можно связать с ней какое-то действие. Мы сказали, что начнем с самого простого, а именно с фиксации элемента на экране. Его положение меняется на фиксированное, и он больше не двигается. Итак — потому что мы не установили длительность. В противном случае он будет исправлен только для определенного количества прокрутки, а затем снова появится с экрана, если мы продолжим прокрутку..

    добавить в

    Наконец, с помощью метода addTo на сцене мы добавляем его в контроллер, который мы зарегистрировали ранее..

    Интеграция с GSAP

    Самое интересное происходит, когда мы связываем ScrollMagic с анимацией, определенной GSAP..

    В принципе, мы можем просто выполнить анимацию, которую мы определили с помощью GSAP, когда triggerElement достигает triggerHook. Однако это не самое интересное, что мы можем сделать..

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

    От квадрата к кругу

    Теперь, когда логотип закреплен в центре экрана, давайте начнем новую сцену:

    const vh = window.screen.availHeight / 100;
    const sceneCircle = new ScrollMagic.Scene ({triggerElement: ‘#logo’, продолжительность: 50 * vh, смещение: 10 * vh})

    Я регистрирую константу vh как помощник для расчета, сколько пикселей соответствует 1vh в CSS.

    Читать также:  Тестирование палиндрома часть 1

    В этом случае мы не будем заморачиваться пересчетом при изменении размера экрана, но если вы разрабатываете что-то в реальных условиях, хорошо бы написать код, чтобы при изменении размера окна браузера JavaScript не ломался.

    В качестве длительности сцены мы устанавливаем 50vh (50 * vh), так как мы хотим сместить ее немного вниз от середины экрана (10vh после того, как элемент уже установлен)..

    setTween

    Затем на сцену выходит метод setTween. Здесь нам понадобится animation.gsap.min.js, иначе у нас будет ошибка JS, и анимация GSAP не будет правильно привязываться к прокрутке на странице..

    .setTween (новый TweenLite.to (‘# logo’, 1, {className: ‘+ = circle’}))

    В качестве параметра setTween мы отправляем новый TweenLite (возможно, TweenMax).

    Последнюю привязываем к #logo. Мы устанавливаем длительность в 1 секунду, что не имеет особого значения, так как анимация будет привязана к прокрутке. Наконец, в качестве настроек, однако, мы не указываем конкретные стили, а указываем GSAP добавить класс круга..

    Этот класс на самом деле не установлен, но с помощью CSSPlugin.min.js GSAP проверяет, какие стили будет иметь элемент при применении этого класса, и на время анимации вычисляет средние значения стилей от до назначения класса до окончательного значения..

    Добавим следующий стиль CSS:

    .круг {радиус границы: 50%; }

    Наконец, давайте добавим сцену к контроллеру, который у нас есть с помощью addTo (controller).

    Ролл-ролл

    Когда логотип станет круглым, давайте добавим третью сцену, чтобы повернуть его:

    const sceneBarrelRoll = new ScrollMagic.Scene ({triggerElement: ‘#logo’, продолжительность: 100 * vh, смещение: 75 * vh}) .setTween (new TweenLite.to (‘# logo’, 1, {вращение: 360, легкость : Power1.easeInOut})) .addTo (контроллер);

    triggerElement снова #logo. Продолжительность — полноэкранная прокрутка. смещение рассчитывается на основе предыдущих анимаций, поэтому оно выполняется после того, как логотип уже превратился в круг.

    С помощью setTween мы устанавливаем поворот на 360 градусов, который мы устанавливаем для easyInOut первой степени. Если мы пойдем без этого ослабления, мы не сможем загрузить EasePack.min.js, описанный выше..

    Пример

    Вы можете увидеть результат наших анимаций на https://magadanski.com/demo/parallax-scrollmagic/.

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