Поклонение! Самая потрясающая анимация прокрутки достигается с наименьшим количеством кода!

внешний интерфейс JavaScript
Поклонение! Самая потрясающая анимация прокрутки достигается с наименьшим количеством кода!

Всем привет, я старая рыба из front-end лаборатории!

Сегодня Laoyu расскажет вам, как создавать захватывающую анимацию прокрутки с минимальным кодом~

болтатьScrollTriggerПеред плагином давайте кратко рассмотрим егоGSAP.

Платформа анимации GreenSock (GSAP) может анимировать все, чем может манипулировать JavaScript (свойства CSS, SVG, React, холст, универсальные объекты и т. д.), и решать проблемы совместимости в разных браузерах и в 20 раз быстрее, чем jQuery. Около 10 миллионов веб-сайтов и многие крупные бренды используют GSAP.

Далее Лаоюй поведет вас учиться вместеScrollTriggerИспользование плагинов.

Знакомство с плагинами

ScrollTriggerосновывается наGSAPРеализован высокопроизводительный триггер прокрутки страницы.HTMLПлагин для анимации элементов.

пройти черезScrollTriggerСоздавайте захватывающую анимацию прокрутки с минимальным кодом. нам нужно знатьScrollTriggerосновывается наGSAPреализованы плагины,ScrollTriggerзаключается в обработке событий прокрутки, а реальная обработка анимацииGSAP, их комбинация может обеспечить анимацию прокрутки ~

Возможности плагина

  • Свяжите любую анимацию с определенным элементом, чтобы она выполнялась только тогда, когда элемент находится в поле зрения.
  • Действия с анимацией (воспроизведение, пауза, возобновление, перезапуск, реверс, завершение, сброс) могут выполняться при входе/выходе из определенной области или привязке ее непосредственно к полосе прокрутки.
  • Задерживает синхронизацию между анимацией и полосами прокрутки.
  • Захватывает значения прогресса в анимации на основе скорости.
  • Встраивайте триггер прокрутки непосредственно в любую анимацию GSAP (включая временную шкалу) или создавайте автономные экземпляры и делайте все, что хотите, с помощью богатой системы обратного вызова.
  • Расширенное закрепление может заблокировать элемент между определенными позициями прокрутки.
  • Гибкое определение положения прокрутки.
  • Поддерживается вертикальная или горизонтальная прокрутка.
  • Богатая система обратного звонка.
  • Позиция автоматически пересчитывается при изменении размера окна.
  • Включите визуальные маркеры во время разработки, чтобы точно видеть, где находятся начальные/конечные/триггерные точки.
  • Когда прокручиваемый рекордер активен, например,activeКласс добавляется к элементу триггера:toggleClass: "active"
  • Используйте стандартный медиа-запрос matchMedia(), чтобы создать разные настройки для разных размеров экрана.
  • Пользовательский контейнер триггера прокрутки, который может определять div вместо области просмотра браузера.
  • Высоко оптимизирован для максимальной производительности.
  • Размер плагина составляет всего около 6,5 КБ.

установить/ссылка

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>

ES Modules

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
​
gsap.registerPlugin(ScrollTrigger);

UMD/CommonJS

import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
​
gsap.registerPlugin(ScrollTrigger);
​

Простой пример

gsap.to(".box", {
  scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once)
  x: 500
});

Расширенный пример

let tl = gsap.timeline({
    // 添加到整个时间线 
    scrollTrigger: {
      trigger: ".container",
      pin: true,   // 在执行时固定触发器元素
      start: "top top", // 当触发器的顶部碰到视口的顶部时
      end: "+=500", // 在滚动 500 px后结束
      scrub: 1, // 触发器1秒后跟上滚动条
      snap: {
        snapTo: "labels", // 捕捉时间线中最近的标签
        duration: {min: 0.2, max: 3}, // 捕捉动画应至少为 0.2 秒，但不超过 3 秒（由速度决定） 
        delay: 0.2, // 从上次滚动事件开始等待 0.2 秒，然后再进行捕捉 
        ease: "power1.inOut" // 捕捉动画的过度时间（默认为“power3”） 
      }
    }
  });
​
// 向时间线添加动画和标签 
tl.addLabel("start")
  .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0})
  .addLabel("color")
  .from(".box", {backgroundColor: "#28a92b"})
  .addLabel("spin")
  .to(".box", {rotation: 360})
  .addLabel("end");

пользовательский пример

ScrollTrigger.create({
  trigger: "#id",
  start: "top top",
  endTrigger: "#otherID",
  end: "bottom 50%+=100px",
  onToggle: self => console.log("toggled, isActive:", self.isActive),
  onUpdate: self => {
    console.log("progress:", self.progress.toFixed(3), "direction:", self.direction, "velocity", self.getVelocity());
  }
});

Далее рассмотрим использованиеScrollTriggerКакого эффекта можно добиться.

использоватьScrollTriggerМожно добиться множества крутых эффектов, и есть еще примеры и исходные коды, перейдите на фон паблик-аккаунта, чтобы ответитьaaa滚动Получите обучение прямо сейчас! Студенты также могут обсудить с Лаоюй ~

Входя в парадную дверь, это семья

Оригинальность — это непросто, лайки, комментарии и обмен — это мотивация для написания Лаоюй!

Категории