Image

QUICK CONTACT













Image

5 Examples of Scroll-Triggered Animations in Web Design

13 Apr 2021 by Billy Gani
Mungkin agak sulit untuk membayangkan website modern saat ini tanpa adanya elemen dinamis di dalamnya. Dengan ukuran kecil, besar, ataupun sedang - tentunya elemen tersebut senantiasa ada di dalamnya. Tampilan antarmuka pada website tidaklah lagi dipenuhi dengan solusi dan elemen yang senantiasa statis. Anda dapat melihatnya hampir di seluruh website yang dapat Anda kunjungi saat ini. Setiap orang senantiasa menghindari tampilan yang stagnan, pasif, dan senantiasa mengacu pada desain yang interaktif dan juga menarik.
 
Entah dengan berupa portofolio yang sangat menarik atau berupa website perusahaan yang serius, kemungkinan besar Anda akan menemukan beberapa detail dinamis yang menarik. Di antara semua variasi yang membingungkan, animasi yang dipicu oleh pengguliran (scroll-triggered animations)  merupakan salah satu hal  yang paling sering digunakan saat ini.
 
Apa Yang Dimaksud Dengan Animasi Yang Dipicu Oleh Pengguliran (Scroll-Triggered Animations)
 
Animasi yang dipicu oleh pengguliran (scroll-triggered animations) senantiasa bersama kita dari waktu ke waktu. Sama seperti tren lain yang juga kuat, penggunaanya memiliki beberapa kelebihan dan kekurangan. Pendekatan yang akan kita bahas dalam artikel ini senantiasa meningkat kepopulerannya karena mempermudah Anda para pemilik website untuk mengubah tampilan antarmuka yang statis menjadi tampilan yang lebih dinamis tanpa mengorbankan ruang atau menghabiskan lebih banyak uang di dalam penggunaannya. Tentunya dikarenakan sifatnya yang ringan dan padat. Kehadirannya menjadi bagian dari alur pembacaan yang alami dan memperkaya pengalaman pengguna.
 
Lebih lanjutnya, animasi yang dipicu oleh pengguliran (scroll-triggered animations) ini menjadi salah satu alat yang tepat ketika Anda mengatur titik fokus yang tidak mencolok. Penggunaannya juga dapat mengarahkan audiens Anda dari satu pos pemeriksaan ke pos pemeriksaan lainnya. Teknik ini memiliki banyak keistimewaan dan manfaat serta sudah teruji oleh waktu. Mari kita pertimbangkan beberapa contoh dari website modern tempat animasi yang dipicu oleh pengguliran (scroll-triggered animations) ini berdiri di balik keindahan dan interaktivitas dari pengalaman pengguna.
 
Meta Music
 

 
 
Website pertama yang dapat diulas adalah Meta Music. Website ini menjadi salah satu contoh yang tepat dari tempat animasi yang dipicu oleh pengguliran (scroll-triggered animations). Pada website ini, Anda dapat melihat bagaimana solusi yang diberikan secara tepat dikombinasikan dengan gaya linear dengan masking yang memberikan hasil yang juga menarik perhatian. Bergulir dalam elemen yang bervariasi - terkadang berbentuk ikon dan juga terkadang berbentuk ilustrasi.
 
Dalam website Meta Music, pengguna menikmati pengalaman yang konsisten dengan detail yang tidak statis dan animasi pendek yang memuaskan mata dan mulai terputar otomatis ketika memasuki radar dari pengguna.
 
Limnia
 

 
 
Meskipun Limnia tidak dapat membanggakan animasi yang dipicu oleh pengguliran (scroll-triggered animations) yang mereka miliki, website mereka dapat menjadi contoh sempurna dari website promosi reguler yang mendapat tampilan segar berkat tren ini.
 
Pada websitenya, Anda dapat melihat efek sederhana yang dipicu dengan menggulirkan elemen atau konten dalam halamannya. Lebih tepatnya, saat bagian masuk pada bagian tampilan, efek secara otomatis teraktivasi. Efek ini berupa transisi pendek yang  baik dan tepat penggunaannya untuk gambar dan blok konten. Dan juga, hal tersebut cukup untuk mengubah antarmuka menjadi bagian yang terlihat lebih kontemporer, dan pada saat yang sama memenuhi branding dari perusahaan.
 
Selain itu, Limnia membuktikan kepada Anda bahwa animasi yang dipicu oleh pengguliran (scroll-triggered animations) modern tidak hanya berbicara tentang animasi besar yang kuno. Penggunaannya berbicara dengan menggunakan interaksi mikro dan kecil dan  efek pendek yang memenuhi tren akhir-akhir ini. Oleh karena itu, trennya juga dapat berbicara tentang animasi kecil yang dapat dianggap sebagai efek transisi.
 
