Apakah Anda pernah melihat situs web profesional yang ketika di gulir menampilkan animasi yang indah di halaman situsnya? Dan apakah Anda ingin membuat halaman semacam itu di situs WordPress Anda? Jika iya, maka ini merupakan solusi mudah buat Anda tanpa perlu pengetahuan coding sedikitpun.

Dengan membuat animasi gulir yang indah di halaman situs WordPress Anda, ini akan membuat pengalaman yang lebih menarik bagi pengunjung dan menjadikan situs WordPress Anda terlihat lebih mewah seperti situs-situs web besar.

Untuk membuat animasi gulir di WordPress, Anda bisa menggunakan plugin Freemium bernama Scrollsequence Plugin.

Pada artikel ini saya akan menunjukkan kepada Anda bagaimana menggunakan plugin Scrollsequence untuk membuat animasi gulir yang luar biasa di situs Anda dengan sangat mudah.

Scrollsequence

Apa itu Scrollsequence?

Scrollsequence adalah plugin WordPress freemium untuk membuat animasi gulir halaman dengan urutan gambar yang luar biasa untuk menarik perhatian dan keterlibatan pengunjung. Ini memungkinkan Anda menambahkan efek visual profesional ke halaman atau posting apa pun yang memungkinkan Anda membuat halaman beranda dan halaman arahan yang dinamis.

Efek animasi dibuat oleh serangkaian gambar yang ditempatkan di posisi gulir individu. Dan, itu dipicu hanya ketika pengunjung menggulir atau menggesek halaman di perangkat mereka.

Membuat animasi gulir di WordPress dengan Scrollsequence sangat mudah – tidak perlu menyewa pengembang ahli atau menulis satu baris kode pun. Cukup tambahkan gambar, judul, teks, pilih efek animasi, dan semuanya siap ditambahkan.

Selain itu, menambahkan animasi di halaman Anda juga sangat mudah hanya dengan dengan menambahkan kode pendek.

Ini berguna tidak hanya untuk membuat situs web Anda menarik, tetapi juga untuk membuat pengguna memahami merek Anda secara kreatif. Bisnis dapat menggunakan Scrollsequence untuk memamerkan produk mereka juga.

Anda juga bisa melihat contoh hasil dari penggunaan plugin Scrollsequence di YouTube : https://www.youtube.com/watch?v=r9SOGQrzZkQ

Baca : Smart Footer System – Ubah Tampilan Footer WordPress Menjadi Lebih Keren

Fitur Unggulan Scrollsequence

Hal menarik yang perlu dibahas dari Scrollsequence adalah ketersediaan fitur-fiturnya menarik yang akan membuat halaman Anda menampilkan animasi indah ketika di gulir. Jadi, mari kita lihat beberapa fitur terbaiknya.

1. Shortcode Siap

Scrollsequence adalah plugin yang siap dengan kode pendek (shortcode). Manfaat dari kode pendek ini adalah Anda dapat membuat animasi secara terpisah tanpa mengganggu halaman web lain. Dan kemudian, menambahkannya ke halaman web itu mudah hanya dengan menyalin kode pendek uniknya ke editor halaman WordPress.

Ini juga bermanfaat untuk menambahkan satu animasi ke halaman web yang berbeda di lokasi yang diinginkan. Selain itu, banyak pembuat halaman memiliki dukungan untuk kode pendek. Jadi, tidak ada masalah dengan pembuat halaman apa yang Anda gunakan.

2. Desain Responsif

Animasi yang dibuat dengan Scrollsequence sudah mendukung responsif. Jadi, animasi ini mampu bekerja di semua perangkat termasuk desktop, ponsel, dan tablet.

Untuk tampilan yang lebih optimal di desktop dan perangkat seluler, dokumentasi Scrollsequence menyarankan penggunaan gambar dengan tinggi dan lebar yang hampir sama.

3. Kompatibel dengan Pembuat Halaman

Sebagian besar pengguna WordPress terbiasa membuat halaman dengan page builder. Namun, beberapa plugin kadang tidak bekerja dengan baik.

Namun, berbeda dengan plugin Scrollsequence yang kompatibel dengan pembuat halaman populer seperti Elementor, Divi, Oxygen Builder, Beaver Builder, dan editor default Gutenberg. Pembuat halaman ini memudahkan untuk menambahkan animasi gulir dengan kode pendek di mana saja di halaman yang Anda inginkan.

4. Pengaturan Animasi

Scrollsequence memiliki banyak pengaturan yang berguna untuk menganimasikan gambar dan elemen overlay.

Pertama, ia memiliki opsi untuk elemen item HTML yang berbeda seperti heading, paragraf, dll. di dalam Scrollsequence. Selain itu, Anda akan mendapatkan gaya animasi berbeda yang dapat dipicu pada interval berbeda, menjadikannya lebih profesional.

