How to do this article scroll animation?-CodePudding

Hi i am trying to do scrolling article animation from bottom to top like in this site link. Help me pls. There is my code: (Idk how to do this) I am forgot to show my code

<head>
    <title>Scroll</title>
    <style>
        article {
            width: 100vw;
            height: 100px;
            position: sticky;top: 0;
        }

        article:not(:last-child) {
            margin-bottom: 10px;
        }  
        .article1 {
            background-color: red;
        }
        .article2 {
           background-color: aqua; 
           z-index: 100;
        }
        .article3 {
            background-color: teal;
        }
        .article4 {
            background-color: yellow;
            height: 100vh;
        }
    </style>
</head>
<body>
    <article ></article>
    <article ></article>
</body>
<script>
    // const articles = document.querySelectorAll('article')
    // const arr = Array.from(articles)
    // let height = 300
    // let h = -300
    //
    // for (let i = 0; i < arr.length; i  ) {
    //     h = h   height
    //     arr[i].style.marginTop = h   'px'
    // }
</script>

I am tried position: fixed use javascript with marginTop but dont worked

CodePudding user response：

Check the same effect Click here to view on CodePen

I hope this helps.

body,
h2 {
  margin: 0;
  font-size: 2em;
}

article {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
}

.article1 {
  background-color: red;
}
.article2 {
  background-color: aqua;
}
.article3 {
  background-color: teal;
}
.article4 {
  background-color: yellow;
}

<article >
  <h2>article</h2>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus tempora laborum quibusdam consectetur vitae eligendi ut ipsam, sint assumenda error quae, facilis similique quidem ipsa eum culpa porro eveniet autem!

</article>
<article >
  <h2>article</h2>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, et aperiam ratione, veniam adipisci eveniet cumque nostrum possimus impedit doloribus labore hic non harum qui atque facilis iusto temporibus culpa!
</article>
<article >
  <h2>article</h2>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, et aperiam ratione, veniam adipisci eveniet cumque nostrum possimus impedit doloribus labore hic non harum qui atque facilis iusto temporibus culpa!
</article>
<article >
  <h2>article</h2>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, et aperiam ratione, veniam adipisci eveniet cumque nostrum possimus impedit doloribus labore hic non harum qui atque facilis iusto temporibus culpa!
</article>

CodePudding user response：

If you were to use 100vh instead of 100px, then your would work with no javascript because you already defined with position:sticky in css.

But if you use 100px, it is likely that your window is not less then 100px, so there is no scrolling needed. A way to work around is to add another div underneath which is tall enough to make the user scroll such as

<article ></article>
<article ></article>
<div id="filler" style="height: 100vh"></div>