Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Parallax Scrolling
Webdesign

Mewujudkan Laman Web Parallax Scrolling Menggunakan Stellar.js

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Robi'ah Ar Ro'yi (you can also view the original English article)

Salah satu trend terbesar dalam reka bentuk web moden hari ini ialah penggunaan kesan menatal paralaks.  Dalam tutorial ini saya akan menunjukkan kepada anda bagaimana anda boleh membuat kesan di laman web anda sendiri, dengan sedikit imaginasi dan sedikit bantuan dari Stellar.js.


Pengenalan

Kesan menatal paralaks telah menjadi popular sejak laman web seperti Nike Better World memperkenalkannya di laman web mereka beberapa tahun yang lalu.  Kesan paralaks yang berkaitan dengan antara muka telah wujud sejak 1980-an ketika ia mula-mula digunakan dalam tajuk permainan video dan kemudian dalam permainan itu sendiri .  Baru-baru ini, kesan paralaks mulai membuat pandangan dalam antara muka web - anda akan terbiasa dengan kesan perak menggunakan semula sebagai sebahagian daripada tajuk.

Apabila digabungkan dengan fungsi menatal laman web, kesan penggilapan paralaks boleh memberi impak visual yang kuat, terutamanya apabila digabungkan dengan beberapa bentuk cerita yang membawa anda dalam perjalanan.


Yang ... apa?

Parallax adalah anjakan atau perbezaan dalam kedudukan yang jelas objek dilihat sepanjang dua pandangan yang berbeza. -  Wikipedia

Jadi apa sebenarnya kesan paralaks?  Baik itu mungkin salah satu perkara yang pelanggan anda lihat ketika mereka secara membabi buta mengatakan "Saya mahu laman web saya HTML5".  Setiap kali pelanggan bertanya kepada saya untuk laman "HTML5", saya perlu bertanya secara khusus bagaimana mereka mentafsirkan makna HTML5 - pada ketika itu, ia kelihatan seperti kata kunci yang dikatakan oleh pelanggan tanpa memahami maknanya.

Begitu juga HTML5?  Sudah tentu HTML5 mempunyai peranan untuk bermain dalam kesan menatal paralaks tetapi lebih daripada HTML5, ia juga menggunakan beberapa bentuk javascript, seperti jQuery, dan tidak akan mungkin tanpa sedikit CSS3.

Kata parallax sebenarnya berasal dari bahasa Yunani παραλλαξη (parallax) yang bermaksud perubahan.  Perkara yang dekat dengan mata mempunyai paralaks yang lebih besar daripada objek yang berada di kejauhan.  Ini bermakna objek yang lebih dekat kepada kami boleh kelihatan bergerak lebih cepat daripada objek di latar belakang.

Lapisan beberapa latar belakang dan objek (seperti imej) dan kemudian membiarkannya bergerak pada kelajuan yang berbeza membuat sensasi kedalaman dan dimensi.


Parallax dalam Tindakan

Lihat beberapa contoh yang menunjukkan kesan paralaks.

Saucony
Lois Jeans
Nike Jump man
Bomb girls
Tokiolab
Intacto

Setiap Laman Web Memberitahu Kisah

Contoh-contoh di atas membawa anda dalam beberapa bentuk perjalanan atau kisah, dan mereka melakukannya dengan cara yang berbeza.  Pada pandangan saya, inilah yang menjadikan tapak menatal paralaks berjaya.  Kunci untuk menjadikannya menarik dan unik ialah dengan memberi tumpuan kepada cerita dan konsep yang baik, kemudian menggunakan kesan dalam cara kreatif dan imajinatif.

Wieden + Kennedy (W & K) , orang-orang di belakang Laman Web Dunia Betul Nike menyokong ini:

Pada pendapat kami, teknologi tidak bergantung kepada konsep.  Tumpuan utama kami adalah untuk mencipta pengalaman bercerita interaktif yang hebat.  - Wieden + Kennedy (W & K)


