Cara Menambahkan Animasi Pada Gulir di Elementor (Seperti Apple AirPods)

Diterbitkan: 2022-07-21

Mencari cara untuk menambahkan animasi pada gulir di Elementor seperti yang digunakan Apple dan Sony di situs web mereka?

Meskipun Elementor Pro menyertakan semua jenis efek animasi yang rapi melalui fitur Efek Geraknya, itu tidak memungkinkan Anda membuat urutan gambar yang sangat menarik pada efek gulir seperti yang Anda lihat di situs web Apple (ditambah banyak lainnya). Misalnya, halaman AirPods Pro .

Dengan plugin Scrollsequence, Anda dapat dengan mudah menambahkan jenis animasi gulir sinematik ini ke Elementor ( termasuk Elementor versi gratis ).

Sulit untuk dijelaskan dengan kata-kata, jadi lihat contoh di bawah ini ( animasi bergerak saat pengunjung menggulir halaman ke bawah ):

Jika Anda ingin mempelajari lebih lanjut tentang Scrollsequence secara umum, Anda dapat membaca ulasan lengkap Scrollsequence kami.

Namun, dalam posting ini, kami secara khusus akan fokus pada cara menambahkan animasi pada scroll di Elementor menggunakan Scrollsequence.

Mari kita menggali!

Cara Membuat Animasi Scroll Sinematik di Elementor Dengan Scrollsequence

Berikut adalah tampilan tingkat tinggi pada langkah-langkah yang terlibat – teruslah membaca untuk tutorial mendetail:

Instal plugin Scrollsequence
Buat animasi Anda
Tambahkan animasi gulir ke Elementor

1. Instal Plugin Scrollsequence

Untuk memulai, Anda akan ingin menginstal plugin Scrollsequence di situs Elementor Anda.

Scrollsequence memiliki versi gratis di WordPress.org serta versi premium yang menambahkan lebih banyak fitur. Versi gratisnya memungkinkan Anda mengatur animasi dasar hingga tiga adegan dan maksimal 100 gambar per adegan, sedangkan versi premium menghilangkan semua batasan dan juga menambahkan animasi dan fitur yang lebih canggih.

Scrollsequence – Plugin Animasi Gambar Gulir Sinematik

Pengarang: Scrollsequence

Versi Saat Ini: 1.2.7

Terakhir Diperbarui: 9 Mei 2022

scrollsequence.1.2.7.zip

98% Peringkat 1.000+ Menginstal WP 5.0+ Membutuhkan

Anda juga dapat mencoba semua fitur premium secara gratis dengan uji coba gratis selama 14 hari, jadi Anda tidak perlu membayar apa pun hanya untuk mengujinya.

Jika Anda memutuskan ingin versi premium setelah uji coba, harganya mulai dari $69,99. Namun, Anda dapat menggunakan kupon Scrollsequence eksklusif kami untuk menghemat 20%:

DISKON 20%

Urutan gulir

Dapatkan diskon eksklusif 20% di Scrollsequence dengan kupon WPMAYOR20. Buat animasi gulir Anda dalam hitungan menit.

Dapatkan diskon eksklusif 20% di Scrollsequence dengan kupon WPMAYOR20. Buat animasi gulir Anda dalam hitungan menit. Tampilkan Lebih Sedikit

2. Buat Animasi Anda

Setelah Anda menginstal plugin, buka Scrollsequence → Add New Scrollsequence untuk mengatur animasi gulir pertama Anda.

Setiap animasi terdiri dari satu atau lebih adegan dan setiap adegan akan berisi beberapa gambar yang disusun secara berurutan. Plugin kemudian akan menghasilkan animasi berdasarkan semua gambar dalam urutan.

Sebuah "adegan" adalah satu urutan animasi lengkap. Jika Anda memutuskan untuk menambahkan beberapa adegan, pengguna akan melanjutkan ke adegan berikutnya setelah mereka sepenuhnya menggulir animasi adegan pertama.

