Reveal Website Elements On Scroll | On Page Scroll Down - Using HTML, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you are going to learn how to create a Website Element Reveal Effect On Mouse Scroll Down using HTML, CSS, and Vanilla Javascript. When you scroll down in the page with this scrolling effect will reveal the website elements one by one. This is a useful scrolling effect when you designing an attractive website. Lets see how to create this element revealing effect.

First, create the index.html file and the style.css file. After you created these two files, link the style.css file in between <head></head> tags to the index.html file. Then start the HTML part of the elements to be revealed in the index.html file as you can see in the video. After the HTML part of the elements to be revealed is complete, then go to the style.css file and do the styling part with responsive styling of the elements to be revealed as you can see in the video. After the styling part is complete, then go to the index.html file to start the javascript part of the elements reveal on scroll. In the index.html file before the body close tag open <script></script> tags and then complete the javascript part of the element revealing effect on scroll as you can see in the video. So that's all, Hope this video will be helpful when you designing a website with scroll revealing effect using HTML, CSS, and Vanilla Javascript.

All the source codes and source files and available to download from here. Use the download button or copy and paste the code from the text editors. My opinion is first try to do it by following the video line by line. It will help you to understand all of it. After that, if your code is wrong or not working use the given source codes to compare with your code. It will help you to understand all of your mistakes.

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reveal Website Elements On Scroll</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

<section>
      <h1>Reveal Elements On Scroll</h1>
    </section>
    <section>
      <div class="container reveal">
        <h2>Your Title</h2>
        <div class="cards">
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="container reveal">
        <h2>Your Title</h2>
        <div class="cards">
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="container reveal">
        <h2>Your Title</h2>
        <div class="cards">
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </div>
      </div>
    </section>

function reveal(){
      var reveals = document.querySelectorAll('.reveal');

for(var i = 0; i < reveals.length; i++){

var windowheight = window.innerHeight;
        var revealtop = reveals[i].getBoundingClientRect().top;
        var revealpoint = 150;

if(revealtop < windowheight - revealpoint){
          reveals[i].classList.add('active');
        }
        else{
          reveals[i].classList.remove('active');
        }
      }
    }
    </script>

</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body{
  background: #1D212B;
}

section{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section:nth-child(1){
  color: #fff;
}

section:nth-child(2){
  color: #1D212B;
  background: #fff;
}

section:nth-child(3){
  color: #fff;
}

section:nth-child(4){
  color: #1D212B;
  background: #fff;
}

section .container{
  margin: 100px;
}

section h1{
  font-size: 60px;
}

section h2{
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
}

section .cards{
  display: flex;
}

section .cards .text-card{
  background: #2696E9;
  margin: 20px;
  padding: 20px;
}

section .cards .text-card h3{
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 900px){
  section h1{
    font-size: 40px;
  }

section .cards{
    flex-direction: column;
  }
}

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: all 2s ease;
}

.reveal.active{
  transform: translateY(0px);
  opacity: 1;
}

Download File Setup

If the download didn't start automatically, click here.

Wednesday, January 13, 2021

Reveal Website Elements On Scroll | On Page Scroll Down - Using HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Wednesday, January 13, 2021

Reveal Website Elements On Scroll | On Page Scroll Down - Using HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form