Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

August 15, 2022 01:14 pm GMT

Scroll Animation | JavaScript

Learn How to Make a Scroll Animation using CSS and JavaScript, step-by-step from scratch.
As you will notice in this tutorial: one block comes from the right and another one from the left!

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Scroll Animation</title>  <link rel="stylesheet" href="style.css">  <script defer src="app.js"></script></head><body>  <h1>Scroll to See  the Animation</h1>  <div class="box blue show">    <h2>content</h2>  </div>  <div class="box red">    <h2>content</h2>  </div>  <div class="box yellow">    <h2>content</h2>  </div>  <div class="box green">    <h2>content</h2>  </div>  <div class="box blue">    <h2>content</h2>  </div>  <div class="box red">    <h2>content</h2>  </div>  <div class="box yellow">    <h2>content</h2>  </div>  <div class="box green">    <h2>content</h2>  </div>  <div class="box blue">    <h2>content</h2>  </div>  <div class="box red">    <h2>content</h2>  </div>  <div class="box yellow">    <h2>content</h2>  </div>  <div class="box green">    <h2>content</h2>  </div></body></html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');* {    box-sizing: border-box;}/*Color*/.blue {    --clr: #4285f4;}.red {    --clr: #db4437;}.yellow {    --clr: #f4b400;}.green {    --clr: #0f9d58;}body {    background-color: #636e72;    font-family: "Roboto", sans-serif;    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    margin: 0;    overflow-x: hidden;}h1 {    color: rgb(226, 226, 226);    text-transform: uppercase;    margin: 30px;    text-shadow: 2px 2px 10px #000;}.box {    background-color: var(--clr);    color: #fff;    display: flex;    align-items: center;    justify-content: center;    width: 400px;    height: 200px;    margin: 10px;    border-radius: 20px;    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);    transform: translateX(400%);    transition: transform 0.4s ease;}.box:nth-of-type(even) {    transform: translateX(-400%);}.box.show {    transform: translateX(0);}.box h2 {    font-size: 45px;    text-shadow: 2px 2px 3px #000;}

JavaScript

const boxes = document.querySelectorAll('.box');window.addEventListener('scroll', checkboxes);checkboxes();function checkboxes() {    const triggerBottom = window.innerHeight / 5 * 4;    boxes.forEach((box) => {        const boxTop = box.getBoundingClientRect().top;        if (boxTop < triggerBottom) {            box.classList.add('show');        } else {            box.classList.remove('show');        }    });}

Follow me for more on:
YouTube: https://bit.ly/3oBQbc0
Facebook: https://bit.ly/3cp2S5W
Instagram: https://bit.ly/3Ihh2EB

Original Link: https://dev.to/robsonmuniz16/scroll-animation-javascript-10k2

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To