Kesan Wix Parallax

• April 23, 2024

Satu animasi bagus yang terdapat di laman web Wix adalah kesan menatal paralaks. Ia bukan animasi sejati tetapi ia menambah ilusi pergerakan, kedalaman dan dimensi ke laman web anda.

Kesan ini telah menjadi popular selama beberapa tahun dan merupakan cara yang baik untuk menambah sedikit minat kepada laman web tanpa menambahkan animasi yang terlalu kuat. Menatal Parallax dicipta apabila anda memberitahu pelayar untuk menatal imej latar belakang pada kadar yang lebih perlahan daripada elemen lain pada halaman. Seperti yang anda jangkakan, kesan bergulir sangat bagus untuk laman web satu halaman yang panjang.

Teknik ini dibuat dengan JavaScript, CSS dan elemen div. Hanya nota yang perlu diingat ialah kebanyakan peranti mudah alih mempunyai masalah dengan CSS latar belakang tetap. Jadi, Wix mematikan kesan untuk peranti mudah alih.

Tetapi apabila membuat laman web Wix anda, tiada pengekodan yang terlibat. Ia semudah memilih pilihan Parallax untuk imej latar belakang atau gambar jalur. Ia juga boleh ditambah kepada video jalur.

Tanpa tatal paralaks yang digunakan, imej latar belakang untuk halaman web akan bergerak serentak dengan unsur-unsur lain pada halaman sebagai skrol penonton di atas halaman.

Walau bagaimanapun, apabila kita menggunakan kesan skrol Parallax ke imej latar belakang, skrol gambar latar belakang perlahan-lahan sebagai skrol penonton di atas halaman. Dimensi berlaku apabila elemen lain pada halaman tatal lebih cepat daripada imej latar belakang.

Opsi ketiga, pilihan Freeze, untuk pilihan latar belakang Skrol Kesan Skrin adalah untuk mengunci imej latar belakang di tempat sebagai unsur-unsur halaman yang lain tatal ke atas atau ke bawah.

Tambah Parallax ke Imej Latar Belakang

1. Klik ikon Latar Belakang di menu sebelah kiri.
   
   
2. Tambahkan imej latar belakang anda seperti biasa.
   
   
3. Klik butang Tetapan untuk membuka Tetapan Imej.
   
   
4. Pilih salah satu daripada tiga pilihan untuk Kesan Skrol.
   
   
   • Tidak ada - latar belakang akan bergerak pada tingkat yang sama dengan unsur-unsur lain pada halaman.
     
     
   • Parallax - latar belakang akan bergerak lebih perlahan daripada elemen lain pada halaman.
     
     
   • Membekukan - latar belakang akan tetap di tempat tetapi unsur-unsur lain akan tatal.
     
     

Tambah Parallax ke Strip Image atau Video

1. Pilih jalur dan pilih Latar Belakang Strip Perubahan dari menu pop up.
   
   
2. Tambahkan imej latar belakang atau video seperti biasa.
   
   
3. Klik butang Tetapan untuk membuka Tetapan Imej.
   
   
4. Seterusnya, pilih Parallax dari Kesan Skrol.
   
   

Arahan Video: Website UI Design Tutorial | Learn UI UX Designing In Adobe Photoshop (April 2024).