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

    좋은 웹페이지 즐겨찾기