CSS3Tingkat: Lanjutan6 min
Animasi Berbasis Scroll (Scroll-Driven Animations)
Ciptakan efek progress bar membaca dan parallax murni dengan CSS tanpa memerlukan library JavaScript menggunakan animation-timeline: scroll().
Standar Native Scroll Animations
Pratinjau TerbukaSpesifikasi CSS modern memungkinkan pengaitan durasi animasi langsung dengan pergeseran scrollbar halaman menggunakan fungsi scroll() atau view().
Contoh Kode Sintaks
/* Progress Bar Membaca Artikel Murni CSS */
@keyframes membacaProgress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.progress-bar-atas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #d97757;
transform-origin: left;
animation: membacaProgress auto linear;
animation-timeline: scroll();
}Live Compiler Runner
Akses Kursus Wajib Login
Buka Akses Penuh Silabus & Praktikum
Masuk dengan akun GitHub, Google, atau Akses Cepat Developer untuk membuka seluruh materi mendalam, menjalankan compiler interaktif, mengerjakan kuis, dan menyimpan progres belajar Anda.
145+ Modul Lengkap•Tersimpan Otomatis•Sertifikat Kelulusan Resmi