saos 다운로드 - saos 소스 코드 다운로드

saos

기타 소스코드

v1.3.1

다운로드

스크롤 시 날렵한 애니메이션

스크롤 시 요소에 애니메이션을 적용하는 매우 작은 날씬한 구성 요소

SAOS를 사용하면 스크롤 시 요소에 한 번 또는 여러 번 애니메이션을 적용할 수 있습니다. 상단 및 하단 "트리거"와 내부 div의 CSS를 정의할 수 있습니다(권장되지 않지만 경우에 따라 도움이 될 수 있음). 데모 아래에서 설치 방법을 참조하세요. 그리고 몇 가지 예?

성능 측면에서 이 lib는 대부분의 브라우저에서 Intersection Observer를 사용합니다(Internet Explorer에서는 부끄러운 일입니다).

⚡ 데모

설치 방법

Npm

 npm i saos --save-dev

방사

 yarn add -D saos

참고: Sapper는 libs를 DEV 종속성으로만 지원합니다 . 실제로 이 lib를 Sapper의 일반 종속성으로 사용하려면 import Saos from 'saos/src/Saos.svelte'; 그렇지 않으면 SSR에 문제가 생길 것입니다!

사용방법

기본 사용법:

먼저 Svelte에서 패키지를 가져옵니다.

 import Saos from "saos" ;

그런 다음 @keyframes 애니메이션을 -global- on 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 >

애니메이션 매개변수 외에도 다음을 사용할 수 있습니다.

animation_out -> 요소가 더 이상 "표시"되지 않을 때 애니메이션을 재생합니다(상단과 하단을 사용하여 정의). 기본값: "없음; 불투명도: 0"
한 번 -> 애니메이션이 한 번만 재생되거나 여러 번 재생되는 경우 기본값: false
top -> 관찰자의 상단, 상단이 표시된 후 애니메이션을 재생하려면 양수 값을 사용합니다. 기본값: 0
하단 -> 관찰자의 하단, 하단이 표시된 후 애니메이션을 재생하려면 양수 값을 사용합니다. 기본값: 0
css_observer -> 관찰자인 div의 CSS입니다. 사용을 권장하지 않지만 여기에 있습니다. 기본값: ""
css_animation -> 애니메이션인 div의 CSS입니다. 사용을 권장하지 않지만 여기에 있습니다. 기본값: ""

그리고 대응 파견도 있습니다!

다음과 같이 할 수 있습니다:

 // 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 >