Trentech.id
No Result
View All Result
  • Login
  • Register
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
Trentech.id
No Result
View All Result
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget

Ini Dia 20 Situs Dengan Efek Parallax Untuk Inspirasi

7 August 2018
in Learn
Ini Dia 20 Situs Dengan Efek Parallax Untuk Inspirasi
1.6k
VIEWS

Daftar Isi

  • 1. Femme Fatale
  • 2. Every Last Drop
  • 3. Beer Camp
  • 4. Porsche Volution
  • 5. Spokes
  • 6. Hot Dot
  • 7. Hobolobo
  • 8. Firewatch
  • 9. Nizo App
  • 10. Peugeot
  • 11. Bunkai
  • 12. Melanie Daveid
  • 13. The Boat
  • 14. Dave Gamache
  • 15. Bagigia
  • 16. Walking Dead
  • 17. Seymour Powel
  • 18. Ventac Partner
  • 19. Anton & Irene
  • 20. Putzengel
Berikan rating

Efek Parallax scrolling adalah salah satu fitur yang membuat tampilan sebuah halaman web menjadi lebih hidup. Ada banyak teknik yang bisa dilakukan untuk mengimplementasi fitur ini. Berikut 23 website dengan fitur parallax scrolling terbaik sebagai inspirasi bagi pembaca yang ingin menerapkan fitur ini di webnya masing-masing.

[postingan number=3 tag=”programmer”]

Baca lagi

Curhatan Perempuan IT Satu-Satunya, Pasti Mengalami Derita Ini

7 Keterampilan Yang Harus Dimiliki Programmer Untuk 5-10 Tahun Ke Depan

Gaji Programmer Indonesia: Berapa Seharusnya?

1. Femme Fatale

femmefatale.gif

Femme Fatale adalah creative studio yang fokus pada budaya dan seni. Situsnya memiliki halaman beranimasi yang interaktif yang menarik emosi pengunjung. Saat di scroll ke bawah, latar belakang dan teksnya berubah mengikuti efek parallax.

2. Every Last Drop

everylastdrop.gif

Every Last Drop mengajarkan kita berapa banyak air yang dikonsumsi setaip hari. Desinernya membagi progress bar dengan proporsi yang sama. Saat di scroll ke bawah, kita akan mendapatkan layar yang berbeda dengan animasi efek parallax. Halaman “Universe” juga memiliki efek parallax 3D.

3. Beer Camp

beercamp.gif

Keseluruhan website memiliki lima layer dengan efek parallax scrolling yang berbeda-beda. Efeknya bukan scroll horizontal atau vertikal tapi efek zoomingdan smoothing yang khusus. Saat di scroll setiap layer seperti memperbesar tanpa pemotongan. Warna yang terang dan tipografi yang menarik membuat efek ruang yang luar biasa.

4. Porsche Volution

Porsche volution menampilkan passion untuk mobil dengan fokus pada merk Porsche. Penggunaan musik yang pas dan foto yang menampilkan evolusi Porsche saat melakukan parallax scrolling memberikan pengalaman berseluncur yang sangat menarik. Dibagian kiri layar ada lini masa yang menampilkan tahun-tahun setiap model mobil yang berevolusi saat melakukan scroll.

5. Spokes

Spokes Eclectic Pedicab Rides menawarkan solusi parkir dan transportasi publik yang tidak hanya ramah lingkungan dan terjangkau tapi juga menyenangkan dan unik. Situs ini memiliki gaya kartun dengan efek parallax yang keren. Navigasi di bagian atas juga terintegrasi dengan sempurna dengan elemen latar belakang layar.

6. Hot Dot

Hot Dot sangat berbeda dengan contoh lain di atas, ia menampilkan horizontal scroll. Saat kita melakukan scroll, halamannya pindah dari kiri ke kanan dengan efek parallax 3D yang halus. Situs ini juga bisa menjadi contoh situs yang responsif dengan desain mobile-first.

