Youtube video link - click here
Source code :
<!DOCTYPE html>
<html>
<head>
<title>Fade</title>
<style>
.container {
width: 700px;
display: flex;
flex-wrap: wrap;
margin: 0px auto;
}
.items {
width: 200px;
background-color: blanchedalmond;
margin: 10px;
padding: 20px;
opacity: 0;
transition: 1s;
}
</style>
</head>
<body>
<div class="container0">
<div class="items">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, provident laudantium ab quod deleniti quaerat quisquam? Itaque suscipit aspernatur aliquid ratione, eos amet possimus doloribus velit quaerat voluptate ipsum voluptas?
</div>
<div class="items">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, provident laudantium ab quod deleniti quaerat quisquam? Itaque suscipit aspernatur aliquid ratione, eos amet possimus doloribus velit quaerat voluptate ipsum voluptas?
</div>
<div class="items">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, provident laudantium ab quod deleniti quaerat quisquam? Itaque suscipit aspernatur aliquid ratione, eos amet possimus doloribus velit quaerat voluptate ipsum voluptas?
</div>
<div class="items">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, provident laudantium ab quod deleniti quaerat quisquam? Itaque suscipit aspernatur aliquid ratione, eos amet possimus doloribus velit quaerat voluptate ipsum voluptas?
</div>
<div class="items">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, provident laudantium ab quod deleniti quaerat quisquam? Itaque suscipit aspernatur aliquid ratione, eos amet possimus doloribus velit quaerat voluptate ipsum voluptas?
</div>
<div class="items">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, provident laudantium ab quod deleniti quaerat quisquam? Itaque suscipit aspernatur aliquid ratione, eos amet possimus doloribus velit quaerat voluptate ipsum voluptas?
</div>
</div>
<div class="container">
<div class="items">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, provident laudantium ab quod deleniti quaerat quisquam? Itaque suscipit aspernatur aliquid ratione, eos amet possimus doloribus velit quaerat voluptate ipsum voluptas?
</div>
<div class="items">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, provident laudantium ab quod deleniti quaerat quisquam? Itaque suscipit aspernatur aliquid ratione, eos amet possimus doloribus velit quaerat voluptate ipsum voluptas?
</div>
<div class="items">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, provident laudantium ab quod deleniti quaerat quisquam? Itaque suscipit aspernatur aliquid ratione, eos amet possimus doloribus velit quaerat voluptate ipsum voluptas?
</div>
<div class="items">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, provident laudantium ab quod deleniti quaerat quisquam? Itaque suscipit aspernatur aliquid ratione, eos amet possimus doloribus velit quaerat voluptate ipsum voluptas?
</div>
<div class="items">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, provident laudantium ab quod deleniti quaerat quisquam? Itaque suscipit aspernatur aliquid ratione, eos amet possimus doloribus velit quaerat voluptate ipsum voluptas?
</div>
<div class="items">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, provident laudantium ab quod deleniti quaerat quisquam? Itaque suscipit aspernatur aliquid ratione, eos amet possimus doloribus velit quaerat voluptate ipsum voluptas?
</div>
</div>
<script>
// var top =
// var top = document.getElementsByClassName('items')[i].getBoundingClientRect().y;
window.onscroll = function() {
for (let i = 0; i < document.getElementsByClassName('items').length; i++) {
if (document.getElementsByClassName('items')[i].getBoundingClientRect().y <= 300) {
document.getElementsByClassName('items')[i].style.opacity = 1;
} else {
document.getElementsByClassName('items')[i].style.opacity = 0;
}
}
}
</script>
</body>
</html>
Post a Comment