Now we'll see what is this project. This project is a CSS Effect where if the user scrolls down the page, the text stays on the center of the page but the background changes to give a cool and nice CSS Effect.
Now let's see the source codes of this project.
Paste these codes in a HTML File:
<!--Created by CodingPorium,2021. Visit codingporium.blogspot.com or search for CodingPorium on YouTube with no spaces. -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Change background on scroll with JavaScript |CodingPorium</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
body,html {
height: 100%;
margin: 0;
font-family: poppins;
}
* {
box-sizing: border-box;
}
.main-bg {
/* Full height */
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Images used */
/*Image Credits: The images usedin this project do not belong to me and is owned by unsplash.com and has given rights to use these images for personal or profesional uses only*/
.img1 { background-image: url("https://images.unsplash.com/photo-1631644214525-67ecdec1de47?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"); }
.img2 { background-image: url("https://images.unsplash.com/photo-1631641906574-24adb8594649?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"); }
.img3 { background-image: url("https://images.unsplash.com/photo-1631637407252-0938849c20d5?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"); }
.img4 { background-image: url("https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8c2NlbmVyeXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"); }
.img5 { background-image: url("https://images.unsplash.com/photo-1454372182658-c712e4c5a1db?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c2NlbmVyeXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"); }
.img6 { background-image: url("https://images.unsplash.com/photo-1541890289-b86df5bafd81?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8c2NlbmVyeXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"); }
/* Position text in the middle of the page/image */
.main-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-family:poppins;
font-weight: bold;
font-size: 50px;
border-radius:10px;
border: 10px solid #f1f1f1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 300px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="main-bg img1"></div>
<div class="main-bg img2"></div>
<div class="main-bg img3"></div>
<div class="main-bg img4"></div>
<div class="main-bg img5"></div>
<div class="main-bg img6"></div>
<div class="main-text">Try scrolling down for the effect</div>
</body>
</html>
Post a Comment