Portfolio Pribadi Dari Stefano De Rosa
 

 
 
Dalam website portofolio pribadi dari Stefano De Rosa, Anda dapat melihat efek transisi yang dipicu oleh pengguliran daripada animasi dalam pengertian tradisionalnya. Namun, hal ini sama sekali tidak mengurangi keindahannya. Hal tersebut hanyalah menjadi versi lain dari tren yang ditata ulang untuk tren di masa kini.
 
Efek ini mempengaruhi berbagai elemen antarmuka, dimulai dengan judul dan diakhiri dengan teks. Kehadirannya menciptakan peralihan yang menarik di antara bagian-bagian, mengubah pengalaman pengguna menjadi kesenangan.
 
Culturally Connected
 

 
 
Culturally Connected merupakan website yang menggunakan ciri khas ilustrasi yang diperkaya dengan solusi yang dipicu oleh pengguliran pengguna. Hal ini membantu mengungkap seluruh keindahan yang tersembunyi di dalam proyek mereka karena ilustrasi dan animasi memang ditakdirkan untuk bekerja bersama. Kedua elemen desain ini menjadi pasangan yang cukup kuat.
 
Pada contoh diatas, hampir setiap bagian memiliki potongan bunga dengan komponen interaktif yang dipicu dari pengguliran yang dilakukan pengguna. Gerakan tersebut juga menciptakan perasaan pada tampilan antarmuka yang hidup dan segar. Perhatikan bahwa meskipun ada banyak detail dinamis, kehadirannya tidak mengalahkan atau mengintimidasi tetapi bekerja sama dengan sempurna untuk menciptakan pengalaman yang harmonis bagi pengguna.
 
Tall , True & Tangled
 

 
 
Seperti yang sudah pernah dibahas sebelumnya, animasi yang dipicu oleh pengguliran (scroll-triggered animations) dapat digunakan untuk mengarahkan pengguna dari satu titik ke titik lainnya, membuat Anda mudah membaca alur pembacaan mereka. Tall, True & Tangled menjadi salah satu contoh yang baik untuk hal ini.
 
Tim mereka sudah membuat keseluruhan perjalanan visual, mulai dari atas hingga bawah. Anda dapat melihat trek kecil dalam bentuk garis yang sederhana dan menarik perhatian mulai dari bagian atas hingga bawah website. Hal tersebut secara sempurna melengkapi seluruh desain, tema dan tidak mengganggu pengguna.
 
 
 
Berikut adalah beberapa contoh dan pemahaman mendasar tentang animasi yang muncul ketika dipicu dengan tindakan tertentu dari pengguna dalam desain website. Jika Anda masih membutuhkan bantuan untuk menerapkannya atau ingin membuat website dengan beberapa contoh diatas, kami dapat membantu.
 
Eannovate hadir dengan memberikan layanan terbaik untuk Custom Web Design / Website Development di Jakarta dengan FREE Domain dan Hosting, serta Maintenance selama 1 tahun. Kami akan menjamin website Anda akan dibangun sesuai dengan kebutuhan usaha Anda dan penanganan jika terjadi masalah pada website Anda sewaktu-waktu.
 
Dan juga, Copywriter yang kreatif dan berpengalaman dari tim kami juga siap untuk membuat konten asli dan berkualitas untuk mengaktifkan aktivitas online perusahaan Anda. Buatlah perusahaan Anda lebih dikenal oleh target audiens Anda dengan menyerahkan layanan jasa Custom Web Design / Website Development di Jakarta hanya pada Eannovate. 
 
Anda mencari website yang menyajikan informasi teknologi kreatif yang dilengkapi dengan berita startup, info gadget terupdate, dan berita di dunia IT terbaru serta terkini? Anda dapat mengunjungi blog kami, Alterspace.
 
Jika ada pertanyaan mengenai aplikasi perangkat (mobile apps), UI UX dan digital marketing Jakarta,  jangan sungkan untuk langsung menghubungi kami di
Telp : 021-5437-5601 (Senin - Jumat, 9 pagi - 5 sore) ,
 
Email : hello@eannovate.com atau menggunakan contact form.
 
 
 
 
 
 
 
 
Reference: OneExtraPixel

CONTACT US

Let's Work Together

Have cool projects to work on ?

CONTACT

Image
LOKASI
INDONESIA

Ruko Kosambi Baru blok A ext 1 no 66. Jakarta Barat.

Image
TELEPON
INDONESIA
+62813 8251 8448
Image
E-MAIL
hello@eannovate.com

Office hours of Web, UI UX Design, Mobile App Development, SEO in Jakarta, Indonesia
JAM KERJA
Mon-Fri 9.30am - 6.00pm
icon
icon
Free Consultation
icon