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

Menambahkan Aturan JavaScript untuk Skeleton Web Page

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called From PSD to HTML With the Skeleton Boilerplate.
Adding Styles to Our Skeleton Page Build

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

Sejauh ini kita telah membangun halaman HTML konkret dan menerapkan beberapa gaya. Tutorial ini akan fokus pada menambah interaktivitas ke situs melalui JavaScript. Kami akan membaginya menjadi dua bagian:

  • Tambahkan plugin dan menyiapkan ruang kerja
  • Inisialisasi plugin dan menyesuaikanya untuk kita gunakan

Plugin Overview

Ada banyak plugin jquery yang dapat kita gunakan untuk tutorial ini, tetapi kita akan tetap memakai dibawah ini:

  • Isotope

    Filter & mengurutkan magical layout

    Perpustakaan ini besar dan kuat, tetapi masih memerlukan beberapa keterampilan pemrograman yang baik untuk menggunakan. Memiliki dukungan untuk berbagai jenis layout, untuk filtering dan sorting.

  • Scrollreveal

    Mudah memperlihatkan elemen saat mereka memasuki viewport.

    Saya memilih Perpustakaan ini karena memiliki dukungan untuk scrolling ke bawah dan ke atas. Dengan menampakkan elemen setiap kali mereka terlihat di viewport Anda dan sangat mudah untuk diterapkan.

  • SinglePageNav

    Sebuah plugin jQuery yang menyediakan scrolling yang halus dan navigasi canggih untuk satu halaman website.

  • FancyBox

    fancyBox adalah alat yang menawarkan cara yang menyenangkan dan elegan untuk menambah zoomimg fungsionalitas untuk gambar, konten html dan multi media pada halaman web Anda. Hal ini dibangun di atas kerangka JavaScript populer jQuery dan keduanya mudah untuk menerapkan dan dengan snap untuk menyesuaikan.

  • JQuery

Menyiapkan ruang kerja

Setelah menemukan plugin yang diperlukan untuk website kita, sekarang saatnya untuk men-download dan referensinya dalam index.html kami seperti ini:

Seperti yang Anda lihat, saya mendownloadnya ke folder baru disebu js karena cara ini sangat mudah untuk menjaga dan mengatur filenya.

Scripts.js file adalah sebuah file kosong untuk saat ini. Kita akan menggunakannya untuk menulis extra JavaScript dan menginisialisasi plugin.

Sekarang segala sesuatu sudah disiapkan mari kita pindah ke bagian berikutnya, dimana kita akan bermain dengan masing-masing plugin.

Menulis skrip

Hal pertama yang perlu Anda pelajari ketika menulis jQuery adalah $(document).ready(function(){});. hal ini akan menjalankan segala sesuatu di dalam fungsi setelah DOM dimuat. Anda dapat membaca lebih lanjut tentang hal itu ketika belajar jquery.

Saya sangat suka menjaga kode saya bersih, jadi itu sebabnya Anda akan sering melihat saya menyimpan penyeleksi dalam variabel (seperti yang Anda lihat di bawah), memakai dua ruang untuk indentasi dan pedoman di 80 karakter.

Hero Section

Hero Section kami idealnya memiliki window.height, penuh secara efektif-tinggi. Hal ini dapat melalui CSS unit vh namun karena tidak semua browser mendukung unit ini, kita akan tetap untuk JavaScript.

Untuk mendapatkan ketinggian window, kita akan menggunakan window.innerHeight yang meng-output tinggi viewport di px.

Di sini kita menerapkan ketinggian viewport untuk heroContainer, tetapi kita juga perlu untuk memastikan bahwa setiap kali pengguna mengubah ukuran browser, kita akan mengajukan permohonan kembali viewport ketinggian untuk heroContainer. Kode berikut akan mendengarkan window mengubah ukuran dan akan mengubah ketinggian heroContainer dengan cepat:

Menyimpan penyeleksi dalam variabel membuat mereka mudah untuk mempertahankan dan penggunaan kembali. Anda harus memiliki sesuatu seperti ini:

Menu

Pertama dari yang pertama, mari kita menyimpan penyeleksi yang akan kita gunakan dalam variabel. Untuk saat ini, kita perlu menuIconnavigasi, mainNavigation dan navigationLink. Variabel yang akan terlihat seperti ini:

Ketika kita memiliki beberapa Deklarasi variabel, tidak perlu untuk mengulang  var, Anda dapat memisahkan koma variabel.

Mari kita lampirkan event klik pada menuIcon yang harus menambah nama kelas aktif menjadi mainNavigation. Kelas aktif di mainNavigation yang ditata dalam CSS kita dan membuatnya terlihat.

Mari kita sekarang menggunakan SingleNavPage plugin dan initiliaze dalam mainNavigation pemilih seperti ini:

Di sini saya juga menambahkan scroll listener yang akan menambahkan kelas yang berbeda ke menuItem jika pengguna menggulir lebih dari ketinggian viewport.  Saya memeriksa apakah window.scrollY lebih besar dari window.innerHeight (ketinggian viewport) Saya mengganti kelas active untuk menuItem

Seluruh kode untuk menu sekarang terlihat seperti ini:

Scrollreveal

Inisialisasi untuk ScrollReveal cukup sederhana tetapi saya menambahkan sedikit konfigurasinya. Jika Anda ingin mengetahui lebih tentang penggunaan ini dan lebih banyak opsi konfigurasi, Anda harus memeriksa pada proyek Github. Kode untuk inisialisasi scrollreveal sebagai berikut:

Pekerjaan

Dalam kasus ini, script apa yang akan kita kerjakan? Ada tiga hal besar:

  • mengubah daftar kerja menjadi isotop layout
  • menyaring item
  • menambahkan kelas aktif untuk opsi filter aktif

Kita akan mulai dengan menyimpan variabel yang diperlukan untuk plugin ini. JavaScript var $workFilterLinks = $(' Osrec-filter Li'), $container = $(' Osrec-item); Hal berikutnya adalah untuk melampirkan handler klik untuk setiap link filter. Hal ini akan menghapus kelas aktif dari semua filter dan menambahkannya ke item yang diklik.

Dalam fungsi panggilan balik klik, kami akan menargetkan contrainer dan membuat sebuah instance isotop dengan filter dan tata letak mode sebagai pilihan.

Ini akan menyaring item isotop dengan atribut data-filter filter itu dan akan menambah tata letak masonry untuk bagian kerja.

Kode untuk bagian kerja kami sekarang harusnya terlihat seperti ini:

Fancybox

Plugin terakhir yang kita akan gunakan adalah Fancybox. Plugin ini akan dilampirkan ke tombol play dari bagian video.

Setelah menulis bagian JavaScript, seharusnya code akan terlihat seperti ini:

Pemikiran Akhir

Dan kita sudah selesai! Lihatlah apa yang telah kita buat!

Saya berharap bahwa Anda menikmati seri ini dan Anda belajar banyak hal-hal baru. Selama proses ini saya membagikan beberapa teknik yang saya gunakan setiap hari dan saya harap Anda akan menerapkannya dan membagikannya. 

Saya ingin melihat apa yang telah Anda kodekan sejauh ini - bagikan kepada kami apa pun yang Anda buat menggunakan beberapa teknik ini! 

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.