How to Make Website with Scroll Reveal Effects | Reveal Elements On Scroll - HTML, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you will learn how to make a website with scroll reveal animations to get extra more attract to the website using HTML, CSS and Javascript. Hope this video will be helpful.

Visit https://scrollrevealjs.org for ScrollReveal JavaScript Library

ScrollReveal JavaScript - https://scrollrevealjs.org

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 - HTML, CSS & Javascript</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="https://unpkg.com/scrollreveal"></script>
  </head>
  <body>

<section class="sec-01">
      <div class="container">
        <h2 class="main-title">Reveal Elements On Scroll</h2>
        <div class="content">
          <div class="image">
            <img src="img1.jpg" alt="">
          </div>
          <div class="text-box">
            <h3>Lorem Ipsum</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          </div>
        </div>
        <div class="media-icons">
          <a href="#" class="icon"><i class="fab fa-facebook"></i></a>
          <a href="#" class="icon"><i class="fab fa-instagram"></i></a>
          <a href="#" class="icon"><i class="fab fa-twitter"></i></a>
          <a href="#" class="icon"><i class="fab fa-youtube"></i></a>
        </div>
      </div>
    </section>
    <section class="sec-02">
      <div class="container">
        <h3 class="section-title">Lorem Ipsum</h3>
        <div class="content">
          <div class="image">
            <img src="img2.jpg" alt="">
          </div>
          <div class="info">
            <h4 class="info-title">Description</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          </div>
        </div>
      </div>
    </section>
    <section class="sec-03">
      <div class="container">
        <h3 class="section-title">Lorem Ipsum</h3>
        <div class="content">
          <div class="media-info">
            <li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li>
            <li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
            <li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
            <li><a href="#"><i class="fab fa-youtube"></i> Youtube</a></li>
            <li><a href="#"><i class="fab fa-linkedin"></i> Linkedin</a></li>
          </div>
          <div class="image">
            <img src="img3.jpg" alt="">
          </div>
        </div>
      </div>
    </section>

//target elements, and specify options to create reveal animations
      ScrollReveal().reveal('.main-title, .section-title', { delay: 500, origin: 'left' });
      ScrollReveal().reveal('.sec-01 .image, .info', { delay: 600, origin: 'bottom' });
      ScrollReveal().reveal('.text-box', { delay: 700, origin: 'right' });
      ScrollReveal().reveal('.media-icons i', { delay: 500, origin: 'bottom', interval: 200 });
      ScrollReveal().reveal('.sec-02 .image, .sec-03 .image', { delay: 500, origin: 'top' });
      ScrollReveal().reveal('.media-info li', { delay: 500, origin: 'left', interval: 200 });
    </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;
}

html{
  scroll-behavior: smooth;
}

body{
  background: #111222;
}

section{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 100px;
  color: #fff;
}

.container{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.main-title{
  font-size: 4em;
  margin-bottom: 50px;
}

.content{
  position: relative;
  width: 1150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content .image{
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.content .image img{
  z-index: 111;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.content .text-box{
  z-index: 222;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  padding: 40px;
  max-width: 400px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transform: translate(-80px, 50px);
}

.content .text-box h3{
  font-size: 2em;
  margin-bottom: 10px;
}

.media-icons{
  margin-top: 100px;
}

.media-icons a{
  color: #fff;
  font-size: 2em;
  margin: 60px;
}

.section-title{
  font-size: 3em;
  margin-bottom: 80px;
}

.info-title{
  font-size: 1.8em;
  margin-bottom: 10px;
}

.info{
  width: 700px;
  margin-left: 50px;
}

.media-info{
  width: 400px;
  margin-left: 50px;
}

.media-info li{
  list-style: none;
  font-size: 1.4em;
}

.media-info li a{
  color: #fff;
  text-decoration: none;
}

.media-info li:not(:last-child){
  margin-bottom: 50px;
}

.media-info li:nth-child(1), .media-info li:nth-child(5){
  padding-left: 100px;
}

.media-info li:nth-child(2), .media-info li:nth-child(4){
  padding-left: 50px;
}

.sec-03{
  margin-bottom: 100px;
}

Download Image Files

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

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

Hamza AlhadithySeptember 18, 2021 at 12:45 AM
thank you very much for helping us and hope you to do for us a video how to make comment and how to post in our websites like facebook
AnonymousMarch 2, 2023 at 5:17 AM
how to make this responsive

Friday, September 17, 2021

How to Make Website with Scroll Reveal Effects | Reveal Elements On Scroll - 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

Friday, September 17, 2021

How to Make Website with Scroll Reveal Effects | Reveal Elements On Scroll - 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