Pembuat Animasi CSS Berdasarkan Scroll
Buat animasi CSS berdasarkan scroll asli — blok @keyframes yang terhubung ke animation-timeline: view() atau scroll() alih-alih durasi tetap — dari preset siap pakai (fade in, slide in, scale up, rotate in, reveal clip-path) dengan jangkauan animasi yang dapat dikonfigurasi.
Input
view() menganimasikan saat elemen memasuki viewport; scroll() mengikatnya ke kemajuan scroll halaman.
Named ranges (entry/cover) berpasangan dengan view(); timeline scroll() hanya memahami persentase biasa.
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-scroll-driven-animation-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"animationType": "fadeIn",
"timelineType": "view",
"animationRange": "entry 0% cover 100%"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-scroll-driven-animation-generator` tool (CSS Scroll-Driven Animation Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-scroll-driven-animation-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Animasi CSS Berdasarkan Scroll — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Animasi berdasarkan scroll mengikat kemajuan animasi elemen ke posisi scroll alih-alih waktu jam dinding, menggunakan properti CSS asli animation-timeline. Atur ke view() dan elemen fade, slide, scale, rotate, atau reveal saat memasuki viewport; atur ke scroll() dan animasi melacak kemajuan scroll halaman (atau scroll container) secara langsung — progress bar terikat scroll, layer parallax, atau efek reveal tanpa JavaScript, didorong sepenuhnya oleh compositor.
Generator ini membangun kedua bagiannya untuk Anda: blok @keyframes dengan langkah from/to yang tepat untuk preset yang dipilih, dan rule pendamping yang menghubungkannya dengan animation-timeline dan animation-range alih-alih animation-duration tetap. Salin keduanya ke stylesheet Anda dan ganti .scroll-animate dengan selector Anda sendiri.
Dukungan browser
Animasi berdasarkan scroll adalah fitur CSS yang relatif baru. Pada saat penulisan ini, Chrome dan Edge (115+) mendukung animation-timeline: scroll() dan view() secara asli. Firefox dan Safari belum mengirimkan dukungan di balik pengaturan default, jadi perlakukan ini sebagai progressive enhancement: pasangkan dengan blok @supports not (animation-timeline: view()) yang menetapkan status akhir (to) elemen secara langsung, sehingga browser yang tidak didukung masih menampilkan hasil yang masuk akal dan statis alih-alih elemen yang terjebak tidak terlihat atau di luar layar. Selalu periksa caniuse.com/css-scroll-timeline untuk status saat ini sebelum mengandalkan ini dalam produksi.
Cara menggunakannya
- Pilih preset — Fade In, Slide In (dari kiri/kanan/bawah), Scale Up, Rotate In, atau Reveal Clip Path. Masing-masing adalah pasangan
from/tosiap pakai dari langkahopacity/transform/clip-path. - Pilih timeline —
view()menganimasikan elemen saat scroll masuk dan melalui viewport (terbaik untuk efek "reveal on scroll");scroll()mengikat animasi ke kemajuan scroll keseluruhan dari scroll container terdekat (terbaik untuk progress bar dan efek gaya parallax). - Pilih jangkauan animasi — mengontrol bagian mana dari timeline animasi dimainkan. Named ranges seperti
entrydancovermendeskripsikan fase elemen melintasi viewport dan dimaksudkan untukview(); persentase biasa seperti0% 100%bekerja dengan tipe timeline apa pun. - Salin CSS yang dihasilkan dan tempel ke stylesheet Anda, atau unduh sebagai file
.css.
FAQ
Mengapa selectornya .scroll-animate?
Ini adalah placeholder sehingga CSS siap ditempel — ganti namanya agar sesuai dengan elemen yang ingin Anda animasikan.
Apa yang sebenarnya dikontrol animation-range?
Ini memetakan bagian dari timeline scroll ke kemajuan animasi 0%–100%. entry 0% cover 100%, misalnya, memulai animasi saat elemen mulai memasuki viewport dan selesai setelah sepenuhnya menutupi (scrolled past) fase entry itu.
Mengapa tidak ada animation-duration?
Animasi berdasarkan scroll tidak berjalan pada jam — "durasi" mereka adalah berapa banyak dari jangkauan scroll yang Anda tetapkan via animation-range. Menetapkan durasi eksplisit tidak diperlukan (dan diabaikan oleh mekanisme timeline).
Apa yang terjadi di browser yang belum mendukung ini?
Tanpa dukungan, animation-timeline cukup diabaikan, jadi elemen tetap dalam status default (from) — biasanya tidak terlihat atau offset. Tambahkan blok @supports not (animation-timeline: view()) dengan gaya akhir elemen sebagai fallback statis.
Bisakah saya menganimasikan lebih dari opacity dan transform?
Ya — properti CSS apa pun yang dapat dianimasikan bekerja di dalam @keyframes, termasuk clip-path seperti yang digunakan oleh preset Reveal di sini. Transform dan opacity lebih disukai karena bersahabat compositor dan tetap smooth saat scroll.
Privasi
Semuanya berjalan secara lokal di browser Anda — pengaturan Anda tidak pernah meninggalkan perangkat Anda, dan tidak ada CSS yang dikirim ke server untuk dibuat.