12 Situs Web Menarik dengan Contoh Animasi Berbasis Scroll

Sulit untuk membayangkan sebuah situs web yang tidak memiliki satu pun elemen dinamis. Menggunakan elemen-elemen dinamis di dalam situs web hampir pasti menjadi sebuah keharusan. Dewasa ini, kita mencari situs web yang lebih menarik dan interaktif.

Di sinilah Animasi Berbasis Scroll yang populer di situs web tersebut hadir. Filmora Pro merupakan salah satu perusahaan pengembangan situs web terbaik yang mengembangkan situs web berbasis scroll untuk para pengguna di seluruh dunia. Filmora Pro membuat animasi elemen-elemen berbasis scroll secara menakjubkan untuk situs web yang mereka kembangkan.

Bagian ke-1Apa yang Dimaksud dengan Animasi Berbasis Scroll?

Animasi berbasis scroll merupakan tren kuat yang telah bersama kita selama bertahun-tahun. Ia merupakan cara yang paling efektif untuk membuat animasi elemen berbasis scroll, seperti grafis, teks, video, dan foto, dan menghidupkannya saat Anda menggulir sebuah halaman situs web ke bawah. Animasi scroll digunakan untuk menarik perhatian pengguna dan membuat sebuah situs web lebih menarik dan atraktif.

Bagian ke-2 12 Situs Web Terbaik dengan Contoh Animasi Berbasis Scroll

Di bawah ini adalah 12 Situs Web Terbaik dengan contoh animasi berbasis scroll.

01Joey Bada$$ Political MC

Situs web Joey Bada$$ Political MC dianggap sebagai salah satu contoh paling istimewa tentang bagaimana animasi berbasis scroll dapat digunakan secara efektif untuk menyampaikan sebuah cerita. Situs web ini adalah sebuah kolaborasi antara Shoes Up yang merupakan majalah asal Prancis dan MC asal Amerika. Ini adalah sebuah situs web satiris dan menyerupai kampanye politik. Untuk membangun situs web ini, animasi berbasis scroll digunakan secara menyeluruh. Scroll-nya dirancang sedemikian rupa sehingga berubah dari horizontal menjadi vertikal. Setiap scroll menyampaikan banyak fakta menarik tentang keyakinan politik Joey.

02Vincent Saïsset

Ketika Anda mengunjungi situs web Vincent Saïsset, hal pertama yang akan Anda lihat adalah background putih dengan sebuah huruf V berwarna putih yang sangat besar di atasnya. Huruf V tersebut melambangkan inisial senimannya. Terdapat sebuah panah yang mengarah ke bawah untuk mendorong Anda memulai penjelajahan situs webnya. Ketika Anda mulai melakukan scroll, Anda akan melihat sekelompok animasi typeface dengan sebuah interaksi monokromatik. Situs web ini dirancang dengan transisi scroll horizontal dan vertikal. Ia juga memiliki sebuah interaksi mikro yang menyenangkan, yang berada di antara huruf-huruf dan kursornya.

03Home Société

Situs web Home Société menggambarkan semua karya desain interior perusahaan ini dengan luar biasa. Desain situs web ini sangat sederhana, tetapi juga kaya akan elemen grafis, animasi, dan tipografi. Elemen-elemen animasi yang digunakan saling berpotongan dan tumpang tindih satu sama lain secara ritmis. Gambar-gambar yang digunakan sebagai background terus berubah dengan typeface yang menarik perhatian. Bagian terbaik yang membedakannya dari situs web lain adalah scroll horizontal yang dimilikinya; ini menggambarkan sebuah dimensi yang sepenuhnya baru, yang memberikan pengalaman infinite scroll bagi para penggunanya.

04Sally

Perusahaan ini berasal dari New York City dan mereka menyewakan mobil ke Lyft, Via Juno, dan Uber. Situs web Sally ini mungkin terlihat minimalis jika dilihat dari sisi warna dan desain atau keindahan detilnya. Tetapi yang membuat situs web ini menarik adalah model mobil 3D dan tujuh puluh animasi lainnya yang memberikan kesan jika mobil tersebut sedang bergerak. Situs web ini adalah contoh sempurna bagi Anda untuk membuat animasi elemen berbasis scroll, di mana Anda dapat memindahkan modelnya dari satu bagian ke bagian lainnya dengan cara menggerakkan kursor atau hanya dengan melakukan scroll. Semua transisi yang digunakan disesuaikan secara mengesankan, dan tidak terdapat kendala dalam keseluruhan situs web ini.

05Yuto Takahashi

Situs web Yuto Takahashi merupakan sebuah situs web portofolio. Situs web ini merupakan contoh menakjubkan lainnya dari animasi berbasis scroll. Hal pertama yang akan menjadi perhatian adalah sebuah lingkaran berputar yang dibuat dengan tulisan nama artis yang bersangkutan. Selanjutnya, sebuah instruksi akan muncul dan meminta Anda menggunakan mouse untuk mengakses karya seniman tersebut. Typeface yang digunakan adalah Serif yang mengelilingi foto-fotonya. Pada setiap scroll baru yang dilakukan, beberapa jenis animasi liquid dapat terlihat di atas foto-fotonya. Sementara itu, jika Anda mengklik salah satu karya unggulannya, Anda dapat melihat animasi berbasis scroll yang digunakan pada setiap karya tersebut.

06Editorial New

