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.5k
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

Gaji Programmer Indonesia: Berapa Seharusnya?

Rekomendasi Film untuk Programmer, Menelusuri Dunia Programmer Melalui Film

Inilah Alasan Mengapa Seorang Programmer Jangan Terlalu Lama Duduk

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

Trentech.id

Trentech.id

Tren Teknologi Indonesia

Related Posts

gaji programmer

Gaji Programmer Indonesia: Berapa Seharusnya?

11 March 2023
1.4k

Gaji programmer di Indonesia menjadi topik yang sering dibicarakan, terutama di kalangan para profesional di bidang teknologi informasi. Seiring dengan...

rekomenasi film untuk programmer | the social network

Rekomendasi Film untuk Programmer, Menelusuri Dunia Programmer Melalui Film

19 February 2023
1.4k

Programmer memainkan peran penting dalam dunia teknologi saat ini. Mereka menjadi tangan dan pikiran yang menciptakan produk digital dan membuatnya...

coding sambil berdiri

Inilah Alasan Mengapa Seorang Programmer Jangan Terlalu Lama Duduk

19 April 2022
1.5k

Kemampuan untuk berpikir kreatif merupakan salah satu kemampuan yang harus dimiliki oleh programmer manapun. Dengan memiliki kemampuan ini, sang programmer...

Login
Please login to comment
0 Comments
Inline Feedbacks
View all comments

Terpopuler

  • contoh pitch deck

    8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    1011 shares
    Share 404 Tweet 253
  • Kumpulan Materi Kuliah Jurusan Teknik Informatika dan Ilmu Komputer

    354 shares
    Share 142 Tweet 89
  • Mengenal Lean Product Development dan Berbagai Keunggulannya

    139 shares
    Share 56 Tweet 35
  • Yuk Ketahui Sejarah Perkembangan Aplikasi Chat di Seluruh Dunia

    153 shares
    Share 61 Tweet 38
  • Ternyata Beginilah Cara Kerja Powerbank

    172 shares
    Share 68 Tweet 43
  • Inilah 15 Skin Paling Keren di Mobile Legends

    171 shares
    Share 68 Tweet 43
  • Google Buat Email Lebih Dinamis Dengan AMP Untuk Email

    138 shares
    Share 55 Tweet 35
  • Bekerja di Bidang Otomotif, Menjanjikan Penghasilan Besar! Berminat?

    139 shares
    Share 56 Tweet 35
  • Inilah 5 Hacker Indonesia Level Dewa yang Diakui dan Ditakuti Dunia

    163 shares
    Share 65 Tweet 41
  • Apa Itu Bisnis Model Kanvas dan Pentingnya untuk Sebuah Startup?

    130 shares
    Share 52 Tweet 33

About . Contact . Partnership

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

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
wpDiscuz