Hari ini kami diberitahu tentang pembaruan baru di Divi yang menawarkan apa yang disebut efek animasi bergulir. Kami telah melihatnya dan dalam tutorial ini kami akan merangkum apa yang Anda harapkan.

Mari kita mulai.

Apa efek gulir?

Efek gulir adalah animasi yang dapat disesuaikan yang bereaksi terhadap Anda pengunjung saat mereka menggulir halaman ke atas dan ke bawah. Tidak seperti animasi tradisional, efek pengguliran berhubungan langsung dengan perilaku pengguliran Anda pengunjung. Kecepatan dan arah animasi didasarkan pada kecepatan dan arah pengguliran pengunjung. Garis waktu animasi didasarkan pada posisi elemen di jendela browser.

Kedengarannya rumit, tetapi dengan Divi, itu cukup sederhana

Elemen apa pun dapat dianimasikan menggunakan kombinasi skala, rotasi, gerakan horizontal dan vertikal, opacity, dan efek blur. Lalu, Anda mengontrol besarnya setiap efek pada titik berbeda dalam animasi Divi menangani sisanya, menciptakan transisi yang indah saat elemen ini masuk dan bergerak dalam pandangan Anda. pengunjung. Buat animasi sederhana yang menambah kedalaman dan kecanggihan halus, atau gabungkan efek dan animasikan beberapa elemen untuk menciptakan ledakan aktivitas spektakuler yang akan membuat Anda kagum pengunjung!

6 baru enam efek unik

Efek tersedia untuk dipilih atau dalam kombinasi. Divi hadir dengan enam efek gulir berbeda, yang masing-masing dapat disesuaikan secara individual menggunakan antarmuka pengguna efek gulir baru kami. Anda juga dapat menggabungkan salah satu efek untuk membuat animasi yang lebih kompleks.

Gerakan vertikal

Efek gerakan vertikal memungkinkan setiap elemen untuk bergerak ke atas dan ke bawah halaman tergantung pada kecepatan dan arah scroll pengunjung. Hasilnya adalah efek paralaks! Sekarang semuanya bisa digunakan untuk membuat efek paralaks dengan Divi. Anda bahkan dapat menggabungkan gerakan vertikal dengan gambar latar paralaks untuk membuat beberapa desain yang benar-benar mengesankan.

Pengaturan gambar Divi

Pergerakan horizontal

Efek gerakan horizontal mirip dengan efek gerakan vertikal, hanya saja memungkinkan item dipindahkan dari kiri ke kanan pada layar tergantung pada arah dan kecepatan scroll pengunjung. . Anda bahkan dapat menggabungkan gerakan vertikal dan horizontal, memberi Anda kendali penuh atas pergerakan elemen apa pun!

Efek animasi Divi

Kabur kontekstual

Efek blur akan membawa elemen masuk dan keluar dari fokus tergantung pada kecepatan dan arah pengunjung menggulir. Karena Divi memungkinkan Anda mengontrol nilai buram awal, tengah, dan akhir, Anda dapat memfokuskan item tepat saat item tersebut berada di depan mata pengunjung. Ini cara yang bagus untuk menarik perhatian ke informasi penting.

Pengaturan blur kontekstual Divi

meleleh

Efek fade dengan elemen fade in dan out berdasarkan kecepatan dan arah scroll pengunjung. Anda dapat mencampurkan elemen, menghilangkannya, atau keduanya. Kombinasi fade, blur, dan scale dapat membuat beberapa animasi yang sangat canggih yang menambahkan faktor "itu" ekstra ke desain Anda.

Efek fade Divi

Efek penskalaan

Efek skala akan menambah atau mengurangi ukuran item berdasarkan kecepatan dan arah gulungan pengunjung. Jika Anda ingin menarik perhatian ke elemen tertentu, seperti ajakan bertindak, Anda dapat menyetel efek skala untuk meningkatkan ukuran elemen saat semakin dekat ke tengah bingkai. jendela. Tentu saja, masih banyak kemungkinan lainnya!

Efek penskalaan

Efek rotasi

Efek putar dengan memutar item ke salah satu arah berdasarkan kecepatan dan arah gulir pengunjung. Rotasi halus benar-benar dapat menghidupkan adegan. Sedikit pemintalan saat dikombinasikan dengan gerakan horizontal bisa terlihat hebat! Atau biarkan elemen berputar-putar.