Website Editorial New merupakan sebuah kolaborasi antara Pangram Pangram Foundry dan Locomotive. Typeface dari situs web ini mencerminkan desain di tahun 90-an. Situs webnya dimulai dengan sebuah bagian mirip koran yang terus berputar saat Anda melakukan scroll dan berhenti hingga ia menutupi layar secara menyeluruh. Anda kemudian akan menemukan berbagai typeface yang menunjukkan keserbagunaannya. Anda juga akan menemukan sebuah sampul majalah yang dibuat dengan menggunakan font yang indah. Saat Anda mengklik tombol Randomize, Anda akan mendapati bahwa sampulnya berubah dan menampilkan font dalam berbagai ukuran lain.

07Danilo De Marco

Situs web Danilo De Marco ini merupakan sebuah kolaborasi dengan Studio K95. Situs web ini dikembangkan dengan tujuan untuk mempromosikan semua karya ini. Di situs web ini, animasi berbasis scroll digunakan di beberapa bagian tertentu, tetapi tetap menonjol. Logo beserta font yang digunakan dijadikan animasi melalui cara yang memikat. Penggunaan warna hijau yang cerah tidak akan mengizinkan Anda menjauh dari layarnya. Tipografi yang digunakan sangatlah dominan. Dan jika Anda mengklik salah satu karya unggulannya, Anda akan diarahkan ke halaman yang hanya didedikasikan untuk karya tersebut. Saat melakukan scroll pada foto-foto tersebut, foto-foto itu akan terlihat melayang semakin jauh.

08K24 Moscow

K24 Moscow adalah salah satu situs web yang paling menarik, yang dibangun untuk proyek arsitektur modern. Situs web ini mengingatkan pada semangat suprematisme dan avant-garde Rusia. Animasi berbasis scroll digunakan untuk membuat animasi elemen berbasis scroll dalam keseluruhan presentasi tersebut. Dengan setiap scroll baru yang dilakukan, Anda akan menemukan sesuatu yang baru. Kombinasi bagian warna putih, hitam, dan merah yang bergerak dan tumpang tindih menyertai perubahan ukuran menghasilkan sebuah typeface yang khas. Kombinasi ini menjadikannya sebuah situs web yang menarik sekaligus mempertahankan semangat avant-garde Rusia.

09Green Chameleon

Situs web Green Chameleon dibuat untuk memamerkan semua prestasi dan kenangan berharga mereka dari tahun 2018. Pada bagian awal situs web ini, Anda akan disambut dengan sebuah grafis pengantar, dan kemudian Anda akan mulai menjelajahi situs tersebut. Anda akan merasa seolah-olah telah memasuki sebuah kapsul waktu. Anda akan dapat melihat karya-karya mereka dari bulan ke bulan. Dan ketika Anda mengklik pada proyek tertentu, gambarnya akan ditampilkan tepat di tengah layar Anda. Dengan itu, Anda akan menemukan informasi yang relevan di bawahnya. Warna backgroundnya terus berubah saat menjelajahi sebuah ruang 3D.

10Bewegen

Situs web Bewegen merupakan sebuah etalase animasi, konten yang melimpah, dan interaksi. Bewegen adalah sebuah sistem kelas dunia populer yang dikenal sebagai situs untuk berbagi sepeda. Animasi berbasis scroll dan tangkapan zoom-nya memberikan sebuah tampilan yang mendetil tentang sepeda Bewegen Pedelec yang populer. Ketika Anda melakukan scroll lebih lanjut, Anda akan mendapatkan informasi terkait tentang sistem berbagi sepeda dan juga detail tentang cara menggunakannya. Terdapat juga opsi di mana siapa pun dapat membuat sistem berbagi mereka sendiri hanya dengan memilih kota dan jumlah orang yang akan dimasukkan ke dalam proyek tersebut, sambil memilih warna dan fitur lain dari sepeda yang tersedia.

11Wtower

Situs web Wtower dibuat sebagai sebuah dunia virtual interaktif yang menyampaikan cerita tentang menara air terbesar di dunia di masa lalu, yaitu White Tower yang terletak di Ural. Situs web ini merupakan salah satu situs web penceritaan luar biasa di mana animasi berbasis scroll masuk seperti potongan teka-teki. Scroll yang Anda lakukan akan membawa Anda ke sebuah ruang 3D yang memberikan informasi tentang asal usul menara tersebut dan bagaimana keadaannya saat ini. Anda akan menemukan sebuah progress bar di bagian bawah, dan bar ini muncul setiap kali terdapat sejumlah elemen berguna yang ingin disampaikan. Anda juga dapat memeriksa tentang sejauh mana Anda telah mendengar cerita tersebut dan berapa banyak lagi yang tersisa.

12Parmigiani Fleurier

Situs web Parmigiani Fleurier adalah situs web milik para pembuat jam asal Swiss. Situs web ini juga merupakan contoh Animate On Scroll lainnya yang menakjubkan. Tata letak situs web ini elegan dan berkesan serius. Saat melakukan scroll, Anda dapat menjelajahi seluruh koleksinya dengan menggunakan baris-baris yang terdapat di kedua sisi layar Anda. Setelah menemukan model yang menarik perhatian Anda, Anda dapat melihat informasi detail yang ditampilkan dalam pola asimetris di sekitar jam tangan tersebut. Anda juga akan mengetahui detail lainnya seperti kotak, dial, tali, sistem winding, dan spesifikasi teknis lainnya. Animasi yang digunakan sangat halus dan seimbang.

Bagian ke-3 Kelebihan dan Kekurangan dari 12 Situs Web Ini

Poin-poin Utama dari Artikel Ini