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

Jazz up sebuah Halaman Web Statis dengan Paralaks yang halus

by
Difficulty:IntermediateLength:LongLanguages:

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

Ini adalah salah satu desain web terbesar buzz words untuk sementara waktu ini, jadi hari ini kita akan mencoba sedikit Paralaks. Kami akan menyusun tata letak responsif yang sederhana, lalu dengan bantuan skrollr.js, kami akan menerapkan efek paralaks yang halus ke tajuk.

1. Proyek kami

Tutorial ini akan membahas beberapa aspek penting, jadi perhatikan:

  • Pertama, kita akan menggunakan mobile-first fluid adaptation dari kerangka boilerplate.
  • Kita perlu mengambil gambar, saya akan menggunakan morning coffee dari Photodune.net.
  • Kami akan mengambil salinan Alexander Prinzhorn's skrollr.js untuk membantu efek paralaks kita.
  • Untuk mengoptimalkan CSS saya, saya akan menggunakan alur kerja Sass. Jangan panik! Saya tidak akan benar-benar menggunakan syntax Sass untuk dibicarakan, hanya mengkompilasi semua stylesheet saya, memberi saya satu file CSS kecil yang diminimalkan. Jika Anda tidak ingin mengikuti aspek tutorial itu, jangan khawatir, Anda bisa menggunakan pendekatan apa pun yang sesuai dengan Anda. Namun, jika Anda belum bermain dengan Sass, lihat ini sebagai kesempatan sempurna untuk memulai tanpa benar-benar menggunakan Sass (jika itu masuk akal..)

2. Files 'n' Folders

Baiklah kalau begitu! Mari kita memulai proyek kita dengan beberapa file bare bones. Inilah yang harus Anda mulai dengan:

Index.html kita kosong saat ini, maka kita memiliki direktori img dengan gambar kopi kita di dalamnya, direktori css dengan file reset ditambah fluid grid kita dan styles.css yang kosong, dengan sabar menunggu masukan kita. Terakhir, kita memiliki direktori js dengan file skrollr.js yang diunduh dari GitHub.

3. Fleshing Out the Bones

Index.html kami akan dimulai dengan beberapa elemen yang umum digunakan:

Saya tidak akan membuat Anda bosan dengan semua potongan ini, namun perlu dicatat bahwa viewport meta tag ada, kami telah memberi judul sebuah dokumen (tidak masuk akal), terkait dengan beberapa favicon - dan kami telah menunjuk ke Hanya satu file css: styles.css.

4. Mashing CSS Kita Bersama

Satu stylesheet kecil untuk mengatur semuanya.

Ketika saya pertama kali berbicara tentang file dan folder, saya sebutkan tiga stylesheet; Normalize.css (untuk mengatur ulang gaya kita secara bertanggung jawab), fluid_skeleton.css (yang telah saya menyesuaikan diri dari skeleton boilerplate) dan styles.css yang sebenarnya. Jadi mengapa kita hanya terhubung dengan satu di file HTML kita?

Nah, kita akan menggunakan ini sebagai pengantar Sass - tanpa benar-benar menggunakan Sass.

Dengan menggunakan ekstensi file .scss, bukan .css, kita dapat menarik semuanya ke dalam satu file dan memperkecil keseluruhannya. Mulailah dengan mengganti nama file CSS seperti:

  • normalize.css → _normalize.scss
  • fluid_skeleton.css → _fluid_skeleton.scss
  • styles.css → styles.scss

Itu mudah kan? Perhatikan garis bawah pada dua yang pertama, yang mencegah file-file itu dikompilasi menjadi setara css mereka sendiri. Sebagai gantinya, kami akan mengimpornya ke dalam styles.scss kami, sama seperti kami menggunakan aturan normal css @import rule:

Sekarang ketika kita mengkompilasi, kita akan diberikan sebuah file styles.css yang dibangun dari semua aturan dalam file .scss kita. Kami hanya perlu menyebarkan file tunggal ini ke server web kami, menyimpan dua permintaan situs kami dan beberapa Kbs. Kerja bagus :)

Kompilasi Sass

Agar benar-benar mengkompilasi file seperti yang dijelaskan di atas, kita memerlukan aplikasi kompilasi (kecuali jika Anda suka menggunakan command line?). Ada beberapa aplikasi yang akan melakukan pekerjaan untuk Anda, saya menggunakan CodeKit (karena sangat mengagumkan) namun CompassApp akan melayani Anda dengan baik, dan ini tersedia di Windows.

