Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Parallax Scrolling
Webdesign

Membuat Website Scrolling Parallax Menggunakan Stellar.js

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Salah satu tren terbesar dalam desain web modern saat ini adalah penggunaan efek scrolling parallax.  Dalam tutorial ini saya akan menunjukkan bagaimana anda dapat membuat efek di situs anda sendiri, dengan sedikit imajinasi dan sedikit bantuan dari Stellar.js.


Pengantar

Efek scrolling parallax telah populer sejak situs seperti Nike's Better World memperkenalkannya di situs web mereka beberapa tahun yang lalu. Efek paralaks berkaitan dengan antarmuka telah ada sejak tahun 1980an saat pertama kali digunakan dalam judul video game dan kemudian dalam game itu sendiri. Baru-baru ini, efek paralaks mulai membuat tampilan di antarmuka web - anda akan terbiasa dengan silverbackapp yang menggunakan efek sebagai bagian dari header.

Bila dikombinasikan dengan fungsionalitas bergulir dari situs web, efek parallax scrolling dapat memiliki dampak visual yang kuat, terutama bila dikombinasikan dengan beberapa bentuk cerita yang membawa anda dalam perjalanan.


Para ... apa?

Parallax adalah perpindahan atau perbedaan dalam posisi jelas dari suatu objek yang dilihat di sepanjang dua garis pandang yang berbeda. - Wikipedia

Jadi apa sebenarnya efek parallax itu? Yah itu mungkin salah satu hal yang klien anda lihat saat mereka secara membabi buta mengatakan "Saya ingin situs saya HTML5". Setiap kali klien meminta saya untuk situs "HTML5", saya harus bertanya secara spesifik bagaimana mereka menafsirkan makna HTML5 - pada saat itu, sepertinya kata kunci yang klien katakan kepada saya tanpa benar-benar mengerti artinya.

Jadi apakah itu HTML5? Tentu HTML5 memang memiliki peran untuk dimainkan dalam efek parallax scrolling namun lebih dari HTML5, ia uga menggunakan beberapa bentuk javascript, seperti jQuery, dan tidak akan mungkin terjadi tanpa sedikit CSS3.

Kata parallax sebenarnya berasal dari bahasa Yunani παραλλαξη (paralaksis) yang berarti perubahan. Benda yang lebih dekat ke mata memiliki paralaks lebih besar daripada benda yang berada di kejauhan. Hal ini berarti benda yang lebih dekat dengan kita bisa nampak bergerak lebih cepat dari objek di latar belakang.

Melapisi beberapa latar belakang dan objek (seperti gambar) dan kemudian membiarkannya bergerak dengan kecepatan yang berbeda akan menciptakan sensasi kedalaman dan dimensi.


Parallax dalam Aksi

Lihatlah beberapa contoh yang menunjukkan efek parallax.

Saucony
Lois Jeans
Nike Jump man
Bomb girls
Tokiolab
Intacto

Setiap Website Menceritakan Sebuah Cerita

Contoh di atas semua membawa anda pada beberapa bentuk perjalanan atau cerita, dan mereka melakukannya dengan berbagai cara yang berbeda. Menurut saya, hal inilah yang membuat situs parallax scrolling sukses. Kunci untuk membuatnya menarik dan unik adalah dengan memusatkan perhatian pada cerita dan konsep yang bagus, kemudian gunakan efeknya dalam cara kreatif dan imajinatif.

Wieden+Kennedy (W&K), orang-orang di belakang Nike Better World Website mendukung ini:

Menurut kami, teknologi tidak bergantung pada konsep. Fokus utama kami adalah menciptakan pengalaman mendongeng interaktif yang hebat. - Wieden+Kennedy (W&K)


Bagaimana Situs kami Akan Bekerja

Untuk menunjukkan satu cara menerapkan parallax scrolling ke situs web anda, saya memilih untuk menampilkan empat situs slide sederhana yang menggunakan efek pada latar belakang dan gambar yang berbeda. Saya juga menambahkan navigasi di sudut kiri yang akan menggulir ke slide tertentu di situs dan juga akan mengubah ukuran untuk mencerminkan jumlah slide aktif. Saya juga menggunakan font web Bebas, meski anda bebas menggunakan yang lain jika anda mau.

Begini cara struktur folder kami akan muncul:

parallax website folder structure

Plugin yang Digunakan

Stellar.js

Untuk membantu saya mencapai ini, saya menggunakan Stellar.js, plugin jquery karya Mark Dalgleish yang memudahkan pembuatan situs parallax scrolling. Ada plugin lain yang tersedia untuk membantu anda melakukan ini yang telah saya cantumkan di bagian bawah artikel ini. Saya telah memilih untuk menggunakan Stellar.js karena cukup mudah untuk diterapkan dan, walaupun tidak ditunjukkan selama tutorial ini, ia dapat dioptimalkan untuk bekerja pada platform perangkat cerdas seperti iOS.

Waypoints.js

