How To Create Firewall Parallax Effect
1. Create A Html File
2. Type Code That Gives You Below
3. After Copy You Have To Download All Images Related To This
4. Save As FileName.html
5. Run In Any Browser
Code Of Firewall Parallax Effect
HTML CODE
BODY CODE
<body translate="no">
<div class="parallax">
<div class="parallax__layer parallax__layer__0">
<img src="img1.png" />
</div>
<div class="parallax__layer parallax__layer__1">
<img src="img2.png" />
</div>
<div class="parallax__layer parallax__layer__2">
<img src="img3.png" />
</div>
<div class="parallax__layer parallax__layer__3">
<img src="img4.png" />
</div>
<div class="parallax__layer parallax__layer__4">
<img src="img5.png" />
</div>
<div class="parallax__layer parallax__layer__5">
<img src="img6.png" />
</div>
<div class="parallax__layer parallax__layer__6">
<img src="img7.png" />
</div>
<div class="parallax__cover">
</div>
</body>
CSS CODE
* {
box-sizing: border-box;
}
html,
body {
background-color: #FEDCC8;
}
.parallax {
-webkit-perspective: 100px;
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -1500px;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer img {
display: block;
position: absolute;
bottom: 0;
}
.parallax__cover {
background: #2D112B;
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 2000px;
z-index: 2;
}
.parallax__layer__0 {
-webkit-transform: translateZ(-300px) scale(4);
transform: translateZ(-300px) scale(4);
}
.parallax__layer__1 {
-webkit-transform: translateZ(-250px) scale(3.5);
transform: translateZ(-250px) scale(3.5);
}
.parallax__layer__2 {
-webkit-transform: translateZ(-200px) scale(3);
transform: translateZ(-200px) scale(3);
}
.parallax__layer__3 {
-webkit-transform: translateZ(-150px) scale(2.5);
transform: translateZ(-150px) scale(2.5);
}
.parallax__layer__4 {
-webkit-transform: translateZ(-100px) scale(2);
transform: translateZ(-100px) scale(2);
}
.parallax__layer__5 {
-webkit-transform: translateZ(-50px) scale(1.5);
transform: translateZ(-50px) scale(1.5);
}
.parallax__layer__6 {
-webkit-transform: translateZ(0px) scale(1);
transform: translateZ(0px) scale(1);
}
SCRIPT JAVA SCRIPT CODE
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
THANK YOU....
SUBSCRIBE MY YOU TUBE CHANNEL AND DOWNLOAD THE FULL CODE
Link After Subscribe:
Click On The Button And Subscribe My Youtube Channel To Open Link Then Get Back To The Page...