How To Make Website with Scroll Effect Animation

January 29, 2023January 29, 2023 M-SoftTech 0 Comments

Hello Friends, welcome to m-SoftTech. In Today Article I will teach you how to make a website with using scroll animation effect. it’s looks so amazing effect when you apply this effect in your web pages. you have seen many scrolls website effect in Internet, but this effect is totally different to others effect. it is very easy to use, and its effect is very amazing. you can easily implement this effect in your website. when you use this effect in your website, they make your website is more attractive. and I will share the source code with you. we are using html CSS and JavaScript creating this effect.

fist we make a html document and then we make CSS file and also create a JavaScript file. and we make sure our CSS and JavaScript file are linking in our html document.

Here is HTML Code

<!DOCTYPE html>
<html>
<head>
	<title>Scroll Revel Effect</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<section class="section">
	<div class="image-box" data-reveal="left">
		<img src="image/1.jpg" class="img">
	</div>

	<div class="content-box">
		<h2 class="title" data-reveal="left">
			Heading One
		</h2>
		<p class="text" data-reveal="left">
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising
		</p>
	</div>

	<div class="content-box">
		<h2 class="title" data-reveal="left">
			Heading Two
		</h2>
		<p class="text" data-reveal="left">
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising
		</p>
	</div>

	<div class="image-box" data-reveal="left">
		<img src="image/2.jpg" class="img">
	</div>

	<div class="image-box" data-reveal="left">
		<img src="image/3.jpg" class="img">
	</div>

	<div class="content-box">
		<h2 class="title" data-reveal="left">
			Heading Three
		</h2>
		<p class="text" data-reveal="left">
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising
		</p>
	</div>

	<div class="content-box">
		<h2 class="title" data-reveal="left">
			Heading Four
		</h2>
		<p class="text" data-reveal="left">
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising elt
			lorme ispum dolor sit amet consectiure adipising
		</p>
	</div>

	<div class="image-box" data-reveal="left">
		<img src="image/4.jpg" class="img">
	</div>
	
</section>



<script type="text/javascript" src="js/custom.js"></script>

</body>
</html>

Here is CSS Code

*{padding: 0; margin: 0; box-sizing: border-box;}
body{
  background: linear-gradient(178deg, #67453e, #080a07);
  color: hsl(0, 0%, 100%);
  font-family: sans-serif;
  overflow-x: hidden;
}

.section{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.image-box{height: 800px; overflow: hidden;}
.img{width: 100%; height: 100%; object-fit: cover;}
.content-box{padding-inline:5em;}
.title{font-size: 4em; max-width: max-content; margin-block-end:0.25em;}
.text{opacity: 0.7; line-height: 2.25;}
[data-reveal="left"]{clip-path: inset(0 100% 0 0);}
[data-reveal="left"].revealed{
  animation: reveal-left 1.2s cubic-bezier(0.17, 0.97, 0.38, 1) forwards 300ms;
}
@keyframes reveal-left{
  0%{clip-path: inset(0 100% 0 0);}
  100%{clip-path: inset(0 0 0 0);}
}

[data-reveal="right"]{clip-path: inset(0 0 0 100%);}
[data-reveal="right"].revealed{
  animation: reveal-right 1.2s cubic-bezier(0.17, 0.97, 0.38, 1) forwards 300ms;
}
@keyframes reveal-right{
  0%{clip-path: inset(0 0 0 100%);}
  100%{clip-path: inset(0 0 0 0);}
}
.image-box .img{
  transform: scale(1.5);
  transition: 1.2s cubic-bezier(0.17, 0.97, 0.38, 1);
}
.image-box.revealed .img{transform: scale(1.5);}

Here is JavaScript Code

const revealElements = document.querySelectorAll("[data-reveal]");

const scrollReveal = function(){
	for(let i = 0; i < revealElements.length; i++){
		const isElementsOnScreen = revealElements[i].getBoundingClientRect().top < window.innerHeight;

		if(isElementsOnScreen){
			revealElements[i].classList.add("revealed");
		}else{
			revealElements[i].classList.remove("revealed");
		}
	}
}

window.addEventListener("scroll", scrollReveal);
window.addEventListener("load", scrollReveal);

If you enjoyed reading this post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts.

if you have any confusion Comment below or you can contact us by filling out our contact us.

YOU MIGHT ALSO LIKE

How To Make a Responsive Flexbox Website Layout

How to Create Responsive Resume Website using HTML and CSS | Resume CV design in HTML CSS

If you have any problem to understand this code you can watch also video tutorial