Kesan paralaks tatal automatik tanpa pertukaran JavaScript_Experience

Kesan ini telah dimodelkan selepas tutorial paralaks Chris Coyier, dan latar belakang langit berbintang telah digunakan dengan kebenaran Chris.

Kesan berjalan:
Tonton di sini: http://www.fofronline.com/experiments/parallax/#experiment
Ini kesan boleh dipratonton secara normal dalam Safari 4 Beta dan Google Chrome, dan tiada JavaScript diperlukan untuk mencapai kesan ini.
(Tetapi ia tidak boleh dilihat dalam IE7 dan ke bawah)

Kaedah pelaksanaan:
Kod HTML halaman ini sangat mudah Satu div digunakan untuk menentukan latar belakang dan div lain digunakan untuk mentakrifkan kandungan. CSS3 digunakan di sini Teknologi berbilang latar belakang dalam , jadi teg tambahan diperlukan untuk mewakili imej latar belakang yang lain.

Tetapkan bekas latar belakang CSS pada kedudukan tetap dan biarkan ia menduduki bahagian bawah halaman melalui atribut atas, kiri, bawah dan kanan. Imej latar belakang ditentukan melalui atribut latar belakang, dan latar belakang peringkat atas ditentukan dahulu. Setiap imej diletakkan mengikut peratusan, dan kedudukannya berbeza, supaya apabila saiz bekas berubah, setiap imej akan bergerak, menghasilkan kesan paralaks

Mengikut pemikiran biasa, kesan animasi hanya boleh dihasilkan apabila halaman dizum atau dikawal menggunakan JavaScript. Kaedah lain digunakan di sini. Dengan menggerakkan tepi kiri bekas imej latar belakang (cth dari 0px ke 100px). Ini mengubah lebar keseluruhan bekas, menyebabkan imej latar belakang bergerak secara berbeza bergantung pada peratusannya. Dengan menetapkan tempoh dan kedudukan kiri yang cukup besar, kesan pergerakan paralaks berterusan akan dihasilkan.

Anda boleh meningkatkan kelajuan pergerakan untuk mendapatkan kesan yang lebih menarik, dan anda juga boleh menambah beberapa tindakan tetikus Kod CSS terakhir adalah seperti berikut:

Maklumat kecil: Kesan paralaks pada asalnya ialah istilah astronomi Apabila kita memerhatikan langit berbintang, bintang yang jauh dari kita bergerak lebih perlahan, manakala bintang yang lebih dekat dengan kita bergerak lebih pantas. Apabila kita duduk dalam kereta dan melihat ke luar tingkap, kita juga mempunyai perasaan ini Gunung di kejauhan kelihatan tidak bergerak, tetapi sawah yang berdekatan dengan cepat berlalu. Kesan paralaks digunakan dalam banyak permainan untuk menambah rasa tiga dimensi pada pemandangan. (Terjemahan/Cao Sijia)