Selain itu, Anda dapat menambahkan parameter penundaan yang memicu animasi untuk memulai sedikit lebih lambat, dan bertahan sedikit lebih lama saat menggulir. Hal ini membuat animasi tampil sangat mulus.

Fitur penting lainnya, Anda dapat mengatur interval waktu untuk gambar. Ini memutuskan berapa lama gambar bertahan di layar sebelum diubah.

5. Uji Coba Gratis

Scrollsequence menawarkan uji coba versi pro selama 14 hari. Jadi, jika Anda ingin menguji kerja Scrollsequence, maka Anda dapat menggunakannya. Itu tidak meminta detail pembayaran Anda, tetapi hanya alamat email dan nama Anda untuk disimpan.

Jadi, Anda bisa melihat fitur lengkap dan bagaimana Scrollsequence dapat bekerja di situs WordPress Anda sebelum Anda benar-benar membelinya. Ini merupakan penawaran yang benar-benar menarik.

6. Optimasi Gambar

Untuk membuat animasi yang tepat, Anda memerlukan banyak gambar, setidaknya 50 gambar. Jadi, mengoptimalkannya sangat penting jika Anda ingin memuat animasi ini lebih cepat.

Jika Anda memiliki Scrollsequence pro, maka plugin akan menangani pengoptimalan gambar untuk Anda secara otomatis. Dengan begitu, situs web Anda tetap bisa menampilkan animasi yang indah dengan memuat lebih cepat, menghemat ruang server, dan meningkatkan SEO situs web Anda.

7. CSS Khusus

Jika Anda fasih dalam pengkodean, Anda dapat menggunakan CSS khusus untuk memodifikasi animasi sesuka Anda. Dengan itu, Anda dapat menambahkan lebih banyak gaya dan fungsi ke animasi sesuai dengan imajinasi Anda. Fitur ini tentu sangat berguna bagi Anda yang memahami kode CSS atau bagi pengembang web.

Baca : Popup Maker – Plugin Pembuat Popup Keren untuk WordPress

Cara Menggunakan Scrollsequence

Setelah menginstal plugin, untuk memulai, buka Scrollsequence → Add New Scrollsequence.

Anda dapat menambahkan judul untuk Scrollsequence baru dan kemudian menambahkan Adegan dengan mengklik “Add Scene.” Setelah Anda selesai melakukannya, adegan baru yang terdaftar sebagai “Scene 0” akan terlihat.

Anda dapat membuat beberapa Adegan jika Anda membutuhkan animasi yang lebih panjang dengan berbagai efek dan gambar. Mengklik tombol plus (+) kecil di sebelah Scene akan memungkinkan Anda untuk menambahkan lebih banyak Adegan kapan saja. Gambar, efek, dan pengaturan yang berbeda dapat diatur untuk setiap Scene baru.

Rangkaian gambar adalah dasar dari efek animasi Scrollsequence. Anda perlu membuat dan mengunggah gambar dalam urutan yang Anda inginkan untuk dilihat. Untuk efek keseluruhan yang lebih baik, disarankan untuk memiliki 50 hingga 100 gambar atau lebih untuk mencapai hasil yang diinginkan. Alih-alih satu animasi, efek sebenarnya “scrolling” melalui semua gambar itu.

Unggah gambar ke media library WordPress Anda dan kemudian tambahkan ke Scene dengan mengklik “Select Attachment.

Angka yang dimulai dari 0 akan secara otomatis ditetapkan ke setiap gambar baru. Fungsi drag dan drop memungkinkan Anda untuk menyusun ulang gambar-gambar itu sesuai keinginan Anda.

 

Anda dapat menggunakan opsi drag-and-drop untuk memposisikan ulang gambar.

Anda juga dapat menghapus semua gambar, membalik urutannya, atau mengurutkan gambar secara massal.

Bagian editor baru yang disebut “Fixed Content” akan terlihat setelah Anda memilih dan menambahkan gambar Anda ke Adegan tertentu. Editor ini memungkinkan Anda menyesuaikan dengan konten yang muncul di atas urutan gambar.

 

Anda akan melihat bahwa sudah ada heading default. Anda akan ingin mengubahnya sesuai dengan apa yang ingin Anda tampilkan. Di Fixed Content Editor, Anda dapat menambahkan HTML, kode pendek, oembed, dll.

Animations & Other Settings

Saat Anda menambahkan gambar ke Scene tertentu, Anda akan melihat bahwa opsi “Fixed Content Animation” dan “Image Scale and Alignment” juga muncul.

Ketika tombol “Add Animation” diklik, maka akan muncul menu baru dengan pilihan sebagai berikut:

