Cara membuat animasi pada tatal dalam JavaScript dan CSS

Pernahkah anda melihat pada asasnya setiap tapak web korporat yang hebat, dan perasan bahawa teks meluncur ke atas apabila anda menatal ke sana? (lihat laman web Apple) Kerana ia adalah perkara biasa, anda akan berfikir bahawa terdapat banyak jawapan untuk soalan ini, bukan? Tetapi, selepas menatal melalui banyak tutorial dalam talian, saya tidak menemui animasi muncul atas tatal, jadi saya buat sendiri.

HTML (Dun dun dun!!!)

HTML adalah agak mudah. Hanya buat elemen

Sesetengah teks

dan lampirkan kelas>

HTML penuh (perhatikan bahawa anda boleh menukar elemen. Saya menggunakan

atas sebab kesederhanaan.):

<p>



<h2>
  
  
  The CSS
</h2>

<p>Now for the CSS. This part is easy. Copy the following code:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

Apa yang berlaku di sini? Kelas .animate-scroll mengisytiharkan animasi. Ini adalah kod yang sebenarnya membuat animasi. Anda boleh membuat satu lagi, tetapi saya membuat animasi fade-in slaid-up kerana ia adalah yang paling biasa saya lihat. Walau bagaimanapun, .animate-scroll.visible menunjukkan keadaan elemen apabila animasi tamat. Jika anda menukar .animate-scroll, anda juga harus menukar ini. Sebagai contoh, jika anda menukar saiz, anda harus meletakkan saiz:100%; atau sesuatu. Walau bagaimanapun, jika anda hanya mahukan tutorial ringkas tentang cara melakukan ini, maka jangan ubah apa-apa.

JavaScript

Salin JavaScript mudah ini:

document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll('.animate-scroll');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, {
        threshold: 0.9
    });

    elements.forEach(element => {
        observer.observe(element);
    });
});

Wah! Itu banyak kod! Apa yang berlaku! Mari kita pecahkan langkah demi langkah.
Pertama, document.addEventListener('DOMContentLoaded', () => sedang mengesan jika kandungan dimuatkan. Ini hanya menjalankan "fungsi".
elemen const = document.querySelectorAll('.animate-scroll'); Ini mencari kelas. Tukar ini juga jika anda menukar kelas HTML dan CSS.
const observer = new IntersectionObserver((entry) => { entries.forEach(entry => Ini mengesan jika elemen berada dalam viewport. Jika tidak, ia tidak akan menghidupkannya.
if (entry.isIntersecting) { entry.target.classList.add('visible');} Ini mengesan jika animasi sudah tamat. Jika ya, maka ia menambah .visible pada CSS. itulah sebabnya ia ada!
ambang: 0.9 Ini mengira jumlahnya pada halaman sebelum menghidupkannya. 0 adalah sebaik sahaja piksel mencapai halaman. 1 ialah apabila ia adalah kira-kira 25% daripada jalan ke atas halaman. 2 ialah kira-kira 50%... Saya suka mengekalkannya pada kira-kira 0.9 untuk peluang pengguna melihat animasi tanpa menyembunyikan teks terlalu lama.
elements.forEach(element => { observer.observe(element); Ini hanya memerhati elemen. Agak sia-sia untuk dijelaskan. Adakah ia pada halaman??? Ini mengendalikannya.

Kod terakhir...

Adakah anda terlalu malas untuk membaca penjelasan saya yang menakjubkan? Berikut ialah semua kod.

HTML:

<p>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

JavaScript:

<p>



<h2>
  
  
  The CSS
</h2>

<p>Now for the CSS. This part is easy. Copy the following code:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

Itu sahaja! Saya harap anda suka menyelami mendalam ini. Jika anda mempunyai sebarang soalan, komen atau hanya ingin bercakap dengan lelaki terkenal yang menulis ini, tinggalkan komen. Saya ingin melihat cadangan anda!

Terima kasih kerana membaca, CodeMonster

Atas ialah kandungan terperinci Cara membuat animasi pada tatal dalam JavaScript dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!