Paralaks adalah Efek paralaks: contoh

Daftar Isi:

Paralaks adalah Efek paralaks: contoh
Paralaks adalah Efek paralaks: contoh
Anonim

Dalam gerak, paralaks berarti perubahan lokasi suatu objek terhadap beberapa latar belakang relatif terhadap pengamat yang berada di tempat. Istilah ini telah mendapatkan popularitas di Internet. Secara khusus, situs tersebut terlihat menarik, dalam desainnya terdapat elemen dinamis. Parallax adalah teknik desain halaman web yang digunakan oleh webmaster untuk menarik banyak pengunjung.

Seperti apa paralaks

Pengguliran paralaks dapat digunakan secara vertikal maupun dalam garis lurus. Nintendo adalah contoh terbaik. Banyak dari kita yang ingat dengan game komputer nostalgia, yang diwakili oleh pergerakan karakter utama dari sisi kiri layar ke kanan. Dimungkinkan juga untuk bergerak ke bawah, dilakukan di sepanjang garis lurus yang terletak secara vertikal. Efek paralaks di web sering digunakan. Anda dapat menggunakan JavaScript atau CSS untuk membuat penggeser vertikal 3.

Efek spasial tiga dimensi yang dijelaskan hanyalah karakteristik dari mereka. Pembuat game menggunakan beberapa lapisan latar belakang. Mereka berbeda dalam tekstur, sedangkan gerakan dilakukan dengan cara yang berbedakecepatan.

Jangan berpikir bahwa paralaks hanyalah efek 3D. Pada halaman tersebut, Anda dapat memindahkan ikon-ikon yang ada. Apalagi tampilannya cukup menarik. Pilihan yang sangat baik adalah menggunakan lintasan individu untuk masing-masingnya. Dalam hal ini, ikon yang berbeda digunakan, bergerak di sepanjang lintasan yang berbeda. Desain ini menarik perhatian.

paralaks adalah
paralaks adalah

Gambar menjadi hidup

Sulit untuk menemukan situs tanpa gambar. Gambar berkualitas tinggi dan demonstratif menarik pengunjung. Tetapi perhatian paling besar tertuju pada berbagai jenis gambar dinamis. Memang jika ada pergerakan saat mengunjungi suatu situs, maka hal ini menarik perhatian. Secara signifikan meningkatkan kemungkinan pengunjung kembali ke sumber daya ke gambar dinamis. Apakah itu tampak bergerak atau tidak? Oleh karena itu, untuk menarik pengunjung ke situs, ada baiknya mempelajari yang namanya efek paralaks.

Contoh Situs Gambar Bergerak:

  • hvorostovsky.com;
  • www.kagisointeractive.com.

Seperti yang ditunjukkan pada contoh, pengalaman ditingkatkan dengan menu drop-down menjadi sub-item. Elemen seperti itu menghemat waktu bagi pengunjung, oleh karena itu menarik bagi mereka.

jQuery library

Istilah jQueryParallax mendefinisikan perpustakaan dengan nama yang sama. Berkat itu, mudah untuk mencapai efek gerakan dalam format 3D. Di perpustakaan jQuery, persepsi 3D dibuat dalam berbagai cara. Salah satunya terdiri dari gerakan simultan horizontal objek latar belakang dengankecepatan yang berbeda. Perpustakaan ini dicirikan oleh kehadiran sejumlah besar properti yang berbeda. Dan perpindahan yang dijelaskan di sini hanyalah sebagian kecil dari kemampuannya.

Situs ini terlihat cukup menarik, untuk pembuatannya digunakan berbagai elemen modern. Salah satunya adalah paralaks. Contoh situs mungkin terlihat seperti ini:

  • www.grabandgo.pt;
  • www.fishy.com.br;
  • www.noleath.com;
  • buysellwebsite.com.

jParallax diwakili oleh lapisan yang bergerak dengan mouse. Elemen dinamis dicirikan oleh pemosisian absolut (posisi: absolut;). Masing-masing dicirikan oleh ukuran dan gerakannya sendiri dengan kecepatan individu. Itu bisa berupa teks atau gambar (atas permintaan pembuat sumber daya).

pengguliran paralaks
pengguliran paralaks

Persepsi pengunjung situs

Setelah itu, seseorang biasanya memperhatikan fakta bahwa halaman tersebut dirancang dengan kualitas tinggi, nyaman dan berpengetahuan. Fakta ini biasanya dihormati. Kebetulan timbul rasa ingin tahu untuk mencoba elemen lain. Ada sejumlah besar situs identik di Internet. Bagaimana cara membuat sumber daya Anda istimewa?

Jika Anda menyukai desainnya, pengunjung akan tinggal lebih lama. Dengan demikian, kemungkinan dia akan tertarik dengan informasi yang diposting meningkat, dia akan menunjukkan minat. Akibatnya, seseorang akan menggunakan layanan, produk, atau penawaran promosi yang ditawarkan.

Game lama favorit

Konsep "paralaks" harus akrab bagi semua orangpenggemar konsol tahun 80-an dan 90-an. Ini berlaku untuk game:

  1. Mario Bros
  2. Mortal Kombat.
  3. Jalan Kemarahan.
  4. Patroli Bulan.
  5. Penyu dalam Waktu.

Artinya, paralaks adalah teknik yang telah digunakan cukup lama. Game-game ini benar-benar diingat dengan beberapa nostalgia. Bagaimanapun, mereka tampaknya diilhami oleh karakter periode itu.

