Element visible on scroll in Simple Vanilla Javascript

Pugazhenthi

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Visible on Scroll</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <section class="one">
<h1>Scroll down to see the text effect..</h1>
    </section>
    <section class="two">
        <div class="late-visible">
            <h2>1. WElcome here..</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda ad itaque, facere hic consectetur voluptate et dolore dolorem odio dignissimos facilis quia illum inventore nobis, minima veritatis adipisci amet possimus!</p>
        </div>
    </section>

    <section class="two">
            <div class="late-visible">
                <h2>2. WElcome here..</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda ad itaque, facere hic consectetur voluptate et dolore dolorem odio dignissimos facilis quia illum inventore nobis, minima veritatis adipisci amet possimus!</p>
            </div>
        </section>

        <section class="two">
                <div class="late-visible">
                    <h2>3. WElcome here..</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda ad itaque, facere hic consectetur voluptate et dolore dolorem odio dignissimos facilis quia illum inventore nobis, minima veritatis adipisci amet possimus!</p>
                </div>
            </section>

            <section class="two">
                    <div class="late-visible">
                        <h2>4. WElcome here..</h2>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda ad itaque, facere hic consectetur voluptate et dolore dolorem odio dignissimos facilis quia illum inventore nobis, minima veritatis adipisci amet possimus!</p>
                    </div>
                </section>
    <script src="script.js"></script>
</body>
</html>

function scrollVisible(){
    var element = document.querySelectorAll('.late-visible');
    var screePosition = window.innerHeight / 1.3;
    var i;   
    for(i=0; i<=element.length-1; i++){
    var elementPosition = element[i].getBoundingClientRect().top;
        if(elementPosition < screePosition){
            element[i].classList.add('late-visible-onview');
        }
    }
}
window.addEventListener('scroll', scrollVisible);

body{
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 170%;
}
section{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.late-visible{
    width: 40%;
    opacity: 0;
    transform: translateY(20px);
    transition: 1s all ease-in-out;
}
.late-visible-onview{
    opacity: 1;
    transform: translate(0px);
}

Discussion

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2019, RTP SYSTEMS