• Selector – Di sini, Anda memasukkan ID elemen yang ingin Anda animasikan b menggunakan hash (#). Contoh: #bigbrains
• Start – Masukkan nomor gambar dari tempat Anda ingin memulai animasi.
• End – Masukkan nomor gambar di mana animasi akan berakhir.
• From Animation – Titik awal animasi.
• To Animation – Titik akhir dari animasi.

Scrollsequence menggunakan nomor gambar, bukan waktu. Saat pengguna menggulir, nomor ini berubah sesuai urutan. Anda harus memutuskan elemen mana yang akan dianimasikan dan menentukan awal dan akhir animasi (jika Anda ingin menggunakan animasi).

Menggunakan From Animation dan To animation, pilih efek animasi untuk awal dan akhir.

 

Ada 4 pilihan yang tersedia untuk dipilih:

• Fade From Opacity – 1 dan 0 adalah parameter opacity. Setelah Opacity menjadi nol, visibilitas akan disetel ke tidak ada.
• Move From Vertical Offset – Ini adalah gerakan vertikal ke atas dan ke bawah.
• Move From Horizontal Offset – Di sini, Anda akan memiliki gerakan horizontal dari kiri ke kanan dan sebaliknya.
• Scale From – Mengubah skala elemen animasi.

Anda dapat menggabungkan dua atau lebih animasi dan menerapkannya ke elemen yang sama.

Untuk menambahkan animasi ke konten, Anda harus menambahkan pemilih CSS ke konten yang ingin Anda animasikan. Ini adalah bagian teknis kecil dari proses.

Anda harus beralih ke tab Teks di editor konten. Kemudian, tambahkan id ke setiap bagian teks yang ingin Anda animasikan.

Anda juga akan melihat opsi Durasi Gambar yang tersedia. Image Duration adalah jarak antara setiap gambar dalam urutan. Nilai default saat ini adalah 25 piksel. Jika Anda ingin meningkatkan ini, masukkan nilai numerik yang lebih tinggi sehingga gambar yang dipilih akan muncul di layar untuk waktu yang lebih lama.

Image Scale and Alignment akan berada di bawah opsi Image Duration. Anda dapat memastikan bahwa pengunjung situs yang menggunakan desktop dan perangkat seluler dapat melihat animasi yang Anda buat dengan benar dengan menyesuaikan kecocokan layar dan perataan gambar.

Pengaturan default adalah “Scale to Fill.” Ini berarti konten yang diganti berukuran untuk mempertahankan rasio aspeknya sambil mengisi seluruh kotak konten elemen.

Opsi lain yang tersedia adalah “Scale to fit”, yang berarti konten yang diganti diskalakan untuk mempertahankan rasio aspeknya saat pas di dalam kotak konten elemen.

Apa pun opsi yang Anda pilih, Anda akan dapat menyesuaikan perataan gambar vertikal dan horizontal untuk seluler dan desktop.

Di sebelah kanan, Anda akan melihat pengaturan Scrollsequence tambahan seperti Scroll Delay (berapa lama waktu yang dibutuhkan animasi untuk mengejar setelah scroll selesai), Image Width (pilihan adalah lebar konten dan lebar paksa), Image Opacity, dan Custom CSS.

Cara Menambahkan Animasi Ke Situs

Saat Anda membuat Scrollsequence baru dan mengklik tombol Publish, Anda akan memiliki kode pendek unik untuk animasi itu yang dapat Anda tempatkan di mana saja di situs. Itu bahkan dapat digunakan dengan plugin pembuat halaman.

Buka tab Scrollseqence. Di sana, Anda akan melihat daftar animasi yang Anda buat. Di bawah kolom ‘Shortcode‘, Anda akan menemukan kode pendek untuk setiap animasi.

Pilih shortcode dan copy. Kemudian Anda dapat menempatkannya di halaman atau postingan mana pun. Saya dapat dengan cepat membuat urutan animasi yang tampak hebat.

Kesimpulan

Secara keseluruhan, Scrollsequence membuatnya sangat mudah untuk membuat animasi gulir yang menarik ini di situs WordPress Anda. Tidak semua situs WordPress membutuhkan jenis animasi ini, tetapi ini adalah opsi yang sangat bagus dengan hasil yang rapi untuk situs yang berfokus pada visual atau situs mana pun yang ingin Anda tambahkan nuansa sinematik. Ini juga bagus untuk membuat halaman arahan yang menarik untuk suatu produk.

Dan jika Anda bukan pengembang yang ahli coding dan ingin membuat animasi semacam ini di situs WordPress, maka tidak ada pilihan lain selain menggunakan plugin Scrollsequence ini, karena sepengetahuan saya tidak adalah plugin WordPress lain yang memungkinkan Anda melakukan ini dan semudah ini.

Baca : Panduan Lengkap Cara Berlangganan Zoom Pro

Plugin versi pro dihargai $49,99 untuk harga satu website. Tentu itu harga yang murah dibanding Anda harus menyewa pengembang atau desainer web untuk membuat animasi sinematik di situs web Anda. Semoga artikel ini bermanfaat dan selamat mencoba. 🙂

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.

Daftar isi Tutorial WordPress Terlengkap Gratis