Cara Menggunakan Efek Gerak untuk Menganimasikan Gambar (Putar, Skala, Gulir & Transparansi)

Diterbitkan: 2019-05-06

Mengikuti respons positif besar yang kami terima setelah tutorial Efek Gerak kami, kami memutuskan untuk mengumpulkannya ke dalam satu artikel yang akan membantu Anda membuat situs web yang lebih interaktif dengan sangat mudah.

Kami akan membahas:

Putar, efek horizontal & skala
Efek transparansi gambar
Putar dan skala gambar
TRIK BONUS: Efek tumpang tindih teks animasi

Jadi mari kita pergi…

Animasi Gambar: Putar, Gulir Horisontal, Gulir & Skala Vertikal

Dalam video ini, Anda akan mempelajari cara menambahkan efek gulir ke desain Elementor Anda yang membuat gambar tampak seolah-olah berayun, meluncur, melayang, atau maju saat pengunjung menggulir halaman ke bawah.

1. Putar Gambar: Membuat Gambar Berayun

Untuk membuat gambar berayun, klik Tab Lanjutan, buka bagian Efek Gerak , dan aktifkan Efek Gulir .

Kemudian, klik pada opsi Rotate dan pilih arah mana untuk memutar gambar Anda.

Untuk membuat animasi menjadi halus, atur juga penggeser Kecepatan ke 1 .

Terakhir, Anda dapat membiarkan Viewport diatur ke default – 0% dan 100%:

how-to-add-scrolling-effects-to-your-website

Terakhir, atur Y Anchor Point ke Top untuk membuat gambar Anda “berayun” dari atas.

2. Gambar Horizontal Scroll: Cara Membuat Gambar Slide

Untuk membuat slide gambar, aktifkan Scrolling Effects seperti yang Anda lakukan di bagian sebelumnya. Kemudian, aktifkan Gulir Horizontal dan:

Pilih arah yang Anda inginkan untuk menggeser gambar Anda
Atur Kecepatan ke 10

how-to-add-scrolling-effects-to-your-website-2

Dan itu saja! Gambar Anda akan meluncur saat pengunjung menggulir ke bawah halaman.

3. Gulir Vertikal Gambar: Cara Membuat Gambar Mengapung

Untuk membuat gambar mengambang, aktifkan Scrolling Effects . Kemudian, aktifkan Gulir Vertikal dan atur arahnya sama dengan Bawah

how-to-add-scrolling-effects-to-your-website-3

Dan itu saja! Anda dapat membiarkan pengaturan lain sebagai default.

4. Skala Gambar: Cara Membuat Zoom Gambar

Dengan yang terakhir ini, akan terlihat seolah-olah gambar bergerak ke arah pengunjung saat pengunjung menggulir ke bawah. Cara lain untuk memikirkan ini adalah sebagai gambar "tenggelam".

Untuk memulai, aktifkan Scrolling Effects . Kemudian, aktifkan Gulir Vertikal dan:

Atur arah ke Bawah
Atur Viewport antara 0% dan 40%

how-to-add-scrolling-effects-to-your-website-4

Kemudian, klik opsi Scale dan atur Speed sama dengan 6 . Juga, gunakan pengaturan Viewport untuk membuat 20% terbawah dan 80% teratas .

Dan itu saja.

Sekarang setelah Anda tahu cara menggunakan efek gulir, bereksperimenlah dengan desain Anda sendiri untuk membuat sesuatu yang luar biasa!

Transparansi Gambar: Membuat Gambar dan Latar Belakang Hilang di Gulir

Dalam video ini, Anda akan mempelajari cara menggunakan pengaturan Viewport untuk membuat efek gerakan keren saat pengunjung menavigasi situs Anda. Anda dapat menerapkan efek gerakan ke latar belakang dan bagian, serta widget individual, yang memberi Anda banyak fleksibilitas untuk jenis efek yang Anda buat. Untuk memulai:

Pilih gambar
Buka tab Lanjut
Temukan bagian Efek Gerak
Nyalakan Efek Bergulir

Kemudian, aktifkan Horizontal Scroll untuk membuat gambar Anda bergerak dari kiri ke kanan saat pengguna menggulir halaman ke bawah. Anda juga dapat menyesuaikan pengaturan Kecepatan untuk membuat gerakan terjadi lebih cepat atau lebih lambat:

how-to-use-motion-effects-viewport-settings-1

Selanjutnya, mari gali opsi Viewport dan lihat cara kerjanya.

Pertama, penting untuk menentukan istilah – area pandang pengunjung adalah ukuran yang terlihat dari layar perangkat pengguna .

Opsi Viewport memungkinkan Anda memilih kapan harus memulai dan menghentikan efek gulir yang Anda pilih berdasarkan viewport pengunjung:

