How to Make a Website | With Loading Effects & Scrolling Effects - Using HTML, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you will learn how to design a website landing page with loading effects and scrolling effects using HTML, CSS and Vanilla Javascript. Hope this video will be helpful.

Source Codes

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Website Landing Page | With Loading Effects and Scrolling Effects</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

<header>
      <a href="#" class="logo">Logo</a>
      <nav>
        <a href="#">Home</a>
        <a href="#">Explore</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#">More</a>
      </nav>
    </header>
    <section class="home">
      <img src="bg.png" alt="">
      <img src="pyramids.png" class="pyramids" alt="">
      <img src="palace.png" class="palace" alt="">
      <div class="info">
        <h2 class="title">Egypt</h2>
        <p class="paragraph">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.</p>
        <a href="#" class="btn">Learn More</a>
      </div>
    </section>
    <section class="content">
      <h2>Pyramids of Giza</h2>
      <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
      <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
      <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    
  </body>
</html>

Javascript

//reveal elements on page loading
    window.addEventListener("load", () => {
      pyramids.style.transform = "translateX(0)";
      palace.style.transform = "translateX(0)";
      logo.style.transform = "translateY(0)";
      nav.style.transform = "translateY(0)";

setTimeout(() => {
        info.style.transform = "translateY(0)";
        info.style.opacity = "1";
      }, 500);
    });

//scrolling effects on website elements
    window.addEventListener("scroll", () => {
      const scrollVal = window.scrollY;

pyramids.style.left = scrollVal * -0.25 + "px";
      palace.style.left = scrollVal * 0.25 + "px";
      info.style.marginTop = scrollVal * 1.1 + "px";

pyramids.style.transition = "0s";
      palace.style.transition = "0s";
      info.style.transition = "0s";
    });

//hide and display home info on scrolldown and up
    window.onscroll = function(){
      if(document.body.scrollTop > 500 || document.documentElement.scrollTop > 500){
        info.style.opacity = "0";
        info.style.transition = "0.6s";
      }
      else{
        info.style.opacity = "1";
        info.style.transition = "0.6s";
      }
    }
    </script>

CSS

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

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

body{
  min-height: 100vh;
  overflow-x: hidden;
}

header{
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .logo{
  font-size: 2em;
  text-transform: uppercase;
  font-weight: 800;
  text-decoration: none;
  background: linear-gradient(to right, #d7487e, #ea6360);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

header nav{
  display: flex;
  justify-content: center;
  align-items: center;
}

header nav a{
  color: #d9497e;
  font-size: 1.1em;
  font-weight: 500;
  text-decoration: none;
  margin-left: 20px;
  padding: 5px 16px;
  border-radius: 20px;
  transition: 0.3s;
  transition-property: background, color;
}

header nav a:hover{
  background: linear-gradient(to bottom, #d94a7f, #fe9261);
  color: #fff;
}

.home{
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.home:before{
  content: '';
  z-index: 10;
  position: absolute;
  width: 100%;
  height: 80px;
  background: linear-gradient(to top, #722d59, transparent);
  bottom: 0;
}

.info{
  z-index: 8;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateY(200px);
  opacity: 0;
  transition: 0.6s;
}

.info .title{
  font-family: 'Kaushan Script', cursive;
  font-size: 9em;
  background: linear-gradient(to right, #d7487e, #ea6360);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 360px;
  height: 215px;
  margin-bottom: 30px;
}

.info .paragraph{
  color: #19628b;
  font-size: 1.2em;
  width: 50%;
  margin-bottom: 40px;
}

.info .btn{
  font-size: 1.3em;
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(to bottom, #d94a7f, #fe9261);
  color: #fff;
  padding: 10px 35px;
  border-radius: 5px;
  transition: 0.3s;
}

.info .btn:hover{
  transform: scale(1.05);
}

.home img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.content{
  z-index: 10;
  position: relative;
  padding: 90px 100px;
  background: #722d59;
}

.content h2{
  color: #fff;
  font-size: 3em;
  font-weight: 700;
  margin-bottom: 10px;
}

.content p{
  color: #fff;
  font-size: 1em;
}

.pyramids{
  z-index: 9;
  transform: translateX(-600px);
  transition: 0.8s;
}

.palace{
  z-index: 9;
  transform: translateX(600px);
  transition: 0.8s;
}

.logo, nav{
  transform: translateY(-70px);
  transition: 0.8s;
}

Download Image Files

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

Sunday, June 13, 2021

How to Make a Website | With Loading Effects & Scrolling Effects - Using HTML, CSS & Javascript

Description

Source Codes

HTML

Javascript

CSS

Featured Post

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

Popular Posts

Tags

Contact Form

Sunday, June 13, 2021

How to Make a Website | With Loading Effects & Scrolling Effects - Using HTML, CSS & Javascript

Description

Source Codes

HTML

Javascript

CSS

Follow Us on

Featured Post

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

Popular Posts

Tags

Contact Form