Guida ScrollReveal.js
소개
ScrollReveal è una libreria JavaScript robusta e flessibile che consente di animare facilmente gli elementi che entrano o escono dal viewport.
빠른 시작
포함 la libreria nell'html:
<script src="https://unpkg.com/scrollreveal"></script>
이 기능은 ScrollReveal() 비용을 지불하는 데 사용됩니다.
프리마 애니메이션
단일 구성 구성:
<h1 class="appear-from-bottom">
Hello World!
</h1>
ScrollReveal().reveal('.appear-from-bottom');
애니메이션 옵션
ScrollReveal.js는 원하는 대로 다양한 옵션을 제공합니다.
지연: è il tempo in millisecondi prima dell'inizio delle animazioni, es.
{ delay: 500 }
. 거리: controlla quanto distancei si muovano gli elementi quando rivelati, es.
{ distance: '50px' }
. 기간: controlla il tempo di completamento delle animazioni in millisecondi, es.
{ duration: '600 }
. Easing: controlla la transizione delle animazioni tra i valori iniziali e finali, es.
{ easing: 'ease-in' }
. Inverval: è il tempo che intercorre tra ogni reveal, es.
{ interval: 600 }
. 불투명도: 특정 l'opacità che hanno prima di essere rivelati, es.
{ opacity: 0.8 }
. 원산지: specifica da quale direzione provengono gli elementi quando vengono rivelati, es.
{ origin: 'top' }
(액세타 안체: bottom
, left
, right
). 회전: specifica la rotazione che gli elementi hanno prima di essere rivelati, es.
{ rotate: { x: 20, z: 20 }
. 척도: specifica la dimensione degli elementi prima di essere rivelati, es.
{ scale: 0.85 }
. 에스엠피오 프라티코
Un esempio di come può essere utilizzata la libreria per avere various animazioni mentre si scrolla la pagina:
ScrollReveal().reveal('.appear-left', {
origin: 'left',
delay: 1000,
duration: 600,
distance: '100px',
});
ScrollReveal().reveal('.appear-right',{
origin: 'right',
delay: 1000,
duration: 600,
distance: '100px',
});
Lo stesso codice viene usato nel seguente codepen:
리오르세 어지언티브
ulteriori configurazioni, metodi e callbacks visita la pagina API di ScrollReveal.js
Spero questa mini guida vi sia piaciuta , thinka di mettere ❤️ al post e seguirmi sui miei 사회적:
GitHub
Reference
이 문제에 관하여(Guida ScrollReveal.js), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/giandomenicopagliara/guida-semplice-scrollrevealjs-1c28텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)