Menyiapkan proyek kita semudah menyeret folder proyek ke dalam compiler. CodeKit sekarang melihat semua file dalam folder itu. Setiap kali saya menekan "save", tidak peduli file SCSS yang sedang saya edit, CodeKit akan mengkompilasi ulang semua potongan, mengaduk-aduk CSS yang diperbarui dan, jika halaman kita terbuka di browser, membukanya ulang juga untuk kita.

Bahkan jika Anda belum siap untuk melihat lebih jauh ke dalam Sass, ini adalah alur kerja yang ideal.

5. Sedikit Lebih Banyak Konten

Sekarang mari kita isi file index.html, setelah itu kita bisa memulai dengan styling. Seperti disebutkan, saya menggunakan fluid_skeleton.css sebagai dasar untuk grid responsif. Ini adalah dasar yang bagus dan tidak rumit untuk memulai tata letak sederhana. Yang dibutuhkan adalah kita menggunakan struktur grid untuk membangun latar belakang kita.

Kita membutuhkan:

  • Band div - yang akan meregangkan lebar penuh layar.
  • Dalam masing-masing, kita membutuhkan .container div - yang menampung semua kolom grid.
  • Kemudian .column divs, masing-masing memiliki kelas kedua tergantung lebar. .eight misalnya, berjumlah enam belas secara keseluruhan.

Sebagai contoh, kita bisa membangun latar belakang empat kolom dengan cepat seperti:

Stylesheet menentukan bahwa divs ini semua 100% lebar, ditumpuk rapi satu sama lain, sampai area pandang mencapai 767 piksel. Pada saat itu semuanya bergeser dan keempat kolom ini akan menyebar ke seluruh layar seperti pada umumnya.

Quick wireframe ini akan memberi gambaran tentang bagaimana kita akan menyusun structural markup kita.

Dan jika Anda setelah copy/paste cepat, ini akan membantu Anda:

Untuk informasi lebih lanjut tentang bagaimana Skeleton disatukan, lihat Building a Responsive Layout With Skeleton: Starting Out.

6. Teks Pengisi

Selalu lebih mudah untuk melihat apa yang Anda lakukan saat Anda memiliki sedikit teks contoh untuk digunakan, jadi buat judul dan tautan ke wilayah header di bagian atas:

Kemudian, ubah perhatian Anda ke kolom dan footer. Saya telah menyambar isi teks pengisi dari T'Lipsum "Generator Lorem Ipsum Yorkshire untuk Orang Yorkshire" (karena saya adalah seorang Yorkshireman yang bangga) coba kalahkan itu!

Untuk memberi gambaran, badan utama (area dua belas kolom kami) dimulai seperti ini:

Tempelkan beberapa tautan di footer dan kita selesai di sini!

7. Memulai Styling

Sebelum melangkah lebih jauh, saya ingin mengambil beberapa huruf. Pergilah ke Google Web Fonts dan lihatlah di PT Sans dan PT Serif. Mereka adalah dua yang terbaik, jadi tambahkan keduanya ke koleksi Anda dan kumpulkan tautan stylesheet.

Untuk menghemat waktu, inilah tautan yang saya berikan, setelah memilih versi masing-masing 400 dan 700 bobotnya:

Anda dapat menyisipkan ini di other imports kita yang lain dalam styles.scss. Saat dikompilasi, isi dari file CSS ini tidak akan benar-benar diseret ke CSS minified kita, namun @import rule akan tetap ada dan hurufnya akan digunakan sama saja.

Sekarang saya akan mengatur PT Sans sebagai huruf dasar kami, menetapkan ukuran huruf menjadi 100% dari default browser, dengan tinggi garis di 1.5em:

8. Mengambil Styling Selanjutnya

Sebagian besar styling yang kami terapkan ke halaman ini cukup umum. Warna dan ukuran untuk tipografi, padding pada band dan sebagainya. Tarik file sumber terpisah dan Anda akan menemukan isi styles.scss self-explanatory.

Namun, mari fokus sebentar di area header. Dalam keadaan mobile-first, kami ingin memberikannya latar belakang cokelat. Hanya satu viewport lebih besar yang akan kita bawa kedalam kopi (untuk cadangan pengguna bandwidth ponsel). Inilah styles untuk header band terlihat seperti sekarang:

Padding atas dan bawah telah diterapkan sebagai persentase dari lebar browser. Ini berarti bahwa area header tumbuh setinggi jendela browser yang mengembang. Ini efek yang cukup bagus dan tetap melipat (dimanapun hari ini) sebanding dengan ukuran jendela browser.