Penyesuaian gambar efek rotasi divi

Antarmuka intuitif baru

Keindahan nyata dari efek scrolling Divi adalah kemudahan penggunaannya! Terdapat antarmuka pengguna baru yang menyederhanakan proses pembuatan animasi web sehingga dapat diakses oleh semua orang. Hanya dengan satu klik, Anda dapat menambahkan atau menggabungkan salah satu dari enam efek scrolling Divi. Langsung dari kotaknya, mereka akan tampak hebat! Kemudian Anda dapat menyempurnakan efek untuk membuat animasi yang lebih canggih.

Satu klik dan hanya itu!

Ingin menambahkan efek gulir ke modul? Satu klik akan menambah efek dan itu akan terlihat bagus juga! Untuk menambahkan efek gulir, cukup akses grup opsi Efek Gulir baru di tab Lanjutan dari modul, baris, kolom, atau bagian mana pun. Beberapa efek dapat diaktifkan pada saat yang sama dan efek akan digabungkan menjadi satu animasi halus yang berubah dengan indah saat Anda menggulir.

Apakah Anda ingin kendali penuh? Anda memilikinya!

Setelah Anda mengaktifkan efek gulir, Anda memiliki kendali penuh atas besarnya efek di setiap titik dalam animasi. Dengan mengontrol nilai awal, tengah, dan akhir, Anda mengontrol apa yang terjadi animasi. Setelah nilai ditetapkan, Divi akan menangani sisanya dan akan mentransisikan elemen saat bergerak di jendela browser, membuat animasi.

  • Nilai awal - Keadaan animasi awal yang digunakan saat elemen masuk di bagian bawah jendela browser.
  • Nilai menengah - Keadaan animasi perantara yang akan ditransfer saat elemen bergerak ke tengah jendela.
  • Nilai akhir - Keadaan animasi akhir yang terjadi saat item meninggalkan jendela browser di bagian atas layar.

Misalnya, efek opasitas dengan nilai awal 0 (tak terlihat), nilai median 100 (terlihat sepenuhnya) dan nilai akhir 0 (tak terlihat), akan berubah dari keadaan tak terlihat saat masuk jendela hingga 100% terlihat di tengah jendela, kemudian akan hilang dalam keadaan tidak terlihat saat keluar dari jendela.

Menyesuaikan garis waktu animasi

Anda tidak hanya dapat menyesuaikan nilai animasi, tetapi Anda juga dapat menyesuaikan garis waktu animasi. Garis waktu UI mewakili ketinggian jendela browser. Setiap bingkai utama animasi dapat dipicu pada posisi berbeda di area pandang. Ini memungkinkan Anda untuk mengontrol awal, akhir, dan waktu animasi animasi berdasarkan lokasi elemen animasi di sumbu y dari jendela browser.

  • Memulai posisi bingkai utama - Opsi ini mengontrol awal animasi. Jika Anda ingin menunda animasi, seret posisi bingkai utama awal ke dalam.
  • Posisi bingkai utama tengah - Ini mengontrol titik di mana animasi mencapai nilai animasi pusatnya. Tidak harus tepat di tengah garis waktu animasi. Anda dapat memindahkan bingkai utama tengah ke posisi mana pun di jendela.
  • Akhir posisi bingkai utama - Kontrol ini digunakan untuk mengakhiri animasi. Jika Anda ingin animasi diakhiri sebelum klip keluar dari jendela browser, Anda dapat menyeret ke dalam posisi end bingkai utama.

Tambahkan status statis ke animasi apa pun

Anda juga dapat menambahkan jeda ke animasi Anda dengan meningkatkan durasi nilai efek menengah statis Anda. Untuk membuat durasi animasi statis, klik dua panah saat Anda mengarahkan kursor ke bingkai utama tengah. Anda kemudian dapat memperluas bingkai utama tengah dengan menyeret tepinya maju mundur. Selama tahap animasi ini, elemen akan tetap statis. Setelah durasi statis berakhir, animasi akan terus bertransisi ke nilai akhirnya.

Apa pendapat Anda tentang fitur-fitur baru ini? Jangan ragu untuk membagikan pendapat Anda di kolom komentar.