saos

Тонкая анимация при прокрутке

Очень маленький стройный компонент для анимации ваших элементов при прокрутке.

SAoS позволяет анимировать один или несколько раз элемент при прокрутке, вы можете определить верхние и нижние «триггеры» и CSS внутренних элементов div (не рекомендуется, но может помочь в некоторых случаях), см. ниже демонстрацию, как установить и несколько примеров?

С точки зрения производительности, эта библиотека использует Intersection Observer для большинства браузеров (позор Internet Explorer)

⚡ Демо

---

Как установить

• Нпм

 npm i saos --save-dev

• Пряжа

 yarn add -D saos

Примечание. Sapper поддерживает только библиотеки в качестве зависимостей DEV . Если вы действительно хотите использовать эту библиотеку в качестве обычной зависимости от Sapper, обязательно import Saos from 'saos/src/Saos.svelte'; иначе у вас будут проблемы с SSR!

Как использовать

Основное использование:

• Сначала импортируйте пакет на Svelte.

 import Saos from "saos" ;

• Затем определите анимацию @keyframes как глобальную в svelte.

 @keyframes -global-from-left {
  0 % {
    transform : rotateX ( 50 deg ) translateX ( -200 vw ) skewX ( -50 deg );
    opacity : 1 ;
  }
  100 % {
    transform : rotateX ( 0 deg ) translateX ( 0 ) skewX ( 0 deg );
    opacity : 1 ;
  }
}

• Наконец, добавьте имя ключевого кадра без -global- и других параметров анимации.

 < Saos animation = { "from-left 4s cubic-bezier(0.35, 0.5, 0.65, 0.95) both"} >
  < div > < p > animation: from-left </ p > </ div >
</ Saos >

Помимо параметра анимации вы можете использовать:

• анимация_out -> для воспроизведения анимации, когда элемент больше не «видим» (используйте верхнюю и нижнюю часть, чтобы определить это), по умолчанию: «нет; непрозрачность: 0»
• Once -> если анимация будет воспроизводиться только один раз или несколько раз, по умолчанию: false
• top -> верхняя часть наблюдателя, используйте положительное значение для воспроизведения анимации после того, как верхняя часть станет видимой, по умолчанию: 0
• дно -> нижняя часть наблюдателя, используйте положительное значение для воспроизведения анимации после того, как нижняя часть станет видимой, по умолчанию: 0
• css_observer -> CSS div, который является наблюдателем, не рекомендуется использовать, но здесь ?, по умолчанию: ""
• css_animation -> css div, который является анимацией, не рекомендуется использовать, но есть здесь?, по умолчанию: ""

А ещё у нас есть реактивные рассылки!

Вы можете сделать что-то вроде:

 // Create a handler on your script

function handleObserver ( x ) {
  console . info ( x . detail . observing ) ;
}

// Use the `update` event on your html that will be dispatched every time that the `observing` update!

< Saos on : update = { handleObserver } > ... < / Saos >

И это сработает! Удивительно, нет? взгляните на последнюю карту в нашей демо-версии

И вы можете увидеть кучу использования здесь

Если вам лениво (как и мне) создавать собственные анимации, загляните на animista.