DEV Community

Faisal Ahmed
Faisal Ahmed

Posted on

scroll animation content in the website from left/top/right/bottom

website: https://scrollrevealjs.org/

  • add this link in the html page:
    <script src="https://unpkg.com/scrollreveal"></script>

  • add this code in the js file(just change the classname):
    syntax: sr.reveal('.classname',{ delay: 200, origin: 'top' })


// scrollreveal 
const sr = ScrollReveal({
    distance: '60px',
    duration: 2500,
    delay: 400,
    reset: true
})

sr.reveal('.text',{ delay: 200, origin: 'top' })
sr.reveal('.form-container form', { delay: 800, origin: 'left' })
sr.reveal('.heading', { delay: 800, origin: 'top' })
sr.reveal('.ride-container .box', { delay: 600, origin: 'top' })
sr.reveal('.services-container .box', { delay: 600, origin: 'top' })
sr.reveal('.reviews-container .single-review', { delay: 600, origin: 'top' })
sr.reveal('.newsLetter-container', { delay: 600, origin: 'right' })
sr.reveal('.copyright-icons .bx', { delay: 800, origin: 'left' })
Enter fullscreen mode Exit fullscreen mode

Top comments (0)