Lompat ke konten
Aback Tools Logo

Pratinjau Animasi Scroll

Pratinjau perilaku animasi CSS yang dipicu scroll secara online dan gratis dengan alat pratinjau animasi scroll kami. Pilih dari 12 preset termasuk fade-in, slide-up, scale, flip, rotate, blur, dan bounce. Sesuaikan timing, easing, stagger, dan ambang batas dengan pratinjau langsung, lalu salin kode CSS dan JavaScript yang siap pakai. Tanpa pendaftaran.

Scroll Animation Preview

Preview CSS scroll-triggered animation behaviors with adjustable settings. Choose a preset, tune timing and easing, then scroll the preview panel to see the animation in action. Copy the ready-to-use CSS and JavaScript snippet.

600ms

0ms

15% of element visible

100ms between each

Live Preview

Scroll inside the box to trigger

↓ Scroll down to see animations

🚀

Fast Performance

Optimised for speed and efficiency

🔒

Secure by Default

Privacy-first, no data leaves your device

🎨

Beautiful Design

Clean, modern UI that users love

📱

Fully Responsive

Works perfectly on any screen size

⚡

Zero Config

Works out of the box, no setup needed

🌍

Global CDN

Lightning-fast delivery worldwide

Generated CSS + JavaScript

@keyframes scroll-anim {
  from { opacity: 0; }
  to { opacity: 1; }
}

.scroll-reveal {
  opacity: 0;
  animation: scroll-anim 600ms ease-out 0ms both;
  animation-play-state: paused;
}

.scroll-reveal.is-visible {
  animation-play-state: running;
}

/* Stagger children */
.scroll-reveal:nth-child(1) { animation-delay: 0ms; }
.scroll-reveal:nth-child(2) { animation-delay: 100ms; }
.scroll-reveal:nth-child(3) { animation-delay: 200ms; }
.scroll-reveal:nth-child(4) { animation-delay: 300ms; }

/* JavaScript (Intersection Observer) */
/*
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.15 }
);
document.querySelectorAll('.scroll-reveal').forEach((el) => observer.observe(el));
*/

Mengapa Menggunakan Pratinjau Animasi Scroll Kami?

  • Pratinjau Animasi Scroll Instan: pratinjau 12 preset animasi scroll CSS secara real-time dengan alat kami. Sesuaikan durasi, jeda, easing, jarak, dan ambang batas menggunakan slider dan lihat animasi diperbarui seketika di panel pratinjau langsung.
  • Pratinjau Animasi Scroll Online yang Aman: alat pratinjau animasi scroll berjalan sepenuhnya di browser Anda. Tidak ada konfigurasi animasi, kode CSS, atau data penggunaan yang pernah dikirim ke server mana pun. Pekerjaan desain Anda tetap sepenuhnya privat di perangkat Anda.
  • Pratinjau Animasi Scroll - Tanpa Instalasi: gunakan alat pratinjau animasi scroll langsung di browser modern mana pun tanpa unduhan, plugin, atau alat build. Pratinjau animasi scroll dari perangkat apa pun dan salin cuplikan CSS dan JavaScript yang siap produksi.
  • 100% Gratis dengan 12 Preset Animasi: alat pratinjau animasi scroll sepenuhnya gratis tanpa pendaftaran, tanpa batas penggunaan, dan tanpa iklan. Pilih dari 12 preset termasuk fade, slide, scale, flip, rotate, blur, bounce, dan zoom - masing-masing dengan kontrol timing dan stagger lengkap.

Kasus Penggunaan Umum Pratinjau Animasi Scroll

  • Animasi Masuk Landing Page: gunakan alat pratinjau untuk membuat prototipe animasi fade-in dan slide-up untuk bagian landing page. Sesuaikan ambang batas dan jeda stagger untuk menciptakan urutan kemunculan yang rapi saat pengguna menggulir halaman.
  • Animasi Kartu & Grid Fitur: pratinjau animasi scale-in atau slide-up bertingkat untuk grid kartu fitur. Kontrol stagger alat ini memungkinkan Anda menetapkan jeda tepat antar kartu untuk menciptakan efek kemunculan berjenjang.
  • Bagian Posting Blog & Artikel: halaman dengan konten padat mendapat manfaat dari animasi fade-in halus yang menarik perhatian ke setiap bagian saat masuk ke viewport. Gunakan alat ini untuk menemukan durasi dan ambang batas yang tepat untuk konten yang mudah dibaca.
  • Halaman Portofolio & Showcase: situs portofolio menggunakan animasi scroll dramatis seperti flip-in, rotate-in, dan zoom-fade untuk menciptakan kesan pertama yang berkesan. Pratinjau efek ini di alat kami sebelum menentukan arah desain.
  • Daftar Produk E-commerce: grid produk menggunakan animasi scale-in bertingkat agar penjelajahan terasa dinamis dan menarik. Alat ini memungkinkan Anda menyetel jeda stagger dan easing agar sesuai dengan karakter merek Anda.
  • Dashboard & Visualisasi Data: grafik dan kartu data mendapat manfaat dari animasi blur-in atau fade-in halus yang menandakan selesainya pemuatan. Gunakan alat ini untuk menemukan animasi yang terasa informatif, bukan mengganggu.

Apa Itu Animasi Scroll?

Animasi scroll adalah animasi CSS yang dipicu ketika sebuah elemen masuk ke viewport browser saat pengguna menggulir. Berbeda dari animasi hover, animasi scroll memerlukan JavaScript untuk mendeteksi kapan elemen menjadi terlihat. Pendekatan standar menggunakan API Intersection Observer - API native browser yang memantau elemen secara efisien dan memanggil callback saat elemen melewati ambang batas visibilitas. Alat pratinjau kami menggabungkan animasi CSS @keyframes dengan Intersection Observer untuk menyimulasikan secara tepat bagaimana animasi scroll Anda akan berperilaku di produksi. Kode yang dihasilkan menggunakan animation-play-state: paused secara default dan beralih ke running saat elemen menjadi terlihat - pola yang berfungsi andal di semua browser modern.

Cara Kerja Pratinjau Animasi Scroll Kami

  1. Pilih Preset dan Sesuaikan Pengaturan: pilih salah satu dari 12 preset animasi (fade, slide, scale, flip, rotate, blur, bounce, zoom) dari dropdown. Gunakan slider untuk menyesuaikan durasi (100-2000 ms), jeda, fungsi easing, jarak translasi, dan ambang batas Intersection Observer (berapa banyak elemen yang harus terlihat sebelum dipicu).
  2. Gulir Panel Pratinjau: panel pratinjau langsung berisi 6 kartu demo. Gulir ke bawah di dalam panel untuk memicu animasi. Alat pratinjau menggunakan Intersection Observer sungguhan pada kontainer pratinjau, sehingga perilakunya persis sama dengan produksi. Klik Ulangi Animasi untuk mengatur ulang dan memutar ulang dari atas.
  3. Salin Kode yang Dihasilkan: panel output menampilkan aturan @keyframes lengkap, definisi kelas CSS, dan cuplikan JavaScript Intersection Observer. Salin semuanya dengan satu klik dan tempel langsung ke proyek Anda.

Apa yang Dihasilkan Pratinjau Animasi Scroll

  • Aturan @keyframes: animasi keyframe lengkap untuk preset yang dipilih, menggunakan properti opacity, transform, dan filter yang dikomposit GPU untuk performa yang mulus.
  • Kelas CSS: kelas dasar .scroll-reveal (tersembunyi, animasi dijeda) dan kelas pengubah .is-visible (animasi berjalan). Terapkan .scroll-reveal ke elemen apa pun yang ingin dianimasikan saat scroll.
  • Jeda Stagger: saat stagger diaktifkan, output mencakup selektor nth-child dengan nilai animation-delay bertingkat untuk 4 elemen anak pertama - siap digunakan di grid kartu dan daftar fitur.
  • Cuplikan JavaScript: implementasi Intersection Observer lengkap yang menambahkan .is-visible saat elemen masuk ke viewport, dengan ambang batas yang dikonfigurasi dan perilaku unobserve setelah pemicuan yang opsional.

Praktik Terbaik Performa untuk Animasi Scroll

Untuk performa animasi scroll terbaik, animasikan hanya properti opacity dan transform - keduanya ditangani oleh kompositor GPU dan tidak memicu perhitungan ulang layout atau paint. Hindari menganimasikan width, height, top, left, atau margin karena menyebabkan reflow layout yang mahal. Preset blur-in menggunakan filter: blur(), yang juga dikomposit GPU di browser modern tetapi bisa mahal di ponsel - uji pada perangkat kelas bawah sebelum merilis. Selalu hormati media query prefers-reduced-motion pengguna dengan membungkus CSS animasi scroll Anda dalam @media (prefers-reduced-motion: no-preference) untuk menonaktifkan animasi bagi mereka yang meminta gerakan berkurang di pengaturan sistem.

Pertanyaan yang Sering Diajukan

Alat pratinjau animasi scroll memungkinkan Anda membuat prototipe animasi CSS yang dipicu scroll secara real-time sebelum menambahkannya ke proyek Anda. Pratinjau kami mencakup 12 preset dengan kontrol durasi, jeda, easing, jarak, ambang batas, dan stagger yang dapat disesuaikan - semuanya berjalan lokal di browser Anda tanpa pendaftaran.

Animasi scroll menggunakan API Intersection Observer untuk mendeteksi kapan elemen masuk ke viewport. Ketika sebuah elemen melewati ambang batas yang dikonfigurasi, JavaScript menambahkan kelas yang memicu animasi CSS @keyframes. Animasi dimulai dalam keadaan jeda dan beralih ke berjalan saat kelas ditambahkan.

Ya - alat pratinjau animasi scroll 100% gratis tanpa pendaftaran, tanpa akun, dan tanpa batas penggunaan. Pratinjau dan salin konfigurasi animasi scroll sebanyak yang Anda butuhkan, sepenuhnya gratis selamanya.

Ambang batas mengendalikan berapa banyak bagian elemen yang harus terlihat sebelum animasi dipicu. Ambang batas 0 memicu begitu ada bagian yang masuk viewport. Ambang batas 0,5 memicu saat 50% terlihat. Gunakan 0,1-0,2 untuk sebagian besar animasi scroll.

Saat diaktifkan, Intersection Observer memanggil unobserve() setelah animasi dipicu - elemen tidak akan pernah dianimasikan lagi meskipun pengguna menggulir kembali ke atas. Saat dinonaktifkan, animasi dipicu ulang setiap kali elemen masuk ke viewport.

Stagger menambahkan animation-delay bertingkat ke setiap elemen anak sehingga mereka dianimasikan satu demi satu. Alat pratinjau menghasilkan selektor CSS nth-child dengan jeda yang meningkat berdasarkan jeda stagger yang dikonfigurasi.

Untuk performa terbaik, animasikan hanya opacity dan transform. Keduanya dikomposit oleh GPU dan tidak memicu perhitungan ulang layout atau paint. Preset alat ini hanya menggunakan properti tersebut (ditambah filter: blur untuk preset blur-in).

Bungkus CSS animasi scroll Anda dalam @media (prefers-reduced-motion: no-preference) { ... } untuk menonaktifkan animasi bagi pengguna yang meminta gerakan berkurang di pengaturan aksesibilitas sistem operasi mereka. Ini adalah persyaratan aksesibilitas yang penting.