Sekarang mari kita style judul yang kita miliki di dalamnya.

Kami akan menggunakan serif variant dari PT untuk judul kita, yang pas dengan body copy yang ada di sans.

Terakhir, kita akan style jangkar kita untuk membuatnya menonjol:

Hal-hal yang langsung, semua berbasis em untuk memastikannya dapat tumbuh dan menyusut jika dibutuhkan - dan jika Anda benar-benar akan dengan sepenuhnya menggunakan Sass, Anda bisa membuat semuanya bergaya bahkan lebih ramping! Untuk saat ini, inilah yang seharusnya Anda miliki:

9. Lempar kedalam Media Query

Setelah membangun pengalaman seluler dasar kita, mari sekarang menghiasi hal-hal untuk layar yang lebih besar. Bagaimana Anda memilih untuk mengatur kueri media Anda terserah Anda, tapi karena ini adalah stylesheet yang cukup rumit, saya hanya akan menumpuk semua peraturan ekstra saya ke dalam satu kueri media di akhir style.scss.

Mari tambahkan beberapa aturan yang akan memberikan layar yang lebih besar dari 767 piksel. Breakpoint ini hampir selalu berubah-rubah dan kebetulan sesuai dengan desain saat pertama kali saya membangunnya. Apa cara yang lebih baik untuk memilih breakpoint ?!

Sebenarnya tidak banyak styles yang ditambahkan di sini, kami hanya ingin meningkatkan ukuran huruf yang digunakan di seluruh dokumen, membuat tombol kami sedikit lebih menonjol dan menambahkan gambar latar ke area header:

Pada layar yang lebih besar kita sekarang harus memiliki sesuatu seperti ..

10. Memperkenalkan skrollr.js

Saat ini, ketika Anda menggulir ke bawah halaman, header kita akan hilang dari pandangan sebanyak yang Anda bayangkan. Sekarang mari kita sampai pada dasar keseluruhan latihan ini; Paralaks. Anda seharusnya sudah mengunduh skrollr.js dari GitHub dan meletakkannya di folder js.

Selanjutnya, kita perlu referensi di html kita, jadi letakkan tautan ini di bagian bawah, sebelum tag penutup </body>.

Ini adalah sudah ada di JavaScript vanili, jadi kami tidak perlu lagi menarik jQuery. Selanjutnya, kita perlu memanggil skrollr, yang kita sukai:

Ada beberapa pilihan yang bisa kita mainkan, yang kesemuanya memiliki pengaturan yang bisa kita lemparkan di antara kurung kurawal itu, tapi untuk saat ini kita akan biarkan seperti apa adanya.

11. Mengubah Markup

Pada tahap perkembangan saat ini, skroll mengharuskan kita untuk memotong markup kita sedikit, menambahkan peraturan yang sesuai untuk elemen kita. Pembuat Skrollr, Alexander Prinzhorn, sibuk dengan sebuah proyek yang memisahkan style dari markup, tapi masih dalam proses.

Bagaimanapun, saya membuatnya terdengar lebih buruk dari itu, kami hanya perlu menambahkan styling keyframe kita ke atribut data pada elemen yang kita targetkan. Sebagai contoh, mari kita pindahkan posisi gambar latar belakang header kita, tergantung pada posisi scrollbar.

Kami menambahkan styling keyframe pertama kita seperti:

Skrollr menggunakan data- dan kemudian nilai yang mewakili posisi piksel scrollbar. Kita  kemudian menambahkan beberapa styling seperti yang akan kita lakukan dengan CSS. Kita \ baru saja menentukan bahwa saat scrollbar ada di 0px (bagian atas halaman) kami menginginkan background-position elemen ini menjadi 0px 0px.

Kita kemudian bisa menambahkan keyframe lainnya yang kita suka, jadi mari kita buang atribut data lain, langsung setelah yang pertama.

Ini kemudian dikatakan; Bila scrollbar telah bergerak turun 500px, kita ingin background-position menjadi 0px -250px (misal: 250px ke atas). Skrollr akan menghidupkan proses antara kedua keyframes ini, jadi kita mendapatkan transisi yang mulus.

Bingo! Efek parallaks pertama kita.

12. Efek Kedua

Kita telah mencapai efek paralaks yang sangat sederhana yang menambahkan unsur dinamisme setiap kali pengguna menggulir ke bawah. Kita bisa menerapkan aturan CSS apa pun yang kita inginkan dengan skrollr, jadi mari kita berikan header region kita yang pengambangan terakhir.

Ingat elemen ini, yang berisi judul dan tautannya?