Bagaimana Laman Kami Akan Bekerja

Untuk menunjukkan kepada anda bagaimana untuk menggunakan tatal paralaks ke laman web anda, saya memilih untuk memaparkan empat tapak slaid ringkas yang menggunakan kesan pada latar belakang dan imej yang berlainan.  Saya juga menambah navigasi di sudut kiri yang akan tatal ke slaid tertentu di laman web ini dan juga mengubah saiz untuk mencerminkan bilangan slaid aktif.  Saya juga menggunakan font web Percuma , walaupun anda bebas menggunakan orang lain jika anda mahu.

Begini bagaimana struktur folder kami akan muncul:

parallax website folder structure

Plugin Digunakan

Plugin Digunakan

Untuk membantu saya mencapai ini, saya menggunakan Stellar.js, plugin jqueryMark Dalgleish yang memfasilitasi penciptaan tapak menatal paralaks. Terdapat plugin lain yang tersedia untuk membantu anda melakukan perkara ini yang telah saya disenaraikan di bahagian bawah artikel ini.  Saya telah memilih untuk menggunakan Stellar.js kerana ia agak mudah dilaksanakan dan, walaupun tidak dipaparkan semasa tutorial ini, ia dapat dioptimumkan untuk berfungsi pada platform peranti pintar seperti iOS.

Waypoints.js

Saya juga akan menggunakan titik laluan jQuery oleh Caleb Troughton . Waypoints adalah plugin jQuery lain yang menjalankan fungsi setiap kali anda menatal ke elemen.  Ini membolehkan navigasi di laman web untuk menyerlahkan slaid yang kami gunakan mengikut kedudukan bar skrol.

jQuery Easing

pelonggaran jQuery adalah plugin dari GSGD yang menawarkan pilihan pelonggaran maju.  Kami akan menggunakan ini untuk menambah gerakan pelonggaran yang bagus apabila beralih dari slaid ke slaid.


Markup HTML

Untuk memulakan index.html kami, kami menambah doctype HTML5 dan kemudian mencipta bahagian kepala.  Aktiviti ini terdiri daripada CSS Reset diikuti oleh gaya style styles.css kami.  Kami kemudian menambah pustaka jQuery yang diikuti oleh fail 'js.js' jQuery kami.  Kemudian diikuti oleh tiga plugin, 'jquery.stellar.min.js', 'waypoints.min.jsquery.easing.1.3.js'.

Unsur seterusnya dalam html kami ialah imej logo Envato yang tetap berada dalam kedudukan yang tetap di seluruh laman web.  Oleh itu, kami menambah kelas 'envatologo' supaya kami boleh menyesuaikan kedudukannya kemudian apabila kami menyandikan CSS.

Slaid

Empat slaid menggunakan markup yang sama:

Kami menggunakan kelas 'slaid' yang akan digunakan sebagai gaya biasa untuk semua slaid.  Setiap slaid kemudian diberi id 'slaid' diikuti dengan nombor slaid 'Slide1'.  Kami menggunakan atribut data HTML5 dan memanggilnya 'slaid data'.  Ini akan membolehkan kami mensasarkan menggunakan jQuery.  Atribut data lain dari 'data-stellar-background-ratio' juga ditambah.  Ini khusus untuk jQuery stellar.js plugin dan menunjukkan plugin dengan nisbah bagaimana elute speed harus digulir.

Nisbah ini relatif kepada kelajuan tatal semulajadi, jadi nisbah 0.5 akan menyebabkan elemen untuk tatal pada separuh kelajuan, nisbah 1 tidak akan memberi kesan, dan nisbah 2 akan menyebabkan elemen untuk menatal dua kali lebih cepat.

