So, I have a e-commerce website in which at the start I have Implemented parallax effect by following a tutorial {Link: https://www.youtube.com/watch?v=hJTNCR75vc0}, but I only need the main head to move by the parallax, instead of the whole webpage. So, that I can write content under the title. Rest is self explained by the code.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
min-height: 20vh;
width: 100%;
background-position: center;
background-size: cover;
position: relative;
}
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 200px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: #fff;
text-decoration: none;
font-size: 20px;
font-family: 'Poppins', sans-serif;
/* -webkit-text-stroke-width: 0.8px;
-webkit-text-stroke-color: #000; */
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 2px;
background: #d44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after {
width: 100%;
}
#welcome {
color: #000;
}
#logo-img {
height: auto;
width: 150px;
outline: lightblue solid 5px;
}
.welcome {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.headline {
font-size: 10vh;
font-family: fantasy, cursive;
color: lightcoral;
font-weight: 100;
line-height: 0.4;
-webkit-text-stroke-color: royalblue;
-webkit-text-stroke-width: 3px;
}
.headline::first-letter {
font-size: 20vh;
}
.headline-wrap {
text-align: center;
}
.sub-headline {
font-size: 5vh;
font-family: sans-serif;
color: black;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
}
.img-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.intro {
position: relative;
top: 650px;
text-align: center;
font-size: 50px;
height: 2000vh;
}<section class="header">
<nav>
<a href="sample.html"><img src="Images/trassical.jpg" alt="" id="logo-img">
<div class="nav-links">
<ul>
<li><a href="sample.html">Home</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="subscriptions.html">Subscriptions</a></li>
<li><a href="featured.html">Featured</a></li>
<li><a href="account.html">Account</a></li>
<li><a href="login.html">Login/Signup</a></li>
</ul>
</div>
</a>
</nav>
</section>
<section id="welcome">
<video src="Images/synthwave.mp4" muted loop autoplay class="img-background"></video>
<div class="headline-wrap">
<h1 class="headline">Trassical's E - Shop</h1><br>
<h2 class="sub-headline">Gaming accessories, merch and more!</h2>
</div>
</section>
<script>
window.addEventListener('scroll', function() {
const parallax = document.querySelector('.img-background')
let scrollPosition = window.pageYOffset;
parallax.style.transform = 'translateY(' + scrollPosition * 0.5 + 'px)';
});
</script>
<section class="intro">
<div class="game-codes">
Discounted games
</div>
</section>