Saya juga akan menggunakan jQuery waypoints karya Caleb Troughton. Waypoints adalah plugin jQuery lain yang menjalankan fungsi setiap kali anda menggulir ke elemen. Hal ini memungkinkan navigasi di situs untuk menyoroti slide yang kita gunakan sesuai dengan posisi scrollbar.

jQuery Easing

jQuery easing adalah plugin dari GSGD yang menawarkan opsi pelonggaran lanjutan. Kami akan menggunakan ini untuk menambahkan gerakan pelonggaran yang bagus saat beralih dari slide ke slide.


Markup HTML

Untuk memulai index.html kami, kami menambahkan HTML5 doctype dan kemudian membuat bagian kepala.  Kegiatan ini terdiri dari CSS Reset diikuti oleh style sheet 'styles.css' kami. Kami kemudian menambahkan perpustakaan jQuery yang diikuti oleh file jQuery kustom kami 'js.js'. Kemudian diikuti oleh tiga plugin, 'jquery.stellar.min.js', 'waypoints.min.jsquery.easing.1.3.js'.

Unsur berikutnya dalam html kami adalah gambar logo Envato yang tetap berada dalam posisi tetap konstan di seluruh situs. Oleh karenanya, kami menambahkan sebuah kelas 'envatologo' sehingga kami bisa mengatur posisinya nanti saat kami mengkodekan CSS.

Slide

Keempat slide menggunakan markup yang sama:

Kami menggunakan kelas 'slide' yang akan digunakan sebagai gaya umum untuk semua slide. Setiap slide kemudian diberi id 'slide' diikuti oleh nomor slide yaitu 'Slide1'. Kami menggunakan atribut data HTML5 dan menamakannya 'data-slide'. Hal ini akan memungkinkan kami untuk menargetkan menggunakan jQuery. Atribut data lain dari 'data-stellar-background-ratio' juga ditambahkan. Ini khusus untuk plugin jQuery stellar.js dan menunjukkan plugin dengan rasio berapa kecepatan eleme seharusnya digulir.

Rasio ini relatif terhadap kecepatan gulir alami, sehingga rasio 0,5 akan menyebabkan elemen bergulir pada setengah kecepatan, rasio 1 tidak akan berpengaruh, dan rasio 2 akan menyebabkan elemen bergulir dua kali lebih cepat.

Semua slide kecuali slide empat memiliki tombol yang memungkinkan kita untuk menggulir ke slide berikutnya. Untuk ini, kami menambahkan atribut 'data-slide' dengan nilai dari nomor slide berikutnya. Jadi tombolnya tahu apa slide berikutnya sehingga kita bisa melewati nilai ini ke jQuery. Sebagian besar slide juga memiliki rentang dengan kelas 'slideno'; Cukup versi teks besar nomor slide yang muncul di pojok kiri bawah dari sebagian besar slide. Ia juga bisa digunakan untuk judul.

Pada slide tiga dan empat, kami juga menambahkan beberapa elemen gambar ke div 'slide'. Gambar-gambar ini akan memberikan wawasan nyata tentang efek parallax yang sedang kami ciptakan. Kami membungkusnya di dalam div 'wrapper' yang akan terpusat dan lebar '960px', Hal ini hanya untuk memastikan tampilan menjadi OK di semua ukuran monitor desktop.

Setiap gambar memiliki atribut 'data-stellar-ratio' yang menyertainya. Lagi, ia adalah spesifik stellar.js dan ia memberi tahu plugin pada rasio kecepatan berapa kita harus bergulir ke elemennya.


CSS

Beruntung bagi kita tidak terlalu banyak terlibat dengan CSS. Pada dasarnya, ia menata beberapa elemen sederhana, namun sebagian besar untuk memposisikan beberapa elemen gambar.

Hal pertama yang perlu kami lakukan dengan CSS kami adalah membawa font BEBAS menggunakan @ font-face. Kami kemudian menambahkannya ke html untuk mengatur font untuk situs. Kami juga mengatur lebar dan tinggi html dan body menjadi 100%. Hal ni akan memungkinkan slide kami untuk mengadopsi lebar dan tinggi penuh layar pengguna.

Navigasi

Navigasi utama diberi posisi 'tetap' agar tetap di tempat yang sama di seluruh situs. Kami mengimbangi 20px ini dari atas untuk memberi sedikit ruang di atasnya dan menetapkan z-index menjadi 1 untuk memastikan bahwa ia ada di lapisan atas situs ini.

Daftar sebenarnya hanyalah penataan teks dengan batas di bagian bawah untuk bertindak sebagai garis bawah. Ia memiliki lebar 53px. Transisi juga ditambahkan sehingga ia menjiwai dari keadaan standarnya ke keadaan hover. Saya telah menggunakan -webkit- prefix di sini hanya untuk menjaga agar kode tetap pendek, namun kode sumber lengkap yang dapat diunduh di atas berisi semua awalan vendor.

Status hover juga menggunakan properti yang sama dengan kelas 'active'; pada dasarnya hanya peningkatan ukuran font dan lebar. Kelas 'active' digunakan oleh jQuery untuk memberi style pada slide yang relevan yang dilihat dari jendela browser.