Semua slaid kecuali empat slaid mempunyai butang yang membolehkan kami menatal ke slaid seterusnya.  Untuk ini, kami menambah atribut 'slaid data' dengan nilai nombor slaid seterusnya.  Jadi butang tahu apa slaid seterusnya supaya kami dapat lulus nilai ini ke jQuery.  Kebanyakan slaid juga mempunyai rangkaian dengan kelas 'slideno'; Hanya versi teks besar nombor slaid yang muncul di sudut kiri bawah kebanyakan slaid.  Ia juga boleh digunakan untuk tajuk.

Pada slaid tiga dan empat, kami juga menambah beberapa elemen imej ke div 'slaid'.  Imej-imej ini akan memberikan gambaran sebenar mengenai kesan paralaks yang kita buat.  Kami membungkusnya di dalam 'wrapper' div yang akan berpusat dan luas '960px', Ini hanya untuk memastikan paparan menjadi OK dalam semua saiz monitor desktop.

Setiap imej mempunyai 'data-lintang-nisbah' atribut yang dilampirkan kepadanya.  Sekali lagi, ia adalah spesifik stellar.js dan ia memberitahu plugin pada nisbah laju apa yang perlu kita pakai ke elemennya.


CSS

Untunglah kita tidak terlalu terlibat dengan CSS.  Pada dasarnya, ia menganjurkan beberapa elemen mudah, tetapi kebanyakannya meletakkan beberapa unsur imej.

Perkara pertama yang perlu kita lakukan dengan CSS kami adalah untuk membawa fon PERCUMA menggunakan @ font-face.  Kami kemudian menambahnya kepada html untuk menetapkan font untuk laman web ini.  Kami juga menetapkan lebar dan ketinggian html dan badan kepada 100%.  Ini akan membolehkan slaid kami mengamalkan lebar dan ketinggian penuh skrin pengguna.

Navigasi

Navigasi utama diberikan kedudukan 'tetap' untuk tinggal di tempat yang sama di seluruh laman web ini.  Kami mengimbangi 20px ini dari atas untuk memberikan sedikit ruang di atasnya dan tetapkan z-indeks ke 1 untuk memastikan ia berada di lapisan atas laman web ini.

Senarai sebenar hanyalah susunan teks dengan sempadan di bawah untuk bertindak sebagai garis bawah.  Ia mempunyai lebar 53px.  Peralihan juga ditambah supaya ia menghidupkan dari keadaan asalnya kepada keadaan hover.  Saya telah menggunakan awalan -webkit di sini untuk menyimpan kod pendek, tetapi kod sumber penuh yang boleh dimuat di atas mengandungi semua awalan vendor.

Status hover juga menggunakan harta yang sama dengan kelas 'aktif'; pada dasarnya hanya peningkatan saiz fon dan lebar.  Kelas 'aktif' digunakan oleh jQuery untuk menyusun slaid berkaitan yang dilihat dari tetingkap penyemak imbas.

Logo envato diberikan pelbagai gaya kedudukan hanya untuk memastikan ia kekal di tengah-tengah skrin.  Begitu juga dengan navigasi, ia juga diberi z-indeks '1' untuk memastikan ia tetap di atas.

Sekarang kita bergerak ke gaya geser slaid sebenar.  Kami memberi mereka harta lampiran-latar belakang 'tetap'.  Ciri lampiran latar belakang menentukan sama ada imej latar belakang tetap atau bergulir dengan seluruh halaman, jadi berguna untuk imej latar belakang (seperti yang digunakan pada slaid empat). Untuk contoh ini, kami telah menggunakan kertas dinding Philipp Seiffert yang boleh dimuat turun di sini .  Kami menetapkan kedudukan slaid kepada 'relatif'. Jadi, kita sebenarnya boleh meletakkan kelas 'slideno' dan 'butang' terhadap slaid sebagai pengganti dokumen sebenar.

Kotak bayangan murni digunakan untuk tujuan hiasan dan menambah petikan yang baik ke bahagian atas setiap slaid.