Kita akan menambahkan dua keyframes; Satu untuk keadaan awal (0px) dan yang lainnya untuk saat scrollbar mencapai 180px.

Ini, seperti yang Anda lihat, memerintah opacity, properti CSS lain yang familiar. Saat scrollbar kita bergerak turun, sebelum header cukup meninggalkan halaman, konten di dalam div ini akan dengan mudah memudar. Efek sederhana, tapi yang secara halus mempengaruhi pengalaman pengguna halaman ini. Hal seperti ini harus digunakan secara bertanggung jawab!

13. Pengaturan Ekstra

Skrollr dikemas dengan beberapa pilihan tambahan, tergantung pada seberapa yakin perasaan Anda. Semua pengaturan ini bisa diserahkan ke skrollr dengan menggunakan pasangan key-value seperti:

Misalnya, instruksi ini memerintahkan skrollr untuk tidak memaksakan ketinggian dokumen. Secara default skrollr akan memaksa dokumen tersebut setidaknya setinggi keyframe tertinggi yang telah Anda definisikan.  Dalam kasus kami, posisi scrollbar terjauh kami ditetapkan sebagai 500px, sementara halaman kita lebih tinggi lagi. Oleh karena itu kita tidak perlu memikirkan untuk memaksa tinggi utama.

Hal lain yang mungkin ingin Anda lakukan adalah menghapus scrolling yang mulus. Cobalah efek paralaks kita sekali lagi; Anda melihat bagaimana posisi gambar latar belakang mempercepat dan melambat? Itu mencegah ketidakcocokan, tapi Anda mungkin tidak ingin efeknya muncul seperti itu. Untuk membuat tweening Anda lebih linier, tambahkan ini:

Anda juga bisa menambahkan hal tersebut pada setiap elemen dengan sekali lagi bersandar pada data-attributes (sangat elegan):

Mode Relatif

Ini juga layak disebut mode relatif, yang memungkinkan kita mengatur keyframes relatif terhadap elemen, bukan dokumen seperti yang telah kita lakukan. Dengan cara ini, kita bisa mengubah tinggi, margin, dan lain-lain dari header kita (misalnya) tanpa harus menilai kembali pengaturan keyframe kita.

Menggunakan mode relatif mengubah sintaks yang dibutuhkan dalam atribut data, yang tidak akan saya masukan ke sini, tapi layak untuk dilihat.

Untuk gagasan lebih lanjut tentang apa yang mungkin menggunakan opsi skrollr, lihat contoh dan dokumentasinya.

14. Dukungan Mobile

Inilah sesuatu yang saya tidak tahu sampai saya membaca dokumentasi skrollr:

Browser mobile mencoba untuk menghemat baterai dimanapun mereka bisa. Itu sebabnya browser mobile menunda eksekusi JavaScript saat Anda sedang bergulir. IOS khususnya ini sangat agresif dan benar-benar menghentikan JavaScript.

Oleh karena itu, agar skrollr dapat bekerja pada platform mobile, Alexander harus membangun sedikit sihir tambahan yang ditarik setelah sedikit browser-sniffing. Seperti yang telah Anda lihat, efek kami menurun dengan sangat anggun, jadi saya tidak peduli dengan pengguna smartphone yang kehilangan sedikit paralaks. Namun, jika Anda ingin memastikan proyek Anda mendukung seluler, Anda memerlukan sesuatu yang ekstra.

  • Setelah Anda memasukkan skrip skrollr, Anda harus menjalankan pemeriksaan browser yang terlihat seperti ini:

    Anda akan melihat bahwa ini kemudian menambahkan skrollr.mobile.min.js jika kondisi terpenuhi (misalnya: perangkat seluler sedang digunakan), pastikan jalur benar sesuai proyek Anda. Anda akan menemukan script tambahan ini di sumber unduh GitHub.

  • Terakhir, pastikan elemen pertama setelah tag pembuka <body> memiliki id="skrollr-body".

Itu dia! Anda tidak perlu mengerti mengapa itu berhasil, memang begitu. Jika Anda ingin tahu lebih banyak tentang dukungan seluler, lihat dokumentasinya.

Kesimpulan

Skrollr bukan hanya paralaks.. apa pun, itu lebih dari itu seperti yang telah kami tunjukkan. Dengan sedikit keberuntungan, Anda sekarang bisa menerapkan sedikit razzmatazz (apapun itu) ke halaman web statis Anda sendiri. Jangan ragu untuk mengajukan pertanyaan apapun yang mungkin Anda miliki di komentar!

Sumber Lebih Jauh

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.