Youtube link - Click here
Source code :
<!DOCTYPE html>
<html>
<head>
<title>
Scrolling Effects
</title>
<style>
.bg-img {
background-image: url("C:\\Users\\sugan\\web\\images\\cars_2.0.0.jpg");
width: 100%;
height: 130vh;
background-repeat: no-repeat;
background-size: cover;
}
.cars>img {
width: 50%;
height: 50%;
position: sticky;
top: 100px;
}
.cars {
display: flex;
margin: 10px;
text-align: justify;
opacity: 0;
width: 0;
transition: 2s;
}
.first-section {
flex-direction: row-reverse;
}
.third-section {
flex-direction: row-reverse;
}
.first-section>.content,
.second-section>.content,
.third-section>.content {
margin: 10px;
}
</style>
</head>
<body>
<div class="bg-img">
</div>
<div class="first-section cars">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/carbon-fiber-shelby-mustang-1600685276.jpg?crop=0.9988636363636364xw:1xh;center,top&resize=480:*">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt necessitatibus nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Nesciunt necessitatibus nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! Lorem ipsum dolor sit amet consectetur adipisicing
elit. Nesciunt necessitatibus nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
necessitatibus nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt necessitatibus
nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores
totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia
doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint
dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero
magnam tempora deleniti! dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore,
asperiores totam non libero magnam tempora deleniti! dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! dolorem, eius distinctio, dolores harum mollitia doloribus
ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! dolorem, eius distinctio, dolores
harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! dolorem,
eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam
tempora deleniti!
</div>
</div>
<div class="second-section cars">
<img src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8Y2Fyc3xlbnwwfHwwfHw%3D&w=1000&q=80">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt necessitatibus nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Nesciunt necessitatibus nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! Lorem ipsum dolor sit amet consectetur adipisicing
elit. Nesciunt necessitatibus nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
necessitatibus nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt necessitatibus
nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores
totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia
doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint
dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam
non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia
doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint
dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam
non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia
doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint
dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam
non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia
doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti!
</div>
</div>
<div class="third-section cars">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQFpb8qFJaOWS1K4nWJsBIk1hg80GdoxyiXgl-gGll6cHdtmU9ceCH6whFbB3-urUj540&usqp=CAU">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt necessitatibus nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Nesciunt necessitatibus nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! Lorem ipsum dolor sit amet consectetur adipisicing
elit. Nesciunt necessitatibus nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
necessitatibus nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt necessitatibus
nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores
totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia
doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint
dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam
non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia
doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint
dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam
non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia
doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti! nihil sint dolorem, eius distinctio, dolores harum mollitia doloribus ea aut porro tempore, asperiores totam non libero magnam tempora deleniti!
</div>
</div>
<script>
window.onscroll = function() {
for (let i = 0; i < document.getElementsByClassName("cars").length; i++) {
if (document.getElementsByClassName("cars")[i].getBoundingClientRect().y < 200) {
document.getElementsByClassName("cars")[i].style.opacity = 1;
document.getElementsByClassName("cars")[i].style.width = "100" + "%";
} else {
document.getElementsByClassName("cars")[i].style.opacity = 0;
document.getElementsByClassName("cars")[i].style.width = 0;
}
}
}
</script>
</body>
</html>
Post a Comment