Cara membuat animasi yang dicetuskan tatal dengan JavaScript Asas

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.

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 ()
  }
})

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');

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');

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'
});

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);
  }
});

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);
  }
});

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!