Cara membuat teks mendedahkan kesan tatal dengan CSS

Walaupun CSS tulen tidak dapat secara langsung mencapai kesan paparan teks yang dicetuskan tatal, ia dapat dilaksanakan dengan cekap dengan menggabungkan sedikit animasi peralihan JavaScript dan CSS; Kaedah khusus adalah menggunakan JavaScript untuk mengesan sama ada elemen memasuki viewport dan menambah kelas "diturunkan". CSS bertanggungjawab untuk menentukan kesan peralihan ketelusan dan anjakan. Adalah disyorkan untuk menggunakan API Observer Persimpangan untuk meningkatkan prestasi dan akhirnya mencapai kesan paparan teks yang licin dan elegan.

Mewujudkan teks mendedahkan kesan tatal dengan CSS adalah cara yang bersih dan pelaku untuk menambah interaksi halus ke laman web anda. Walaupun CSS tulen mempunyai batasan apabila ia datang kepada animasi berasaskan tatal (kerana CSS sahaja tidak dapat secara langsung mengesan kedudukan tatal), anda boleh mencapai teks yang meyakinkan mendedahkan kesan menggunakan CSS yang digabungkan dengan JavaScript yang minimum untuk pengesanan tatal. Inilah caranya dengan berkesan.

1. Gunakan CSS dengan JavaScript untuk pengesanan tatal

Kesan yang benar "pada tatal" memerlukan JavaScript untuk memantau kedudukan tatal pengguna dan mencetuskan perubahan kelas apabila elemen itu dilihat. Walau bagaimanapun, animasi dan gaya sebenar dikendalikan oleh CSS.

Struktur HTML Asas

 <div class = "reveal-container">
  <p class = "text-to-reveal"> Teks ini akan diturunkan semasa anda menatal. </P>
</div>

CSS: Tentukan animasi mendedahkan

 .text-to-reveal {
  Kelegapan: 0;
  Transform: Translate (20px);
  Peralihan: Opacity 0.8s mudah keluar, mengubah 0.8s mudah keluar;
}

.text-to-reveal.Revealed {
  Kelegapan: 1;
  Transform: Translate (0);
}

Ini menetapkan teks untuk tidak kelihatan dan sedikit beralih ke bawah. Apabila kelas revealed ditambah, ia memudar dan bergerak lancar.

JavaScript: Tambahkan kelas pada tatal

 const textelements = document.QuerySelectorAll ('. text-to-reveal');

const revealonscroll = () => {
  textelements.foreach (el => {
    const elementTop = el.getBoundingClientRect (). atas;
    const windowHeight = window.InnerHeight;

    // jika elemen berada di paparan
    jika (elementTop <windowheight * 0.8) {
      el.classlist.add (&#39;mendedahkan&#39;);
    }
  });
};

// Jalankan beban dan tatal
window.addeventListener (&#39;LOAD&#39;, REPLEYONSCROLL);
window.addeventListener (&#39;scroll&#39;, revealonscroll);

Skrip ini memeriksa jika setiap elemen .text-to-reveal berada dalam 80% daripada ketinggian viewport. Anda boleh menyesuaikan 0.8 untuk mengawal apabila mendedahkan berlaku (contohnya, 0.7 untuk lebih awal, 1 untuk apabila kelihatan sepenuhnya).

2. Pilihan: Gunakan sifat tersuai CSS untuk kebolehgunaan semula

Anda boleh membuat kesan lebih fleksibel dengan menggunakan pembolehubah CSS:

 .Reveal-Container {
  -Reveal-Delay: 0.2S;
}

.text-to-reveal {
  Kelegapan: 0;
  Transform: Translate (20px);
  Peralihan: Opacity 0.8s mudah keluar, mengubah 0.8s mudah keluar;
  Peralihan-kelewatan: var (-mendedahkan-delay, 0s);
}

.text-to-reveal.Revealed {
  Kelegapan: 1;
  Transform: Translate (0);
  Peralihan-kelewatan: var (-mendedahkan-delay, 0s);
}

Sekarang anda boleh mengawal masa setiap elemen:

 <div class = "reveal-container" style = "-reveal-delay: 0.3s;">
  <p class = "text-to-reveal"> mendedahkan sedikit kemudian </p>
</div>

3. Petua Prestasi

• Throttle acara tatal untuk mengelakkan masalah prestasi:

   biarkan isscrolling = false;
  window.addeventListener ('tatal', () => {
    jika (! isscrolling) {
      window.requestanimationFrame (() => {
        revealonscroll ();
        isscrolling = false;
      });
      isscrolling = true;
    }
  });

• Gunakan transform dan opacity untuk animasi-mereka adalah GPU yang dipercepatkan dan melakukan lebih baik daripada margin animasi atau top .

• Elakkan melampirkan pendengar kepada terlalu banyak elemen; Pertimbangkan menggunakan corak pemerhati tunggal untuk pelbagai elemen mendedahkan.

4. Alternatif: Gunakan pemerhati persimpangan (disyorkan)

Untuk prestasi yang lebih baik dan kod bersih, gunakan API IntersectionObserver :

 const Observer = New IntersectionObserver ((entri) => {
  entri.Foreach (entry => {
    jika (entry.isintersecting) {
      entry.target.classlist.add ('diturunkan');
      // Pilihan: Berhenti memerhati setelah mendedahkan
      Observer.unobserve (entry.target);
    }
  });
}, {ambang: 0.1}); // mencetuskan apabila 10% elemen dapat dilihat

document.QuerySelectorAll ('. Text-to-reveal'). Foreach (el => {
  Observer.observe (EL);
});

Ini lebih cekap daripada mendengar setiap acara tatal dan merupakan standard moden untuk mendedahkan berasaskan skrol.

Pada asasnya, semasa anda tidak dapat melakukan tatal yang benar-benar dicetuskan dengan hanya CSS, menggabungkan JavaScript yang minimum dengan peralihan CSS yang lancar memberi anda kesan teks yang kuat dan pelaku. Gunakan IntersectionObserver untuk hasil terbaik dan simpan animasi halus untuk melihat profesional.

Atas ialah kandungan terperinci Cara membuat teks mendedahkan kesan tatal dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!