.button untuk butang di bahagian bawah halaman yang membolehkan kita maju ke slaid seterusnya.  Kami telah memposisikannya di bahagian bawah setiap slaid dan telah menggunakan imej anak panah sebagai penunjuk.

Penggayaan untuk setiap slaid individu agak mudah dan mengikuti corak yang sama pada setiap masa.  Slaid satu mempunyai warna latar belakang '# 5c9900'.  Slaid kedua juga mempunyai satu set warna latar belakang di atasnya. Slide kedua juga mengandungi imej dan kami boleh menyasarkan masing-masing menggunakan CSS Selector nth-child(n) .  Pemilih ini boleh digambarkan sebagai

Unsur-unsur kelas pseudo ini sepadan dengan kedudukan mereka dalam senarai elemen unsur induk elemen kanak-kanak.

Oleh itu, pada asasnya, kami mengatur setiap imej dalam susunan dalam markup kami.  Kami hanya meletakkan mereka berbanding pembalut slaid.

Slaid ketiga mengikuti tetapan yang sama seperti kedua-dua slaid.

Slaid empat adalah sedikit berbeza dari dua slaid sebelumnya kerana ia tidak mengandungi sebarang unsur imej atau warna latar belakang, tetapi menggunakan imej latar belakang.  Kami juga memberikannya hak milik 'cover-size: cover' CSS3.  Ia pada dasarnya berguna untuk menetapkan imej latar belakang untuk menutupi keseluruhan tetingkap penyemak imbas dan akan mengubah saiz apabila tetingkap penyemak imbas diubah saiznya.  Kami juga telah menambah satu garisan teks ke slaid terakhir yang kami namakan dan diberi kelas 'parallaxbg'


jQuery

JQuery adalah tempat di mana ia bermula untuk memulihkan.  Saya telah memberikan semakan kod supaya anda dapat melihat apa yang sebenarnya berlaku.


Hanya Beberapa Perkara

Create a Parallax Scrolling Website using Stellarjs envato

Jika anda melihat dua slaid dari contoh kami, anda akan melihat gelembung 3D.  Saya telah menambahkan sedikit keghairahan gauss kepada beberapa perkara ini, terutama pada latar depan dan latar belakang.  Menggabungkan ini dengan gelembung fokus yang mendalam menambah rasa kedalaman yang dibuat oleh paralaks.  Ini adalah sesuatu yang anda perlu pertimbangkan ketika cuba mendapatkan kedalaman yang baik ke laman web anda.

Banyak laman web yang menggunakan kesan ini cenderung menggunakan imej yang cukup berat, pastikan anda memampatkan sebanyak mungkin imej (tanpa mengorbankan kualiti).  Sekiranya selepas mampatan masih mengambil sedikit masa untuk memuatkan, kemudian pertimbangkan untuk menambah pemuat ke laman web anda.


Kesimpulannya

Menatal parallax adalah salah satu kesan yang paling disukai baru-baru ini dan Orang sentiasa menolak hadnya . Di sini, hari ini, saya telah menunjukkan cara menyediakan tapak asas yang menggunakan skrol paralaks.  Demo yang saya tunjukkan hari ini adalah laman web yang agak mudah untuk tujuan pembelajaran.  Bagi anda yang ingin membuat tapak menggunakan kesan ini maka saya minta anda meluangkan masa untuk konsep dan cerita kerana ia menjadikan mereka unik, mudah untuk berkongsi dan menyeronokkan untuk diterokai.  Ini semua tentang bagaimana anda boleh menggunakan kesan dengan bijak dan bukan hanya menggunakannya demi menggunakannya.

Saya harap anda menikmati membaca menatal paralaks dan saya ingin melihat bagaimana anda menggunakannya di laman web anda sendiri, jangan lupa untuk meninggalkan pautan di bawah.  Sehingga masa depan!


Bacaan dan sumber lanjut

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.