Misalnya, jika Anda menyetel bagian bawah area pandang menjadi 0% dan bagian atas menjadi 100%, gambar akan mulai bergerak segera setelah terlihat di bagian bawah area pandang pengunjung. Terlebih lagi, gambar akan mencapai posisi “aslinya” ketika berada di tengah viewport pengunjung ( atau, 50% ), dan akan terus bergerak hingga mencapai puncak (100%).

Jadi, inilah seluruh efek secara detail:

Gambar akan mulai di sebelah kiri dari posisi semula saat pertama kali muncul di viewport pengunjung ( viewport pengunjung di 0% )
Ini akan mencapai posisi semula di tengah viewport pengunjung ( viewport pengunjung di 50% )
Itu akan terus meluncur ke kanan dari posisi semula karena pengunjung terus menggulir ( sampai mencapai 100%)

how-to-use-motion-effects-viewport-settings-2

Di sisi lain, jika Anda mengatur Bagian Bawah Viewport ke 50% dan Bagian Atas ke 100%:

Gambar akan mulai dari posisi semula.
Setelah gambar berada di tengah viewport pengunjung (50%), gambar akan mulai bergerak ke kanan hingga gambar mencapai bagian atas viewport pengunjung (100%).

Mari kita lihat jenis efek gulir lain untuk mengarahkan pulang cara kerja Viewport …

Contoh Efek Transparansi

Untuk contoh ini, aktifkan opsi Transparansi dan:

Atur arah ke Fade In
Atur Level ke 10 ( ini membuat gambar sangat transparan untuk memulai )

Jika Anda menyetel Area pandang Bawah ke 0% dan Bagian Atas ke 100%, gambar akan menjadi transparan saat pertama kali muncul di bagian bawah area pandang pengunjung (0%). Saat gambar bergerak ke atas, itu akan menjadi kurang transparan, akhirnya mencapai tampilan aslinya saat mencapai bagian atas area pandang pengunjung (100%). Jika Anda ingin membalikkannya, Anda dapat memilih Fade Out . Kemudian, gambar akan tampak normal pada awalnya dan transparansi meningkat saat pengunjung menggulir ke bawah. Terakhir, opsi lainnya adalah Fade Out In . Dengan yang ini, gambar akan memudar untuk memulai dan kemudian kembali lagi saat pengunjung terus menggulir. Jika Anda mengatur area pandang Bawah menjadi 40% dan Atas menjadi 60% dengan Fade Out In , maka:

Gambar akan memudar dari 0% menjadi 40%
Itu akan tetap memudar antara 40% sampai 60%
Setelah mencapai 60%, itu akan mulai memudar lagi antara 60% dan 100%

how-to-use-motion-effects-viewport-settings-3

Sekarang setelah Anda mengetahui cara kerja pengaturan Viewport , Anda dapat bermain-main dengan pengaturan yang berbeda untuk menemukan efek yang Anda sukai.

Gunakan Titik Jangkar X dan Y Dalam Efek Putar & Skala

Dalam video ini, Anda akan belajar tentang titik jangkar X dan Y untuk efek Rotate and Scale di Elementor's Motion Effects .

Pada akhirnya, Anda akan tahu cara menerapkan pengaturan ini untuk membuat beberapa efek gerakan keren di situs Anda.

Untuk memulai, pilih gambar yang ingin Anda tambahkan efek dan:

Buka tab Lanjut
Temukan pengaturan Efek Gerakan
Nyalakan Efek Bergulir

Poin Jangkar dalam Efek Putar

Mari kita mulai dengan efek Rotate. Klik ikon pensil dengan efek Putar untuk menyalakannya – Anda dapat membiarkan pengaturan sebagai default. Kemudian, cari pengaturan X Anchor Point dan Y Anchor Point yang muncul di bawah ini. Titik jangkar X dan Y menentukan sumbu di mana gambar berputar. Secara default, keduanya diatur ke Center , yang berarti gambar akan berputar seolah-olah ada "pin" di tengah gambar. Namun, mengubah titik jangkar X dan/atau Y akan menyebabkan efek rotasi yang berbeda. Misalnya, jika Anda mengatur X Anchor Point ke kiri dan Y Anchor Point ke atas, gambar akan berputar di sekitar sudut kiri atas seperti ini:

Atau, jika Anda mengatur X Anchor Point ke tengah, dan Anchor Y menunjuk ke atas, gambar akan berputar seolah-olah itu adalah lukisan yang Anda gantung di atas. Dapatkan idenya? Mari kita lihat satu lagi. Jika Anda mengubah X Anchor Point ke kanan, sekarang gambar akan mulai berputar seolah-olah disematkan di sudut kanan atas. Mari kita simpulkan ini. Titik Jangkar X menentukan posisi pada sumbu x di sekitar tempat gambar berputar:

Dan Y Anchor Point melakukan hal yang sama untuk orientasi vertikal:

Poin Jangkar dalam Efek Skala

Sekarang setelah Anda memahami konsep dasarnya, mari kita lihat bagaimana ide yang sama ini bekerja dengan efek Skala .