Dalam kebanyakan situasi, Anda akan ingin mendasarkan gambar dalam urutan Anda pada video dasar. Untuk mengonversi video yang ada ke urutan gambar terpisah, Anda dapat menggunakan salah satu alat ini dari dokumentasi plugin. Opsi paling sederhana adalah konverter Ezgif berbasis browser, tetapi Anda akan mendapatkan kualitas yang lebih baik dengan perangkat lunak khusus.

Buat Adegan dan Tambahkan Gambar

Setelah Anda membuat animasi tingkat tinggi, klik tombol Tambahkan Adegan untuk menambahkan adegan pertama Anda.

Ini akan memperluas serangkaian opsi baru yang memungkinkan Anda mengunggah semua gambar untuk urutan animasi Anda. Pengembang merekomendasikan untuk mengunggah setidaknya 50-100 gambar per adegan untuk memastikan animasi yang halus.

Setelah Anda mengunggah gambar, Anda dapat menggunakan opsi pengurutan untuk memastikan bahwa mereka berada dalam urutan yang benar. Jika urutannya tidak benar, animasi Anda tidak akan terlihat benar .

Tambahkan gambar ke adegan untuk membuat animasi saat menggulir di Elementor

Jika Anda ingin membuat adegan lain, Anda dapat melakukannya dengan mengklik ikon plus di sebelah tab Scene 0 .

Tambahkan Konten Tetap dan Animasi

Untuk menambahkan konten tetap yang muncul di atas gambar animasi, Anda dapat menggunakan kotak Konten Tetap untuk konten itu sendiri.

Kemudian, Anda dapat menggunakan bagian Animasi Konten Tetap untuk mengatur aturan animasinya. Kami membahas ini secara rinci di Langkah #4 dari tinjauan Scrollsequence kami, tetapi ide dasarnya adalah sebagai berikut:

Anda menambahkan pemilih CSS ke konten di kotak Konten Tetap (menggunakan tab Teks ).
Anda mengatur aturan animasi Anda di kotak Animasi Konten Tetap dengan menargetkan pemilih CSS tersebut dan kemudian juga memilih waktu untuk cara menganimasikan konten di dalam pemilih tersebut. Misalnya, Anda dapat mengatakan bahwa Anda ingin menampilkan teks tertentu untuk gambar 30-55.

Berikut ini contoh menambahkan pemilih CSS ke konten Anda:

Dan inilah tampilannya untuk menyiapkan aturan animasi:

Selain menganimasikan konten tetap Anda, Anda juga dapat menyesuaikan durasi gambar.

Konfigurasikan Pengaturan Lain Sesuai Kebutuhan

Menyiapkan adegan, gambar, dan konten tetap Anda adalah bagian terpenting dalam membuat animasi.

Namun, Scrollsequence juga memberi Anda beberapa pengaturan lain di antarmuka ini yang mungkin ingin Anda jelajahi.

Misalnya, Anda dapat menyesuaikan skala dan perataan gambar di bagian bawah area pengaturan pemandangan.

Anda juga mendapatkan beberapa pengaturan umum di area Pengaturan Scrollsequence pada bilah sisi. Di widget ini, Anda dapat mengontrol lebar gambar dan penundaan gulir, serta menambahkan CSS khusus jika diinginkan.

Konfigurasikan pengaturan animasi lainnya

Publikasikan Animasi Anda

Untuk menyelesaikannya, klik tombol Publish untuk mempublikasikan animasi Anda, seperti yang Anda lakukan pada posting blog.

Setelah Anda memublikasikannya, Anda dapat menemukan kode pendek animasi ini dengan membuka Scrollsequence → Scrollsequence :

Simpan kode pendek ini berguna karena Anda akan membutuhkannya dalam beberapa detik untuk menambahkan animasi pada gulir di Elementor.

3. Tambahkan Animasi Gulir Anda ke Elementor

Setelah Anda puas dengan animasi gulir Anda, Anda siap untuk menambahkannya ke desain Elementor Anda.

Anda dapat membuat desain Elementor terpisah secara eksklusif untuk animasi gulir. Atau, Anda juga dapat menyertakan animasi gulir sebagai bagian dari desain yang lebih besar. Dalam hal ini, konten di atas dan di bawah animasi gulir akan tetap statis.