[postingan number=3 tag=”belajar-koding”]

7. Hobolobo

Situs ini juga agak berbeda dengan efek horizontal parallax-nya. Ia juga bekerja dengan baik di perangkat berlayar sentuh. Saat di slide, halaman web bergerak dari kiri ke kanan yang menampilkan sebuah cerita. Ada daftar halaman dibagian atas layar yang akan ikut bergerak saat kita melakukan scroll.

8. Firewatch

firewatch.gif

Situs ini memiliki 6 layar yang bergerak untuk memberikan kesan mendalam. Efek parallax hanya diterapkan di halaman pertama.

9. Nizo App

nizo.gif

Saat kita melakukan scroll, semua elemen UI agar bergerak bersama ke tengah layar secara serentak. Apabila scroll-nya di balik, semua elemen akan kembali ketempat awal dari tengah layar.

10. Peugeot

 

Peugeot menampilkan sebuah cerita dalam bentuk komik saat di scroll ke bawah. Ceritanya sangat cocok dengan gabungan efek parallax vertikal dan horizontal.

11. Bunkai

Bunkai adalah situs Jepang. Saat di scroll ke bawah, ada gambar seorang gadis kartun yang bergerak di layar menampilkan informasi yang berbeda-beda.

12. Melanie Daveid

Efek parallax yang keren dan kaya akan nilai seni bisa kita lihat di situs Melanie Daveid. Situs ini dibagi menjadi dua bagian, bagian sebelah kiri adalah bagian navigasi, dan bagian kawan berisi detail. Keduanya akan saling bergerak sesuai dengan posisi saat di scroll. Selain itu, dibagian bawah, ada animasi tangan parallax yang ikut bergerak saat di scroll.

13. The Boat

The Boat merupakan sebuah situs web yang berisi animasi dan gambar yang menceritakan sebuah kisah bertahan hidup saat terjadi badai di dalam sebuah kapal. Di bagian sebelah kanan terdapat navigasi yang terdiri dari 6 bab, efek parallax-nya memberikan suasana yang mencekam ditambah efek suara seakan-akan kita ada di dalam cerita itu.

14. Dave Gamache

Merupakan situs demo efek parallax yang komponen di dalamnya di desain menghilang dengan efek fade in dan fade out saat di scroll.

15. Bagigia

Saat melakukan scroll, efek prallax memutar sebuah gambar tas untuk membawa botol air panas di musim dingin. Efek itu juga menampilkan fitur-fitur yang dimiliki oleh tas botol tersebut. Ada dua elemen navigasi yaitu element dotyang ada di kanan layar dan ritsleting di bagian bawah layar.

16. Walking Dead

Mini drama tentang zombie yang diceritakan lewat halaman-halaman web. Lakukan scroll dan pembaca akan melihat para zombie berkeliaran di layar. Keseluruhan cerita bisa di otomatiskan dengan efek parallax horizontal. Animasinya juga memiliki musik latar yang sangat bagus.

17. Seymour Powel

Situs ini menampilkan setiap efek parallax dengan harus. Satu layer memiliki satu gambar dan warna latar yang akan tampil sesuai dengan teks yang ditampilkan.

18. Ventac Partner

Ventac Partner memberikan efek fade in dan fade out yang bagus saat melakukan scroll. Efeknya tidak berlebihan tapi cukup untuk memberikan sebuah pengalaman yang menarik.

19. Anton & Irene

Anton dan Irene memiliki color scheme yang sangat padu dengan antarmuka yang hangat dan rapi. Saat di scroll ke bawah, layar yang tampil akan bergerak kesamping untuk memberikan ruang bagi informasi yang akan ditampilkan. Pemilihan tipografi yang pas juga membuat situs ini menjadi lebih baik. Sst, coba arahkan kursor ke bagian kepala Anton dan Irene, kita bisa melihat foto mereka berubah.

