CODEWITHSUNDEEP
scrollreveal.jsscrollreveal.js
Nolan Lochlainn
Nolan Lochlainn

Reputation: 1

I used scroll reveal script but the images load from the left instead of top to bottom

Basically i'm making a simple portfolio website and i have a gallery on one of the pages. From the script i copy pasted from the scrollreveal site loads my images from left to right which i don't know how to fix. I want them to load from top to bottom as you scroll down.

The html code looks like this

<div class="container">

    <h1 class="title">placeholder</h1>

    <div class="image-container">
        <img class="image" src="x" >
        <img class="image" src="x" >
        <img class="image" src="x" >
        <img class="image" src="x" >
        <img class="image" src="x" >
    </div>
</div>

And i used this in the js section

ScrollReveal().reveal('.image', { delay: 200, easing: "ease-out", interval: 100, scale: 1.2,});

this is my first time ever making a website i don't know how to use javascript so i just relied on css and html for the most part

Upvotes: 0

Views: 202

Answers (1)

Leonardo S&#225;enz
Leonardo S&#225;enz

Reputation: 11

Try this code:

// Reveal animation configuration from top
ScrollReveal().reveal('.scroll-reveal.from-top', {
  distance: '50px',   // Distance from which the element will appear
  origin: 'top',      // Origin of the reveal ('top' to appear from the top)
  duration: 1000,     // Animation duration in milliseconds
  easing: 'ease-out'  // Animation easing function (optional)
});

HTML

<img class="image scroll-reveal from-top" src="x" >

Upvotes: 0

Related Questions