Untuk memulai, luncurkan editor Elementor untuk konten tempat Anda ingin menambahkan animasi gulir.

Lalu, berikut ini cara menambahkan animasi scroll:

Tambahkan widget Shortcode Elementor di mana Anda ingin animasi gulir muncul.
Tempelkan kode pendek animasi ( sekali lagi, Anda dapat menemukannya dengan membuka Scrollsequence → Scrollsequence ) .
Klik tombol Terapkan di pengaturan widget Kode Pendek agar Elementor menghasilkan pratinjau langsung dari animasi Anda di editor.

Tambahkan kode pendek animasi ke editor Elementor.

Anda dapat mengalami animasi penuh tanpa meninggalkan editor Elementor – cukup gulir ke bawah di pratinjau visual!

Dan hanya itu – Anda baru saja belajar cara mengatur animasi gulir sinematik di Elementor, seperti yang dilakukan Apple dengan begitu banyak halaman arahannya.

Jika Anda ingin membuat animasi tambahan atau menambahkan adegan baru ke animasi Anda, Anda hanya perlu mengulangi langkah-langkah di atas.

Buat Elementor Pertama Anda Pada Animasi Gulir Hari Ini

Orang-orang menyukai Elementor karena fleksibilitas yang diberikannya kepada Anda dalam hal membuat desain Anda.

Namun, satu hal yang tidak dapat dilakukan Elementor dengan sendirinya adalah mengatur jenis sinematik pada animasi gulir yang Anda lihat dari Apple dan lainnya.

Dengan memasangkan Elementor dengan Scrollsequence, Anda dapat dengan mudah menambahkan jenis animasi ini ke desain Elementor Anda.

Jika Anda ingin mencobanya, Anda memiliki dua opsi:

Cukup gunakan Scrollsequence versi gratis di WordPress.org.
Gunakan uji coba gratis 14 hari untuk mengakses semua fitur premium di Scrollsequence.

Jika Anda memutuskan ingin menggunakan Scrollsequence versi premium, Anda dapat menggunakan kupon Scrollsequence eksklusif kami untuk menghemat 20% pesanan Anda.

DISKON 20%

Urutan gulir

Dapatkan diskon eksklusif 20% di Scrollsequence dengan kupon WPMAYOR20. Buat animasi gulir Anda dalam hitungan menit.

Dapatkan diskon eksklusif 20% di Scrollsequence dengan kupon WPMAYOR20. Buat animasi gulir Anda dalam hitungan menit. Tampilkan Lebih Sedikit

Apakah Anda masih memiliki pertanyaan tentang cara menambahkan animasi pada scroll di Elementor? Beri kami teriakan di bagian komentar dan beri tahu kami apa yang ada di pikiran Anda.

Cara Menambahkan Animasi Pada Gulir di Elementor (Seperti Apple AirPods)

Cara Membuat Animasi Scroll Sinematik di Elementor Dengan Scrollsequence

1. Instal Plugin Scrollsequence

20i WordPress Hosting

rincian

Astra

rincian

Obral Ulang Tahun Astra

rincian

Otonomi

rincian

Avada

rincian

gudang2

rincian

pembangun berang-berang

rincian

Bluehost

rincian

Domain Gratis dengan Bluehost

rincian

Buletin

rincian

Elementor Pro

rincian

Tema Mesin

rincian

Plugin Penting

rincian

Pronto All-in-One

rincian

Groundhogg

rincian

penanam

rincian

Kehadiran Manusia

rincian

IconicWP

rincian

IconicWP

rincian

Keranjang

rincian

bahasa

rincian

jaringan cair

rincian

jaringan cair

rincian

Widget Video Magnifi

rincian

Master Addons untuk Elementor

rincian

Lem Buletin

rincian

Pemberitahuan X

rincian

OceanWP

rincian

Dapat dipesan

rincian

corong keluar

rincian

Halaman Pembayaran

rincian

PeepSo

rincian

cepat

rincian

Urutan gulir

rincian

TokoSiap

rincian

Sorotan PRO

rincian

Penjualan Bintang

rincian

Penjualan Bintang

rincian

Tripetto Pro