Untuk memulai, nonaktifkan efek Rotate, aktifkan efek Scale , dan:

Atur Arah untuk Meningkatkan
Atur Kecepatan ke -5

Secara default, X Anchor Point dan Y Anchor Point diatur ke Center , yang berarti bahwa gambar diperkecil ke arah tengah widget gambar.

Di sisi lain, jika Anda mengatur titik jangkar ke Left dan Top , gambar akan turun ke sudut kiri atas.

Ini adalah ide yang sama persis dengan efek rotasi.

Sekarang setelah Anda mengetahui cara kerja titik jangkar X dan Y, lanjutkan dan mainkan dengan pengaturan ini untuk menciptakan efek persis yang Anda inginkan.

TRIK BONUS: Efek Tumpang Tindih Teks Animasi

Dalam video ini, Anda akan mempelajari cara menggunakan fitur Horizontal Scroll di Elementor's Motion Effects untuk membuat efek teks animasi yang rapi di situs Anda.

Anda akan dapat memindahkan teks melintasi halaman saat pengunjung menggulir. Dan dengan beberapa penyesuaian, Anda bahkan dapat membuat teks berubah warna saat bergerak.

Untuk contoh ini, kami akan membahas cara membuat beberapa judul animasi:

Judul abu-abu sederhana yang bergerak ke kanan dan tetap dengan warna yang sama
Judul putih dan merah muda yang bergerak ke kiri dan berubah dari putih menjadi merah muda setelah melintasi latar belakang merah muda

Membuat Header Pertama - Just Motion

Mari kita mulai dengan heading abu-abu solid.

Pilih judul, lalu:

Buka tab Lanjut
Temukan bagian Efek Gerak
Nyalakan Efek Bergulir

Kemudian, klik pensil di sebelah efek Horizontal Scroll untuk memasukkan pengaturannya:

Ubah Arah ke arah yang Anda inginkan untuk menggulir teks Anda ("Ke Kanan" untuk contoh kami)
Biarkan pengaturan Kecepatan dan Viewport sebagai default

Dan itu saja! Judul Anda akan meluncur ke kanan saat pengunjung menggulir halaman ke bawah.

Membuat Header Kedua - Gerakan dan Perubahan Warna

Sekarang, mari kita sedikit lebih maju dan mengubah warna heading saat bergerak. Proses ini melibatkan:

Membuat duplikat bagian dalam
Menggunakan opsi Overflow: Hidden untuk menyembunyikan heading dari salah satu bagian setelah melewati bagian dalam

Untuk memulai, tambahkan widget Bagian Dalam baru ke bagian tempat Anda ingin meletakkan header, lalu hapus kolom kiri. Kemudian, atur Tinggi Min sama dengan 450 px:

Lalu, buka tab Style dan atur warna latar belakang menjadi pink. Terakhir, buka tab Advanced dan atur padding kiri menjadi 33%. Selanjutnya, tambahkan widget Heading dan gaya sesuai keinginan Anda. Anda harus memiliki heading di dalam bagian dalam seperti ini:

Sekarang, edit widget Heading dan aktifkan Scrolling Effects di tab Advanced . Kemudian, aktifkan pengaturan Horizontal Scroll dan biarkan opsi sebagai default.

Sekarang, tajuk Anda akan bergerak ke kiri, tetapi belum berubah warna. Anda dapat melihat bahwa itu masih putih bahkan di latar belakang putih.

Mari kita perbaiki itu…

Selanjutnya, duplikat bagian dalam. Sekarang, Anda akan memiliki dua bagian dalam dan judul yang identik. Anda dapat menggunakan Navigator untuk mengganti nama bagian untuk membantu Anda mengingat yang mana:

Sekarang, pergi ke bagian dalam bawah ( yang duplikat ) dan ubah warna latar belakangnya menjadi putih. Anda juga ingin mengubah warna judul menjadi warna yang sama dengan latar belakang di bagian dalam asli Anda. Kemudian, tambahkan margin atas negatif 450 px ke bagian dalam bawah. Sekarang, bagian dalam bawah ( duplikat ) akan muncul "di atas" dari bagian dalam asli. Untuk memperbaikinya, atur Z-Index untuk bagian duplikat ke 1 dan atur Z-Index untuk bagian asli ke 2 . Selanjutnya, Anda perlu memastikan bahwa hanya tajuk merah muda yang ditampilkan saat bergerak di luar lebar bagian dalam. Anda dapat melihat contoh yang kami inginkan di bawah ini:

Untuk mencapai efek ini, buka pengaturan untuk bagian dalam asli . Di tab Layout , temukan opsi Overflow dan atur ke Hidden .

Dan itu saja! Sekarang, hanya judul dari bagian duplikat yang akan muncul setelah bergulir melewati bagian dalam, yang menciptakan efek teks perubahan warna yang rapi.