Parallax Effect using HTML & CSS
Parallax Effect using HTML & CSS :-
HTML & CSS Code
<!DOCTYPE html>
<html>
<head>
<title>Parallax Effect</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
height: 6000px;
}
.parallax {
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.parallax-content {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: rgb(255, 251, 0);
font-size: 70px;
font-weight: bold;
text-shadow: 5px 1px rgb(255, 0, 0);
}
.parallax-content1 {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: rgb(255, 251, 0);
font-size: 70px;
font-weight: bold;
text-shadow: 0.2px 0.2px rgb(0, 0, 0);
}
.parallax-1 {
background-image: url("img/gate.JPG");
height: 800px;
}
.parallax-2 {
background-image: url("img/robot.jpg");
height: 1200px;
}
.parallax-3 {
background-image: url("img/beach.jpg");
height: 800px;
}
.parallax-4 {
background-image: url("img/car.jpg");
height: 1200px
}
.parallax-5 {
background-image: url("img/tree.jpg");
height: 800px
}
.parallax-6 {
background-image: url("img/sence.jpg");
height: 1200px
}
.parallax-7 {
background-image: url("img/road.jpg");
height: 800px;
}
.parallax-8 {
background-image: url("img/forest.jpg");
height: 1200px;
}
.parallax-9 {
background-image: url("img/sunset2.jpg");
height: 800px;
}
</style>
</head>
<body>
<div class="parallax parallax-1">
<div class="parallax-content">
<p>πΎπππππ π―πππ ππ πππ πππ π»πππππππ π°πππππ</p>
</div>
</div>
<div class="parallax parallax-2"></div>
<div class="parallax parallax-3"></div>
<div class="parallax parallax-4"></div>
<div class="parallax parallax-5"></div>
<div class="parallax parallax-6"></div>
<div class="parallax parallax-7"></div>
<div class="parallax parallax-8"></div>
<div class="parallax parallax-9"></div>
<div class="parallax parallax-10">
<div class="parallax-content1">
<font color="Black" size="55">πLikeπ<br><br>ππ
·π
°ππ
΄<br><br>πSubscribeπ</font>
</div>
</div>
</body>
</html>
Comments