Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Parallax Effect Lord Shiva Special</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="multiple-parallax">
<div class="layer layer-1" data-depth="0.25" data-type="parallax"></div>
<div class="layer layer-2" data-depth="0.50" data-type="parallax"></div>
<div class="layer layer-3" data-depth="0.75" data-type="parallax"></div>
</div>
<div class="multiple-parallax-bg"></div>
<div class="content">
<h1>Transcendent Majesty: The Enigmatic World of Lord Shiva</h1>
<p>Shiva, also known as Mahadeva, is one of the principal deities of Hinduism. He is the Supreme Being in
Shaivism, one of the major traditions within Hinduism.</p>
<p>Shiva is known as The Destroyer within the Trimurti, the Hindu trinity which also includes Brahma and Vishnu.
In the Shaivite tradition, Shiva is the Supreme Lord who creates, protects and transforms the universe. In
the goddess-oriented Shakta tradition, the Supreme Goddess (Devi) is regarded as the energy and creative
power (Shakti) and the equal complementary partner of Shiva. Shiva is one of the five equivalent deities in
Panchayatana puja of the Smarta tradition of Hinduism.</p>
<p>Shiva has many aspects, benevolent as well as fearsome. In benevolent aspects, he is depicted as an
omniscient Yogi who lives an ascetic life on Mount Kailash as well as a householder with his wife Parvati
and his two children, Ganesha and Kartikeya. In his fierce aspects, he is often depicted slaying demons.
Shiva is also known as Adiyogi, regarded as the patron god of yoga, meditation and the arts.</p>
<p>The iconographical attributes of Shiva are the serpent king Vasuki around his neck, the adorning crescent
moon, the holy river Ganga flowing from his matted hair, the third eye on his forehead (The eye that turns
everything in front of it into ashes when opened), the Trishula or the trident as his weapon, and the
damaru. He is usually worshiped in the aniconic form of lingam.</p>
<p>Shiva has pre-vedic roots, and the figure of Shiva evolved as an amalgamation of various older non-vedic and
vedic deities, including the Rigvedic storm god Rudra who may also have non-vedic origins, into a single
major deity. Shiva is a pan-hindu deity, revered widely by hindus in India, Nepal, Bangladesh, Sri Lanka and
Indonesia.</p>
</div>
<button id="btn-to-top" onclick="backToTop()"><img src="./trishul.png" alt="Trishul"></button>
<script src="index.js"></script>
</body>
</html>Below is the css code for this video.
style.css
* {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
height: 100vh;
width: 100%;
background-color: #19171c;
color: #ffffff;
font-family: serif;
}
.multiple-parallax {
position: relative;
height: 800px;
overflow: hidden;
}
.content {
background: #19171c;
text-align: center;
padding: 5% 10%;
}
.content p {
text-align: justify;
line-height: 2;
margin: 2.5% 0;
}
.content p:last-child {
margin-bottom: 0;
}
.layer {
position: fixed;
height: 800px;
width: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-size: auto;
z-index: -1;
}
.multiple-parallax-bg {
display: none;
height: 480px;
background: url('./full-img.png') no-repeat center bottom/cover;
}
.multiple-parallax, .layer {
min-height: 800px;
max-width: 1900px;
margin: 0 auto;
overflow: hidden;
}
.layer-1 {
background-image: url('./mountain.png');
background-size: cover;
background-position: left bottom;
}
.layer-2 {
background-image: url('./sky.png');
background-size: cover;
background-position: center;
}
.layer-3 {
background-image: url('./lord-shiv.png');
background-size: contain;
background-position: right bottom;
}
#btn-to-top {
position: fixed;
bottom: 4%;
right: 2.5%;
display: flex;
height: 10vh;
width: 10vh;
border-radius: 50%;
border: 3px solid #5dade1;
justify-content: center;
align-items: flex-end;
outline: none;
cursor: pointer;
visibility: hidden;
opacity: 0;
transition: visibility 1s linear, opacity 1s ease, transform 1s ease-in-out;
}
#btn-to-top img {
height: 90%;
width: 90%;
}
#btn-to-top:hover {
transform: scale(1.15);
border: 2px solid #5dade1;
filter: invert();
}
@media only screen and (max-width: 768px) {
.multiple-parallax {
display: none;
}
.multiple-parallax-bg {
display: block;
}
#btn-to-top {
transform: scale(0.75);
}
#btn-to-top:hover {
transform: scale(0.9);
}
}Below is the javascript code for this video.
index.js
window.addEventListener('scroll', function () {
var depth, i, layer, layers, len, movement, topDistance, translate3d;
topDistance = this.pageYOffset;
layers = document.querySelectorAll("[data-type='parallax']");
for (i = 0, len = layers.length; i < len; i++) {
layer = layers[i];
depth = layer.getAttribute('data-depth');
movement = -(topDistance * depth);
translate3d = 'translate3d(0, ' + movement + 'px, 0)';
layer.style.transform = translate3d;
}
document.getElementById('btn-to-top').style.opacity = this.pageYOffset >= 333 ? 1 : 0;
document.getElementById('btn-to-top').style.visibility = this.pageYOffset >= 333 ? 'visible' : 'hidden';
});
const backToTop = () => window.scroll(0, 0);Thanks for visiting