Jinsi ya Kutengeneza Parallax Scrolling Effects

Parallax scrolling inafanya website ionekane interactive kwa kufanya background image iendeshe kwa speed tofauti na content unaposcroll. Inatumika sana kwenye hero sections, landing pages na storytelling websites.

✅ A. Simple CSS Parallax (Background Image)
HTML
<section class="parallax">
<div class="content">
<h1>Faulink Parallax Demo</h1>
<p>Scroll down kuona effect ya background inavyosogea polepole</p>
</div>
</section>

<section class="normal">
<p>Content ya kawaida hapa...</p>
</section>

CSS
.parallax {
height: 100vh;
background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e&apos;);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
}

.normal {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
}

✅ B. Parallax Multiple Layers (JS-based, Smooth)
HTML
<div class="parallax-container">
<div class="layer" data-speed="2" style="background-image: url('layer1.png');"></div>
<div class="layer" data-speed="5" style="background-image: url('layer2.png');"></div>
<div class="content">
<h1>Interactive Parallax Layers</h1>
</div>
</div>

CSS
.parallax-container {
position: relative;
height: 100vh;
overflow: hidden;
}

.layer {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
pointer-events: none;
}

.content {
position: relative;
z-index: 10;
color: #fff;
text-align: center;
margin-top: 40vh;
}

JavaScript
window.addEventListener('scroll', () => {
const layers = document.querySelectorAll('.layer');
const scrollTop = window.pageYOffset;

layers.forEach(layer => {
const speed = layer.dataset.speed;
layer.style.transform = `translateY(${scrollTop / speed}px)`;
});
});

✅ Tips Za Kufanya Parallax Zibofe

Tumia images za HD, size optimized

Hakikisha text inasomeka kwa overlay au gradient

Punguza layers nyingi ili performance isiwe slow

Combine na lazy loading kwa heavy images

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 WhatsApp Msaada:
https://wa.me/255693118509