1614783120
Reveal Website Elements On Scroll | On Page Scroll Down Using HTML, CSS & Javascript
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.
Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA
Source code
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>
<script type="text/javascript">
window.addEventListener('scroll', reveal);
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;
}
#htm #css #javascript
What is GEEK
Buddha Community
1618667097
Responsive Personal Portfolio Website Using HTML CSS and JavaScript
Tutorial: https://youtu.be/9DDiorNZiyw
#create a portfolio website with html css javascript #personal portfolio complete website using only html css javascript #responsive portfolio website html css javascript #responsive personal portfolio website #portfolio website #responsive website
1608043308
Responsive Personal Portfolio Website using HTML CSS & JavaScript
#responsive website using html5 and css3 #responsive website html css #portfolio website #portfolio website design in html css #complete responsive website in html css javascript #one page personal website
1608041337
RESPONSIVE Personal PORTFOLIO Website HTML CSS And JAVASCRIPT
#responsive website using html5 and css3 #portfolio website #one page personal website html css #portfolio website design in html css #css responsive website design #responsive website html css
1619013192
Create a Personal Portfolio Website Using HTML CSS and JavaScript
Demo Click Here: https://cutt.ly/2vFKuxe
#portfolio website html css #personal website html css #personal portfolio website #how to create a complete peronal portfolio website #responsive portfolio website html css #responsive personal portfolio website html css
1618639156
Responsive Personal Portfolio Website HTML CSS and JavaScript
Demo: https://cutt.ly/TvxhH2T
#portfolio website html css #personal portfolio website tutorial #portfolio website #responsive personal portfolio website #portfolio website html css javascript #responsive portfolio website html css javascript