Hi I am trying to do scrolling article animation from bottom to top like in this site link. Help me please. 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 class="article1"></article>
<article class="article2"></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 don’t worked
Advertisement
Answer
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 class="article1"> <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 class="article2"> <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 class="article3"> <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 class="article4"> <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>