[postingan number=3 tag=”hacker”]

20. Putzengel

Ada 6 lapisan di sebuah baris saat melakukan scroll. Setiap lapisan memiliki gambar yang unik dimana ia menampilkan kegiatan sehari-hari. Setiap lapisan juga memliki warna yang berbeda-beda sesuai topiknya seperti retro, pop art style. [cp/ap]

Tags: belajar webbikin webefek parallaxparallaxprogrammerprogrammingwebsite
Previous Post

Grab Bangun Laboratorium AI bersama National University of Singapore (NUS)

Next Post

Ini Dia Referensi Belajar Framework VueJS

Related Posts

Curhatan Perempuan IT Satu-Satunya, Pasti Mengalami Derita Ini

Curhatan Perempuan IT Satu-Satunya, Pasti Mengalami Derita Ini

11 September 2023
1.6k

Kamu perempuan dan anak IT pasti sudah tidak asing hidup dengan dikelilingi banyak laki-laki baik itu di dunia pekerjaan, perkuliahan...

Ini Dia Tips Memulai Pemrograman dengan Python

Ini Dia Tips Memulai Pemrograman dengan Python

29 August 2023
1.4k

Python merupakan salah satu bahasa pemrograman yang populer di dunia kerja Indonesia. Selain itu di ranah akademik pun banyak akademisi...

Manfaat Belajar Bahasa Pemrograman untuk Kehidupan

7 Keterampilan Yang Harus Dimiliki Programmer Untuk 5-10 Tahun Ke Depan

29 August 2023
1.8k

Waktu terus berjalan, begitulah kehidupan. Kita sebagai programmer selalu dituntut untuk mengembangkan keterampilan di saat perkembangan industri TI terus berkembang...

Terpopuler

  • fitur flipper zero

    Apa Saja Fitur Flipper Zero?

    333 shares
    Share 133 Tweet 83
  • 8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    1334 shares
    Share 533 Tweet 333
  • Saham Kapal Induk: Apa Itu dan Apa Keuntungannya?

    314 shares
    Share 126 Tweet 79
  • Cara Membeli Flipper Zero Indonesia

    111 shares
    Share 44 Tweet 28
  • Kumpulan Materi Kuliah Jurusan Teknik Informatika dan Ilmu Komputer

    462 shares
    Share 185 Tweet 116
  • Branding dan Marketing Mana Yang Lebih Penting?

    133 shares
    Share 53 Tweet 33
  • Belanja Online 101: Serba-Serbi Jasa Pengiriman Barang

    118 shares
    Share 47 Tweet 30
  • Pengertian Valuasi Startup dan Cara Hitungnya pada Tahap Awal Bisnis

    176 shares
    Share 70 Tweet 44
  • Ternyata Beginilah Cara Kerja Powerbank

    214 shares
    Share 85 Tweet 53
  • Cara Remote Flipper Zero: Mengendalikan Perangkat dengan Mudah

    120 shares
    Share 48 Tweet 30

About . Contact . Partnership . Google News

Trentech.id adalah situs yang menyajikan konten tentang startup, bisnis, game, event, hingga informasi pekerjaan. Trentech berusaha memberikan konten yang berkualitas untuk para pembacanya agar dapat menjadi rujukan utama mengenai dunia teknologi pada khususnya. Tim trentech terdiri dari orang – orang yang berkompeten dibidangnya, dan akan selalu mendukung karya – karya terbaik anak bangsa dengan memberikan kesempatan seluas-luasnya untuk para startup agar dapat publish karyanya di trentech.

Trentech ID

  • About
  • Contact
  • Partnership
  • Panduan Penulis
  • Privacy Policy
  • Sitemap

Tools

  • Harga Crypto Terbaru
  • Cek Ongkir
  • Cek Resi
  • Cek Domain
  • Login
  • Sign Up
About . Contact . Partnership . Google News

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Sign Up with Facebook
Sign Up with Google
OR

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In