Logo envato diberikan beberapa gaya penentuan posisi hanya untuk memastikan ia tetap berada di tengah layar. Begitu pula dengan navigasi, ia juga diberi z-index '1' untuk memastikan tetap di atas.

Sekarang kita beralih ke styling slide-slide sebenarnya. Kami memberi mereka properti lampiran-latar belakang 'tetap'. Properti lampiran latar belakang menentukan apakah gambar latar belakang diperbaiki atau digulirkan dengan sisa halaman, jadi ia berguna untuk gambar latar belakang (seperti yang digunakan pada slide empat). Untuk contoh ini, kami telah menggunakan wallpaper karya Philipp Seiffert yang bisa didownload disini. Kami mengatur posisi slide menjadi 'relatif'. Jadi, kita benar-benar dapat memposisikan kelas ‘slideno’ dan ‘button’ terhadap slide tersebut sebagai pengganti dokumen sebenarnya.

Shadow kotak murni digunakan untuk tujuan dekorasi dan menambahkan bayangan jepret yang bagus ke bagian atas dari setiap slide.

.button untuk tombol di bagian bawah halaman yang memungkinkan kita maju ke slide berikutnya. Kami telah memposisikannya di bagian bawah setiap slide dan telah menggunakan gambar panah sebagai indikatornya.

Styling untuk setiap slide individu relatif sederhana dan mengikuti pola yang sama di setiap waktu. Slide satu memiliki warna latar belakang '# 5c9900'. Slide dua juga memiliki kumpulan warna latar belakang diatasnya.  Slide dua juga berisi gambar dan kita bisa menargetkan masing-masing dengan menggunakan CSS Selector nth-child(n). Selektor ini bisa digambarkan sebagai

Elemen-elemen pseudo-class ini sesuai dengan posisi mereka dalam daftar elemen elemen induk dari elemen-elemen anak.

Jadi, pada dasarnya, kami menata setiap gambar sesuai urutannya di markup kami. Kami hanya memposisikan mereka relatif terhadap pembungkus slide.

Slide tiga mengikuti setelan yang sama seperti slide dua.

Slide empat sedikit berbeda dari dua slide sebelumnya karena tidak mengandung elemen gambar atau warna latar belakang, namun ia menggunakan gambar latar belakang. Kami juga memberikannya properti CSS3 'background-size: cover'. Hal ini pada dasarnya berguna untuk mengatur gambar latar untuk menutupi keseluruhan jendela browser dan akan mengubah ukuran saat jendela browser diubah ukurannya. Kami juga telah menambahkan satu baris teks pada slide terakhir yang telah kami beri gaya dan diberi kelas 'parallaxbg'


jQuery

JQuery merupakan tempat di mana hal ini mulai hidup kembali. Saya telah memberikan ulasan mengenai kode sehingga anda dapat melihat apa yang sebenarnya terjadi.


Hanya Beberapa Poin

Create a Parallax Scrolling Website using Stellarjs envato

Jika anda melihat slide dua dari contoh kami, anda akan melihat gelembung 3D. Saya telah menambahkan sedikit gaussian blur pada beberapa hal ini, terutama pada latar depan dan latar belakang. Menggabungkan ini dengan gelembung terfokus yang menyolok menambah rasa kedalaman yang diciptakan oleh parallax. Hal ini merupakan sesuatu yang mungkin harus anda pertimbangkan saat mencoba mendapatkan kedalaman yang baik ke situs anda.

Banyak sekali situs yang memanfaatkan efek ini cenderung menggunakan gambar cukup berat, pastikan anda mengkompres gambar sebanyak yang anda bisa (tanpa mengorbankan kualitas).  Jika setelah kompresi masih butuh waktu cukup lama untuk memuat,  maka pertimbangkan untuk menambahkan loader ke situs anda.


Kesimpulan

Parallax scrolling adalah salah satu efek yang paling dicintai baru-baru ini dan Orang-orang terus-menerus mendorong batas-batasnya dengan itu. Di sini, hari ini, saya telah menunjukkan kepadaanda bagaimana mempersiapkan sebuah situs dasar yang menggunakan parallax scrolling. Demo yang saya tunjukkan hari ini adalah situs yang relatif sederhana untuk tujuan pembelajaran. Bagi anda yang hendak membuat situs dengan menggunakan efek ini maka saya meminta anda untuk meluangkan waktu pada konsep dan cerita karena hal inilah yang membuat mereka unik, mudah dibagikan dan memang menyenangkan untuk dijelajahi. Ini semua tentang bagaimana anda bisa memanfaatkan efek dengan bijak dan bukan hanya menggunakannya demi kepentingan menggunakannya.

Saya harap anda menikmati membaca parallax scrolling dan saya ingin melihat bagaimana anda memanfaatkannya di situs anda sendiri, jangan ragu untuk meninggalkan tautan di bawah ini. Sampai Lain waktu!


Bacaan dan Sumber Daya lebih lanjut

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.