Parallax Dikuasakan oleh CSS Custom Properties

Artikel ini memperincikan bagaimana untuk membuat kesan paralaks yang menawan menggunakan sifat tersuai CSS, mengubah imej statik ke dalam adegan yang dinamik dan interaktif. Laman web baru Kent C. Dodds memberikan inspirasi, yang menampilkan imej utama yang menuntut pergerakan. Penyelesaian ini memanfaatkan hanya dua sifat adat CSS, --ratio-x dan --ratio-y , untuk mengawal kesan paralaks.

Kod JavaScript teras menangkap kedudukan kursor dan memetakannya ke julat yang boleh digunakan. Fungsi mapRange() dan clamp() GSAP memudahkan proses ini, memastikan nilai kekal dalam -1 dan 1. Fungsi generateHandler mewujudkan pendengar peristiwa yang boleh diguna semula, pemetaan kedudukan kursor relatif terhadap unsur -unsur tertentu. Nilai -nilai yang dipetakan ini kemudian ditetapkan sebagai sifat tersuai CSS.

Keajaiban terletak pada CSS. calc() menggabungkan sifat tersuai dengan nilai lain untuk mengawal pelbagai aspek, seperti skala dan warna. Contohnya menunjukkan perubahan skala berdasarkan --ratio-y dan Hue berdasarkan --ratio-x . Fleksibiliti membolehkan kawalan kreatif tanpa mengubah JavaScript teras.

Mewujudkan adegan melibatkan memecah imej ke dalam unsur -unsur individu, teknik yang serupa dengan pengesanan seni CSS. Unsur -unsur ini, yang diwakili sebagai kanak -kanak dalam bekas, digayakan menggunakan sifat tersuai scoped. Setiap elemen mentakrifkan parameter pergerakan dan putarannya sendiri, berinteraksi dengan nilai global --ratio-x dan --ratio-y . Sprite imej mengoptimumkan prestasi dengan mengelakkan pelbagai permintaan imej.

Artikel ini berlangsung melalui beberapa demo, menggambarkan proses langkah demi langkah. Ia menyoroti penggunaan objek konfigurasi untuk menentukan kedudukan unsur, saiz, dan transformasi. Reka bentuk responsif dicapai dengan menggunakan nilai peratusan untuk kedudukan dan saiz. Penambahan --allow-motion memenuhi keperluan pengguna lebih suka gerakan yang dikurangkan, menawarkan pengalaman yang lebih lancar untuk semua.

Akhirnya, artikel menunjukkan bagaimana teknik ini dilaksanakan dalam struktur komponen React, menggunakan cangkuk tersuai ( useParallax ) untuk penggunaan semula kod dan pemeliharaan yang cekap. Pelaksanaan React merangkumi logik paralaks, menjadikannya mudah diintegrasikan ke dalam projek yang lebih besar. Hasilnya adalah kesan paralaks yang digilap, yang didorong sepenuhnya oleh CSS dan sedikit JavaScript. Artikel ini menyimpulkan dengan menekankan fleksibiliti sprite imej dan kuasa sifat adat CSS dalam mewujudkan pengalaman web yang menarik.

Atas ialah kandungan terperinci Parallax Dikuasakan oleh CSS Custom Properties. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!