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 halamanJingzhedi 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