Gambar di layar dibuat menggunakan teknik seperti pengguliran paralaks. Tidak ada yang mengejutkan dalam kenyataan bahwa teknik ini telah mendapatkan popularitas yang memang layak. Konsep desain ini disambut hangat oleh mereka yang bermain di tahun 80-90an atau menonton waktu luang teman-teman.

cara membuat paralaks
cara membuat paralaks

Pengguliran paralaks

Pemasar merek terkemuka dunia telah lama menggunakan segala macam kemajuan teknis. Dengan demikian, menjadi mungkin untuk menarik bahkan pengunjung biasa ke situs tersebut.

Pengguliran paralaks telah cukup berhasil digunakan oleh Nike. Situs web asli perusahaan dirancang oleh Weiden dan Kennedy. Tapi desain ini tidak bertahan. Sumber daya diperbarui secara bertahap, sesuai dengan tren zaman kita. Activatedrinks.com adalah contoh situs yang desainnya mirip dengan yang digunakan oleh pemasar Nike pada masa itu.

contoh paralaks
contoh paralaks

Speaker jangan terlalu banyak

Jangan lupa bahwa desain situs sering menjadi kriteria utama yang memandu pengunjung. Dieksekusi dengan buruksumber daya biasanya meninggalkan kesan kesembronoan pemilik perusahaan kepada pengguna. Tetapi situs dengan segala macam elemen desain yang menarik menunjukkan keinginan pemilik organisasi untuk menarik pengunjung.

Di sini perlu diingat tentang paralaks. Ini adalah alat yang luar biasa. Tetapi bahkan mereka tidak boleh terlalu terbawa suasana. Karena halaman yang di dalamnya terdapat berbagai macam elemen bergerak cukup sulit untuk dilihat. Yang terbaik adalah membuat desainnya cukup bergaya dan mudah dipahami.

Dynamic harus berupa elemen individual yang memerlukan seleksi. Mungkin juga ada gambar yang dibuat menggunakan lapisan yang bergerak relatif satu ke yang lain. Jangan lupa bahwa situs pengguna dirancang terutama untuk pengunjung. Itu tidak harus menjadi mahakarya seorang webmaster yang telah mencurahkan semua pengetahuannya ke dalamnya. Lagi pula, pendekatan seperti itu hanya akan memperumit persepsi.

efek paralaks untuk situs web
efek paralaks untuk situs web

Cara membuat navigasi situs

Bagaimana cara membuat paralaks? Pertanyaan ini menarik bagi banyak pembuat situs web. Tidak perlu mengetahui seluk-beluk menulis tag. Sangat nyaman untuk menggunakan sumber daya khusus di Internet. Dari sekian banyak proposal yang tersedia, pembantu berikut dapat dibedakan:

  1. Plax adalah program yang cukup mudah digunakan. Itu cenderung membuat halaman lancar dengan menggerakkan mouse.
  2. jQuery Parallax Image Slider - Plugin jQuery yang digunakan untuk membuat slider gambar.
  3. Jquery Image Parallax - cocok untuk mendesain gambar transparan. Melalui penggunaan PNG,-g.webp" />
  4. Curtain.js digunakan untuk membuat halaman dengan panel tetap. Dalam hal ini, efek membuka tirai diamati.
  5. Scrolling Parallax: Plugin jQuery adalah untuk membuat efek paralaks saat menggulir roda mouse.
paralaks berlabuh ke kursor
paralaks berlabuh ke kursor

Beberapa plugin yang lebih berguna

Seperti yang Anda ketahui, informasi memiliki nilai terbesar. Dan semakin besar jumlah cara untuk mencapai yang diinginkan diketahui, semakin dekat kemungkinan mendapatkan hasil yang benar. Plugin berguna yang digunakan untuk membuat dinamika:

  1. jQuery Scroll Path - digunakan untuk menempatkan objek pada jalur yang ditentukan.
  2. Scrollorama adalah plugin jQuery. Ini digunakan sebagai alat untuk desain material yang menarik. Memungkinkan Anda untuk "menghidupkan kembali" teks pada halaman karena pengguliran yang nyaman.
  3. Scrolldeck adalah plugin jQuery. Ini adalah solusi presentasi yang bagus untuk situs satu halaman.
  4. jParallax mewakili pergerakan layer tergantung pada pergerakan pointer mouse.
  5. Stellar.js adalah plugin yang dengannya elemen apa pun dirancang dengan penambahan efek gulir paralaks.
contoh efek paralaks
contoh efek paralaks

Paralaks berlabuh ke kursor

Paralaks ini terlihat cukup mengesankan. Sekilas tidak bergerakobjek halaman situs bergerak saat kursor mouse mendekat. Tampaknya menjadi hidup dan mengikuti elemen yang dipindahkan.

Pertama, Anda harus berhenti di gambar. Gambar yang diperlukan ditempatkan dalam bingkai, sedangkan tepinya harus disembunyikan. Caranya sangat sederhana, dan gambar yang dihasilkan terlihat cukup menarik.

Efek paralaks untuk situs adalah cara yang bagus untuk mendesain. Penggunaannya menunjukkan bahwa perhatian diberikan pada penciptaan sumber daya. Oleh karena itu, ada baiknya memperhatikan layanan yang ditawarkan atau informasi untuk dibaca. Situs-situs tersebut terlihat lebih menguntungkan dengan latar belakang yang identik, tetapi sumber daya yang dirancang sederhana.

Direkomendasikan: