javascript - Tanya tentang pelaksanaan kesan paralaks halaman

Question

Kesan halaman:

Jingzhe

Mengenai tiruan kesan ini:

Saya mula-mula mengetahui tentang pustaka bernama skrolr.js di Zhihu, dan mempelajari serta menerapkannya pada halaman saya sendiri Memandangkan halaman saya bukan nod statik seperti di atas, artikel dan gambar diminta dan langkah demi langkah request bergantung pada acara onload img untuk memaparkan set templat (artikel + imej latar belakang) dan menambahkannya pada halaman. Pelaksanaan awal adalah untuk menyusun semua imej latar belakang pada skrin menggunakan kedudukan tetap, dan menggunakan skrollr untuk membuat perubahan status atribut css berdasarkan objek rujukan untuk mencapai kesan. Tetapi sebenarnya, walaupun tiada kesan ditulis, selagi terdapat fungsi permulaan skrollr.js, ia tidak akan berfungsi pada mesin Android. Pengarang skrolr.js juga menunjukkan, seperti yang ditunjukkan di bawah:

Kemudian, saya memerhatikan dengan teliti kesan halaman Jingzhe di tingkat atas dan mendapati:

1. Setiap blok induk dalam bekas berada pada kedudukan mutlak dan kiri: 0 atas: 0 kanan: 0 bawah: 0

2. Bekas menggunakan perpustakaan kinetik yang serupa untuk menggunakan peristiwa sentuhan dan menterjemah untuk mensimulasikan penatalan. . . Demo kesan: demo

Soalan:

1. Bagaimana dia mencapai kesan paralaks, walaupun kita melihat atribut indeks-z

2. Terjemahannya pada dasarnya menghilangkan ketinggian satu skrin, dan kemudian halaman berikut muncul. . . Bagaimana untuk melakukan ini, sila jelaskan secara terperinci

Answer 1

Semua diposisikan secara mutlak, bar skrol di sebelah kanan disimulasikan. Pada ketinggian indeks-z yang sama, elemen berikutnya akan secara automatik meliputi elemen sebelumnya.

Jadi cuma tukar terjemahan seterusnya mengikut keadaan skrol Anda boleh memahaminya sebagai satu kad yang meliputi kad lain.

Secara ringkasnya, apabila anda mula-mula menatal, gerakkan elemen pada skrin kedua ke atas Apabila ia mencapai lebih daripada satu skrin, mulakan skrin kedua dan seterusnya.

Berikut adalah beberapa kesan seperti mengezum masuk dan keluar daripada imej latar belakang.