Membuat Motion Effect (Scrolling) Website dengan Elementor

elementor

Motion Effect Elementor – Untuk menarik perhatian penujung dan betah berlama lama di dalam website kamu ada banyak cara , salah satunya iyalah memperindah tampilan website menggunakan Motion Effect .Dengan menggunakan Motion Effect ( Efek Gerak ) pada website kita maka akan membuat tampilan website lebih menarik di mata pengunjung . Dan terkhusus untuk pengguna WordPress sendiri , kamu bisa menggunakan plugin Page Builder bernama Elementor . Dengan menggunakan elementor , kamu bisa mengubah tampilan desain komposisi sesuai yang kamu inginkan dan bahkan kamu bisa membuat template wordpress sendiri dengan Elementor.

https://www.youtube.com/watch?time_continue=3&v=2WO-jAHNURA

Dari sekian banyak fitur yang disediakan elementor yang banyak menarik perhatian penggunanya iyalah Motion Effects nya . Kamu tak perlu menggunakan code khusus untuk menggunakan motion effect karena semua sudah disiapkan .Pada Motion Effects Elementor banyak sekali tool yang dapat digunakan seperti Scrolling Effect , Mouse Effect , Sticky dan Entrace Animation . Anda dapat menemukan tool ini saat masuk dalam Edit Elementor kemudian pilih objek ( image atau lainnya ) kemudian pada Advanced anda akan menemukan Motion Effect .

Scrolling Effect

Dengan menggunakan Scrolling Effect pengguna website anda akan melihat gerakan saat halaman bergulir .

Vertical Scrolling

Vertikal crolling membuat elemen bergerak dengan kecepatan berbeda dari halaman sambil menggulir ke arah atas bawah dan kecepatan yang Anda pilih.

Setelah Anda mengatur gulir vertikal, efeknya akan mulai ketika pengunjung mulai menggulir, dan berakhir ketika mereka keluar dari viewport.

Nilai viewport dihitung berdasarkan ketinggian viewport (artinya ukuran layar yang terlihat), dan tidak sesuai dengan tinggi halaman penuh. Ini berlaku dalam semua situasi, kecuali untuk elemen dengan posisi tetap.

Horisontal Scrolling

Seperti hal nya vertical scrolling , horisontal scrolling membuat element bergerak dengan kecepatan berbeda dari halaman saat menggulir . Element akan bergerak kekiri atau kekanan.

Transparency

Transparansi memungkinkan Anda secara bertahap membuat elemen lebih transparan atau lebih buram dalam kaitannya dengan scrolling pengunjung. Contohnya adalah memiliki judul muncul dan kemudian membubarkan sesuai dengan scroll.

Ada 4 kemungkinan arah efek:

  • Fade in – Artinya elemen mulai transparan dan secara bertahap menjadi buram.
  • Fade out – Elemen mulai buram dan secara bertahap menjadi transparan.
  • Fade out in – Elemen mulai buram, lalu menghilang menjadi transparan, lalu menjadi buram lagi.
  • Fade in out – Elemen mulai transparan, kemudian menjadi buram, lalu transparan lagi.

Blur

Pengaturan ini mirip dengan Transparansi, hanya alih-alih transparansi, elemen menjadi kabur. Contoh yang baik adalah gambar latar belakang yang mendapatkan fokus yang tepat hanya ketika pengguna gulir ke bawah.

Ada 4 kemungkinan arah efek:

  • Fade in – Artinya elemen mulai buram dan secara bertahap menjadi fokus.
  • Fade out – Elemen dimulai dalam fokus dan secara bertahap menjadi buram.
  • Fade out in – Elemen mulai fokus, lalu menghilang menjadi buram, lalu menjadi infocus lagi.
  • Fade in out – Elemen mulai buram, lalu menjadi fokus, lalu buram lagi.

Rotate

Dengan animasi Rotate, elemen berputar saat Anda menggulir. Anda dapat mengatur arah rotasi baik searah jarum jam atau berlawanan arah jarum jam, dan juga menentukan kecepatan rotasi.

Scale

Efek Scale Scrolling memungkinkan Anda menumbuhkan dan mengecilkan elemen sesuai dengan gulir. Contoh: Latar belakang yang tumbuh saat menggulir ke bawah dan menyusut saat menggulir ke atas.

Ada 4 kemungkinan arah efek:

  • Scale Up – Elemen mulai kecil dan secara bertahap menjadi lebih besar.
  • Skala Turun – Elemen mulai besar dan secara bertahap menjadi lebih kecil.
  • Skala Turun – Elemen mulai besar, kemudian menjadi lebih kecil dan kemudian tumbuh lagi.
  • Scale Up Down – Elemen mulai kecil, kemudian menjadi lebih besar dan kemudian menyusut lagi.

Leave A Reply

Your email address will not be published.