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

Content ya kawaida hapa...

CSS
.parallax {
height: 100vh;
background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e');
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

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