Rumah > hujung hadapan web > tutorial css > Cara membuat animasi yang dicetuskan tatal dengan JavaScript Asas

Cara membuat animasi yang dicetuskan tatal dengan JavaScript Asas

William Shakespeare
Lepaskan: 2025-03-15 11:04:10
asal
516 orang telah melayarinya

Penggunaan animasi web yang bijak dapat meningkatkan pengalaman pengguna dan meningkatkan rayuan laman web. Tetapi jika elemen animasi terletak di bawah halaman, pengguna mungkin terlepasnya. Artikel ini akan memperkenalkan cara menggunakan JavaScript asli untuk melaksanakan animasi yang dicetuskan skrol, supaya animasi hanya akan mula bermain apabila pengguna menatal ke elemen tertentu, mengelakkan pembaziran sumber dan meningkatkan pengalaman pengguna.

Cara membuat animasi yang dicetuskan tatal dengan JavaScript Asas

Kami tidak perlu bergantung kepada perpustakaan pihak ketiga, kami boleh mencapainya dengan hanya sedikit kod JavaScript asli. Inti terletak pada menggunakan API Observer Persimpangan , yang dapat mengesan sama ada elemen sasaran memasuki tetingkap.

Melaksanakan acara pencetus tatal

Pendekatan kami merangkumi:

  1. Buat fungsi scrollTrigger untuk mengendalikan peristiwa pencetus tatal untuk elemen tertentu.
  2. Apabila elemen memasuki tetingkap, tambahkan kelas .active .
  3. Gunakan CSS .active Class.

Di samping itu, kita perlu menyokong fungsi panggilan balik tersuai untuk melakukan tindakan tertentu apabila elemen dapat dilihat, sebagai contoh:

 scrolltrigger ('loader', {
  CB: Fungsi (EL) {
    el.innertext = 'Memuatkan ...'
    LoadContent ()
  }
})
Salin selepas log masuk

Akhirnya, kami juga akan berurusan dengan tidak menyokong API Observer Persimpangan oleh pelayar yang lebih tua.

API Observer Persimpangan

API Observer Persimpangan membolehkan kita secara tidak sengaja memerhatikan keadaan persimpangan elemen sasaran dan tingkap, yang lebih cekap daripada mendengar peristiwa menatal.

Bina fungsi pencetus tatal

Pertama, buat fungsi scrollTrigger , yang menerima pemilih sebagai parameter:

 fungsi scrolltrigger (pemilih) {
  biarkan els = document.QuerySelectorAll (pemilih);
  els = array.from (els);
  els.foreach (el => {
    AddObserver (EL);
  });
}
// Gunakan contoh scrolltrigger ('. Scroll-reveal');
Salin selepas log masuk

Seterusnya, buat fungsi addObserver dan gunakan pemerhati persimpangan untuk mendengar unsur -unsur:

 fungsi scrolltrigger (pemilih) {
  biarkan els = document.QuerySelectorAll (pemilih);
  els = array.from (els);
  els.foreach (el => {
    AddObserver (EL);
  });
}
fungsi addObserver (el) {
    Biarkan Observer = New IntersectionObserver ((Entri, Observer) => {
      entri.Foreach (entry => {
        jika (entry.isintersecting) {
          entry.target.classlist.add ('aktif');
          Observer.unobserve (entry.target);
        }
      });
    });
  Observer.observe (EL);
}
// Gunakan contoh scrolltrigger ('. Scroll-reveal');
Salin selepas log masuk

Kod di atas akan menambah .active Kelas aktif apabila bahagian elemen dapat dilihat. Untuk lebih banyak kawalan yang baik, kita boleh menggunakan parameter options pemerhati persimpangan:

 fungsi scrolltrigger (pemilih, options = {}) {
  biarkan els = document.QuerySelectorAll (pemilih);
  els = array.from (els);
  els.foreach (el => {
    AddObserver (EL, Pilihan);
  });
}
fungsi addObserver (el, options) {
  Biarkan Observer = New IntersectionObserver ((Entri, Observer) => {
    entri.Foreach (entry => {
      jika (entry.isintersecting) {
        entry.target.classlist.add ('aktif');
        Observer.unobserve (entry.target);
      }
    });
  }, pilihan);
  Observer.observe (EL);
}
// Gunakan contoh scrolltrigger ('. Scroll-reveal', {
  rootmargin: '-200px'
});
Salin selepas log masuk

Sekarang, kami telah mencapai dua gol pertama. Seterusnya, tambahkan sokongan fungsi panggil balik:

 fungsi scrolltrigger (pemilih, options = {}) {
  biarkan els = document.QuerySelectorAll (pemilih);
  els = array.from (els);
  els.foreach (el => {
    AddObserver (EL, Pilihan);
  });
}
fungsi addObserver (el, options) {
  Biarkan Observer = New IntersectionObserver ((Entri, Observer) => {
    entri.Foreach (entry => {
      jika (entry.isintersecting) {
        jika (options.cb) {
          options.cb (EL);
        } else {
          entry.target.classlist.add ('aktif');
        }
        Observer.unobserve (entry.target);
      }
    });
  }, pilihan);
  Observer.observe (EL);
}
// Gunakan contoh scrolltrigger ('loader', {
  rootmargin: '-200px',
  CB: Fungsi (EL) {
    el.innertext = 'memuatkan ...';
    setTimeout (() => {
      el.innertext = 'Tugas selesai! ';
    }, 1000);
  }
});
Salin selepas log masuk

Akhirnya, berurusan dengan keserasian penyemak imbas warisan:

 fungsi scrolltrigger (pemilih, options = {}) {
  biarkan els = document.QuerySelectorAll (pemilih);
  els = array.from (els);
  els.foreach (el => {
    AddObserver (EL, Pilihan);
  });
}
fungsi addObserver (el, options) {
  jika (! ('intersectionobserver' dalam tetingkap)) {
    jika (options.cb) {
      options.cb (EL);
    } else {
      el.classlist.add ('aktif');
    }
    kembali;
  }
  Biarkan Observer = New IntersectionObserver ((Entri, Observer) => {
    entri.Foreach (entry => {
      jika (entry.isintersecting) {
        jika (options.cb) {
          options.cb (EL);
        } else {
          entry.target.classlist.add ('aktif');
        }
        Observer.unobserve (entry.target);
      }
    });
  }, pilihan);
  Observer.observe (EL);
}
// Gunakan contoh scrolltrigger ('. Intro-teks');
Scrolltrigger ('. Scroll-Reveal', {
  rootmargin: '-200px',
});
scrolltrigger ('loader', {
  rootmargin: '-200px',
  CB: Fungsi (EL) {
    el.innertext = 'memuatkan ...';
    setTimeout (() => {
      el.innertext = 'Tugas selesai! ';
    }, 1000);
  }
});
Salin selepas log masuk

Melalui langkah-langkah di atas, kami berjaya mencapai kesan animasi yang dicetuskan tatal dan mengambil kira keserasian penyemak imbas. Saya harap artikel ini dapat membantu anda meningkatkan pengalaman pengguna laman web anda.

Atas ialah kandungan terperinci Cara membuat animasi yang dicetuskan tatal dengan JavaScript Asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan