How to use getBoundingClientRect() Javascript Method scroll effect (Tutorial with Practice)

#javascript #getboundingclientrect

Hi Friends,
Today we are going to learn how to use a custom scroll effect when scrolling down.

There is a cool slider called AOS
but we are going to use vanilla javascript to use it as the same effect when scrolling the page.

first, we are going to add 10 sections. for emmet section*10 vs code

    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>

CSS

section {
            height: 300px;
            background: red;
            margin-bottom: .5rem;
            transition: .5s;
        }

and javascript

  let section = document.querySelectorAll('section')

        window.onscroll = (() => {
            section.forEach(function(v) {
                let rect = v.getBoundingClientRect();
                let y = rect.y;
                if (y > window.innerHeight) {
                    v.setAttribute('style', 'opacity: 0; transform: translateY(100%)');
                } else {
                    v.setAttribute('style', 'opacity: 1; transform: translateY(0%)');
                }
            })
        })

the getBoundingClientRect() method has some object such as:

x
y
width
height
top
bottom we have used y cordination and for more details about this getBoundingClientRect() we can follow some usefull links.

below some usefull links to learn more about getBoundingClientRect() Js method.

Thanks, for today. If you interested in this short tutorial please like comment and follow.
Bye

DEV Community

How to use getBoundingClientRect() Javascript Method scroll effect (Tutorial with Practice)

Top comments (0)

Read next

Build an AI-powered campaign manager (Next.js, OpenAI, CopilotKit)

tsconfig.json: The Hidden Hero of Your TypeScript Adventure

Let's Dive into the World of Web Sockets: A Beginner's Guide

NodeJS 22 is Live