Jinsi ya Kutengeneza Reveal-on-Scroll Effects
Jifunze jinsi ya kuunda reveal-on-scroll effects ambazo zinafanya elements kwenye website yako kuonekana kwa smooth animation wakati mtumiaji anapopiga scroll. Hii inafanya website yako kuwa interactive na kuvutia zaidi.
Mfano wa Code (Using Intersection Observer API):
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reveal on Scroll</title>
<style>
.section {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease-out;
margin: 100px 0;
padding: 50px;
background-color: #3498db;
color: white;
text-align: center;
font-size: 1.5rem;
border-radius: 10px;
}
.section.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="section">Sehemu 1</div>
<div class="section">Sehemu 2</div>
<div class="section">Sehemu 3</div>
<div class="section">Sehemu 4</div>
<script>
const sections = document.querySelectorAll('.section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting){
entry.target.classList.add('visible');
} else {
entry.target.classList.remove('visible');
}
});
}, {
threshold: 0.2
});
sections.forEach(section => observer.observe(section));
</script>
</body>
</html>
Maelezo ya Code:
.section ina opacity 0 na translateY 50px mwanzoni, hivyo haionekani mara moja.
IntersectionObserver inachunguza wakati section inapoingia kwenye viewport (threshold: 0.2).
visible class inatoa animation ya fade-in na slide-up.
Unaweza kurekebisha speed (transition), distance ya translate (translateY) na styling ya section.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509
Mfano wa Code (Using Intersection Observer API):
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reveal on Scroll</title>
<style>
.section {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease-out;
margin: 100px 0;
padding: 50px;
background-color: #3498db;
color: white;
text-align: center;
font-size: 1.5rem;
border-radius: 10px;
}
.section.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="section">Sehemu 1</div>
<div class="section">Sehemu 2</div>
<div class="section">Sehemu 3</div>
<div class="section">Sehemu 4</div>
<script>
const sections = document.querySelectorAll('.section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting){
entry.target.classList.add('visible');
} else {
entry.target.classList.remove('visible');
}
});
}, {
threshold: 0.2
});
sections.forEach(section => observer.observe(section));
</script>
</body>
</html>
Maelezo ya Code:
.section ina opacity 0 na translateY 50px mwanzoni, hivyo haionekani mara moja.
IntersectionObserver inachunguza wakati section inapoingia kwenye viewport (threshold: 0.2).
visible class inatoa animation ya fade-in na slide-up.
Unaweza kurekebisha speed (transition), distance ya translate (translateY) na styling ya section.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509