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

Membuat Situs "About Me" Satu Halaman dengan Prepros, Jade & Stylus

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

Hari ini, kita akan belajar cara membuat satu halaman "About Me" statis menggunakan aplikasi Prepros gratis dari Alpha Pixels.

Prepros adalah tool antarmuka yang menangani preprocessing, dan tugas front-end lainnya. Kekuatan terbesar Prepros adalah kemudahan luar biasa yang memungkinkan Anda menggunakan berbagai macam preprocessors, baik itu untuk CSS, HTML atau JavaScript. Jadi saat kami menyusun situs statis kami, kami akan bermain dengan tiga preprocessor untuk bahasa ini; Stylus, Jade dan (sedikit) CoffeeScript masing-masing.

Dengan Prepros ada tidak perlu untuk menginstal Node.js, Ruby atau modul apapun dan gems, dan Anda tidak pernah menyentuh baris perintah. Hanya menginstal dan menjalankan Prepros, menambahkan proyek Anda dan akan menangani semua Anda mengkompilasi, menggabungkan, dan minifying untuk Anda.

Sebagai bagian dari pembuatan situs kami, kami juga akan menyertakan beberapa efek gulir halus untuk membawa pengunjung dari satu bagian situs ke bagian berikutnya, ditambah beberapa efek animasi berbasis CSS untuk pukulan tambahan. Lihat demo langsung untuk melihat apa yang akan Anda buat.

1. Memulai  Setup

Kita akan mulai dengan mendapatkan Anda setup dengan folder proyek yang diselenggarakan untuk terbaik untuk bekerja dengan Prepros.

Saya selalu menemukan lebih mudah untuk menjaga file sumber preprocessor Anda bekerja pada terpisah dari file situs sebenarnya mereka akan mengkompilasi ke dalam. Dengan memiliki semua file output folder sendiri sangat mudah untuk mengambil seluruh hal dan meng-upload ke situs hidup Anda ketika Anda sudah selesai.

Siapkan Struktur Proyek Anda

Buat folder proyek dengan nama apa pun yang Anda suka, misalnya static_site_project.

Di dalam folder proyek Anda membuat subfolder dua; site dan source.

Dalam source folder buat sebuah file bernama index.jade dan subfolder empat tambahan; contentscriptsstylus dan templates.

Dalam folder scripts Buat file bernama site.js dan subfolder lain, bernama js.

Dalam folder stylus buat sebuah file bernama style.styl

Setelah selesai, struktur proyek Anda akan terlihat seperti ini:

Menginstal & Mengkonfigurasi Prepros

Out of the box Prepros akan secara otomatis menonton dan mengkompilasi semua file Anda untuk Anda. Yang perlu kita lakukan adalah mengatakan itu di mana untuk menempatkan file kami dikompilasi, serta folder yang kita benar-benar ingin mengabaikan.

Download dan instal Prepros. Menjalankan Prepros, kemudian menyeret static_site_project folder ke antarmuka untuk menambahkannya sebagai sebuah proyek baru.

Klik ikon perkakas yang kecil, satu detik dari sebelah kiri di sudut kanan bawah dari antarmuka Prepros, pergi ke pengaturan proyek.

Klik CSS Options, kemudian ubah Output Path Type ke "Relative to Source File Directory" dan masukkan ../../site/css/ di field CSS Path.

Klik HTML Options, kemudian ubah Output Path Type ke "Relative to Source File Directory" dan masukkan ../site/ di field Html jalan Html Path.

Selanjutnya, klik JS Options dan masukkan ../../site/js/ di field Concatenated & JMinified S Path.

Kemudian klik Project Filters dan masukkan content,templates  di field Comma Separated Filters To Exclude.

Saatnya untuk memeriksa kami setup dan mencoba kompilasi. Klik nama proyek Anda di sidebar kiri Prepros. Semuanya sekarang harus terlihat seperti ini:

Jika ya, Anda siap menjalankan kompilasi proyek pertama Anda, yang akan menambahkan file ke dalam folder site Anda yang kosong. Klik ikon More Options, tombol paling kanan di kanan bawah Prepros, lalu pilih Compile All Files.

Lihatlah folder site Anda. Anda sekarang harus melihat file dan folder berikut di dalam:

Sekarang kita sudah siap untuk memulai coding!

2. Jade di Nutshell

Alih-alih mengkode HTML mentah kita akan bekerja dengan Jade. Saya suka menganggap Jade sebagai 'singkatan' untuk HTML. Hal ini memungkinkan Anda menulis jauh lebih sedikit kode dan menggunakan hal-hal seperti variabel dan mixins untuk menambahkan logika, yang semua datang bersama-sama untuk membuat proses yang sangat efisien.

Jika Anda melihat referensi bahasa untuk Jade Anda mungkin pada awalnya merasa seperti itu sedikit rumit, namun ada beberapa prinsip kunci yang cukup sederhana yang fungsi utama intinya:

Elemen HTML

Tempatkan elemen HTML apa pun dengan hanya menghapus tanda < and >, tidak perlu tag penutup. Misalnya.

Bersarang

Alih-alih mencoba untuk melacak membuka dan menutup tag HTML, hanya tab indent dimanapun Anda perlu sesuatu untuk diulang. Misalnya

Beberapa baris yang diindentasi dengan jumlah tab yang sama akan dibungkus oleh elemen induk yang sama.

Teks Biasa dalam Elemen

Teks biasa dapat ditempatkan di dalam elemen dengan mengetikkannya pada baris yang sama, setelah spasi misalnya

Atau, Anda dapat menempatkan teks pada barisnya sendiri dan menempatkan simbol pipa di depannya, misalnya

Class dan ID CSS

Dalam kebanyakan kasus, class dan id CSS dapat ditambahkan langsung ke elemen HTML misalnya

Jika Anda hanya menempatkan div, Anda bahkan tidak perlu menentukan elemen. Div adalah elemen Jade default, jadi jika Anda menempatkan ID / class itu sendiri maka akan secara otomatis diterapkan ke div misalnya

Atribut

Dimanapun tag kebutuhan atribut, hanya menempatkan mereka antara tanda kurung dengan pemisahan koma, misalnya:

Ada banyak fitur canggih lainnya yang kami akan bekerja dengan kemudian seperti variabel, mixins dan logika, tapi apa yang Anda lihat di atas mencakup inti nyata menggunakan Jade.

Catatan: Ini adalah ide yang baik untuk mendapatkan sintaks Jade stabilo untuk editor kode pilihan Anda sebelum pergi ke depan. Saya menggunakan Jade for Sublime Text (bekerja dengan versi 2 dan 3).

3. Buat Template Wrapper Anda

Salah satu hal paling keren yang dapat Anda lakukan dengan Jade adalah membuat template yang extendable dan reusable yang memiliki placeholder block dimana konten dapat ditempatkan. Cara termudah untuk menjelaskan apa artinya ini adalah dengan contoh sederhana.

Katakanlah Anda membuat template dasar ini, bernama base.jade:

Dua block baris adalah placeholders untuk konten akan diberikan dari tempat lain.

Anda kemudian dapat membuat template lain bernama page.jade yang extends template base.jade, dan menyediakan konten di dalamnya untuk disisipkan di mana placeholder block berada, hanya dengan mencocokkan nama blokir:

Konten setelah block pagetitle di template page.jade akan muncul di tempat yang cocok dengan tempat penampung block pagetitle yang cocok dalam template base.jade.

Demikian juga, konten setelah block pagecontent di page.jade akan muncul mana block pagecontent adalah di base.jade.

Oleh karena itu, page.jade akan mengkompilasi ke dalam:

Dengan menggunakan teknik ini, Anda dapat menggunakan kembali templat Anda berulang kali, menyediakan konten yang berbeda untuk dimasukkan ke blok placeholder setiap kali, yang sangat berguna baik untuk menjaga kode Anda tetap teratur dan untuk membuat situs multi-halaman.

Kita akan menggunakan pendekatan ini untuk membuat template yang akan berisi HTML dasar penting untuk situs dan pembungkus untuk pergi sekitar isi situs kami.

Membuat wrapper.jade

Dalam folder proyek Anda source > templates buat file bernama wrapper.jade lalu tambahkan kode ini ke dalamnya:

Ketika dikompilasi kode ini akan berubah menjadi tag doctype, html, head, title, meta, link, script dan body kami. Kami memuat file style.css dan site.min.js yang kami buat sebelumnya serta beberapa Google Font yang akan kami gunakan.

Catatan dua block placeholders, block title dan block content. Ketika kita extend template ini segera kami akan menyediakan konten yang harus ditempatkan di sana, menghasilkan judul halaman dan isinya.

Ketika Anda menyimpan file ini tidak akan secara otomatis dikompilasi seperti yang telah kami sampaikan kepada Prepros untuk mengabaikan file apa pun dalam folder template. Ini karena kami tidak ingin file 'wrapper.html' kosong di situs kami yang tidak memiliki judul atau konten halaman. Sebagai gantinya, ini semua akan dikompilasi setelah kami extend template di langkah berikutnya.

4. Extend Wrapper Anda

Anda akan ingat kita membuat sebuah file dalam folder source Anda bernama index.jade. Prepros adalah dikonfigurasi untuk autocompile file ini ke site > index.html setiap saat yang Anda simpan.

Tambahkan kode berikut ke index.jade:

Simpan file Anda dan Anda akan melihat ini muncul di sudut kanan bawah layar Anda:

Pergi ke Prepros, klik More Options lainnya kemudian pilih Copy Live Preview Url:

Tempelkan URL itu ke browser Anda dan tambahkan /situs/ ke ujung untuk memuat situs Anda yang dikompilasi. Anda harus melihat:

Catatan: Kami akan membuat single page dalam tutorial ini, namun Anda dapat mengulangi proses di atas sebanyak yang Anda suka untuk situs multi-page. Misalnya, jika Anda membuat file bernama about.jade dengan cara yang sama, maka akan secara otomatis dideteksi oleh Prepros yang akan menghasilkan file situs about.html untuk Anda.untuk Anda.

5. Mengatur Dasar-Dasar Stylus Anda

Sebelum kita melangkah lebih jauh dengan coding konten situs Anda kami ingin mendapatkan sedikit styling dasar di tempat. Kami preprocessor pilihan untuk tutorial ini adalah Stylus. Anda dapat membaca semua tentang cara kerjanya dalam artikel saya pada Mengapa Stylus adalah favorit saya.

Stylus memiliki sintaks yang sangat mirip untuk Jade yang menggunakan tab indentasi untuk menentukan bersarang, tidak memerlukan semi-kolon baris Terminator dll. Dapat mengikuti beberapa aturan sintaks yang sama ketika bekerja dengan dua bahasa pada saat yang sama waktu membantu untuk menjaga hal-hal yang berjalan dengan lancar.

Nib dan Normalize.css

Hal pertama yang akan kita lakukan adalah membawa library mixin Nib yang mengagumkan, ditambah beberapa kode Normalize.css yang diformat dalam sintaks Stylus sehingga kita dapat memprosesnya ke stylesheet kami.

Pergi ke Prepros, klik pada file style.styl dalam antarmuka dan Anda akan melihat pilihan sidebar membuka di sebelah kanan. Di daerah pilihan centang kotak Use Nib:

Selanjutnya, ambil file ini Stylus Normalize dari Cory Simmons dan menyimpannya ke folder source > stylus. Namun ketika Anda melakukannya, simpan sebagai _normalize.styl. Underscore akan mencegah Prepros secara otomatis mengopile file.

Sekarang buka file style.styl yang Anda buat sebelumnya dan tambahkan kode ini:

File Anda akan secara otomatis dikompilasi dan ketika Anda kembali ke situs Anda jika semuanya sudah diimpor dengan benar Anda akan melihat font default telah berubah:

Tambahkan Detail

Kami sekarang memiliki semua dasar kami jadi kami siap untuk menambahkan beberapa custom style.

Kita akan menambahkan variabel untuk menentukan layout, tipografi dan pengaturan warna untuk situs kami, dan kami akan menyiapkan beberapa mixin dan style untuk menerapkannya ke dalam desain kami.

Saya akan membagikan beberapa kode Stylus super magic saya untuk dominasi universal yang saya gunakan dalam proyek pribadi saya.

Lanjutkan dan tambahkan kode berikut ke file style.styl Anda, di bawah garis impor sudah Anda tambahkan:

Bagian Variabel

Di bagian variabel Anda akan melihat variabel $base_font_size dan $base_font_size_ems. Kedua variabel ini mengatur ukuran font dasar untuk situs kami dan kemudian mengonversinya menjadi nomor berbasis em yang dapat kami gunakan untuk menjaga agar desain kami dapat skalabel dan fleksibel. Variabel $px memberi kita rem berbasis sama dengan satu pixel yang dapat kita gunakan sebagai pengganti unit px, misalnya daripada 20px menggunakan 20 * $px.

Variabel diawali $type_ atur seperti berikut ini, dalam rangka:

  • Regular font family
  • Heading font family
  • Heading 1 sampai 6 font sizes - didefinisikan sebagai hash
  • Heading 1 sampai 6  font vertical margins - didefinisikan sebagai hash
  • Heading line height
  • Font size untuk teks di dalam class .wrapper

Variabel $layout_site_width menetapkan lebar maksimum yang kita inginkan untuk diregangkan oleh konten kita, dan variabel awalan $color_ mengatur berbagai warna yang akan kita gunakan di seluruh desain.

Bagian Mixins

Di bagian mixins Anda akan melihat kode pembuatan tag heading keren yang berguna. Ini memproses angka dari variabel yang diawali $type_h_ menjadi kode H tag yang indah dan fleksibel.

Ini juga menerima argumen $factor yang merupakan pengali multiplier terhadap semua ukuran font heading. Ini memberi Anda kemampuan untuk menskalakan semua teks heading Anda saat diperlukan, seperti dalam kueri media, hanya dengan melewatkan pengganda. Misalnya, memanggil h_tags(0,5) akan membuat semua judul Anda setengah ukuran dari apa yang telah didefinisikan dalam variabel $type_h_ Anda.

Mixin raised() adalah style bayangan yang akan kami gunakan pada beberapa elemen nanti di tutorial.

Bagian Style

Bagian gaya dibagi menjadi dua kategori; 'elements', untuk elemen HTML default, dan 'classes', yang berisi pemilih yang ditentukan khusus.

Bagian elemen berisi kode penjelasan yang cukup jelas yang menetapkan beberapa perilaku default, color, style dan typography. Bagian kelas menggunakan kelas .pane dan .wrapper untuk membuat kotak putih besar, berbatasan hitam dengan bayangan yang dikelilingi oleh jarak yang ditunjukkan melalui latar belakang situs abu-abu gelap. Melalui penggunaan garis display table, display table-cell dan vertical-align middle, semua konten dalam kotak putih ini disejajarkan secara vertikal.

Situs Anda sekarang harus terlihat seperti ini:

6. Tambahkan Beberapa Konten

Sekarang kita memiliki style dasar mari tambahkan beberapa konten untuk digunakan. Di sinilah folder content yang Anda buat sebelumnya ikut bermain.

Dalam folder sumber > konten Anda buat sebuah file bernama hello.jade. Tambahkan kode untuk itu:

Ganti placeholder di baris kedua dan ketiga dengan sesuatu yang mewakili Anda dan apa yang Anda lakukan.

Sebelumnya kami mengatakan kepada Prepros untuk mengabaikan file di folder content, sehingga untuk mendapatkan konten ini di situs kami, kami akan menggunakan fungsi include di Jade.

Kembali ke file index.jade dan update berikut:

Apa yang telah kami lakukan adalah mengganti konten inline dengan baris include content/hello yang akan menarik konten dari file yang baru kita buat.

Kita akan membuat beberapa panel putih seperti yang sudah kita miliki. Oleh karena itu kami juga telah menambahkan class yang cocok .hello ke div parent sehingga kami memiliki sesuatu melalui yang kami tambahkan style yang unik.

Simpan file index.jade Anda dan Anda akan melihat konten baru Anda di tempat:

Ini adalah konten yang akan menyambut orang-orang ke situs tersebut sehingga kami ingin memiliki dampak yang sedikit lebih besar. Tambahkan kode baru ini ke file style.styl Anda:

Dengan kode ini kami menargetkan kelas .hello yang kami tambahkan sebelumnya dan menggunakannya untuk meningkatkan ukuran font dasar dari panel ini, yang pada gilirannya akan meningkatkan tag heading di dalamnya karena mereka berbasis em.

Namun kami ingin baris pertama dari membaca teks 'Hello' menjadi lebih besar sehingga meningkat dari standar 3em hingga 5.2em. Ini juga berwarna kuning cerah, diberi garis hitam dan bayangan, kemudian ditempatkan di atas strip hitam besar.

Akhirnya, kami mengubah font yang diterapkan pada baris kedua dan ketiga ke "Indie bunga" dan mengurangi ukuran margin mereka supaya mereka bisa cocok pada halaman lebih pas.

Inilah hasilnya:

7. Tambahkan Ekstra White Panes

Sekarang mari kita lanjutkan dan tambahkan beberapa ekstra white panes dan file konten untuk mereka.

Dalam folder source > content Anda buat file-file ini: skills.jade, systems.jade, types.jade, tools.jade, contact.jade. Masing-masing file ini akan menyimpan konten untuk white pane di situs Anda. Setiap white pane akan meregang agar sesuai dengan keseluruhan viewport dan akan ada tautan 'Next' & 'Prev' untuk menavigasi di antara mereka.

Buka file skills.jade Anda dan tambahkan kode ini:

Menggantikan "keterampilan satu" / "Keterampilan dua" dan "Tambahan info" / "More info" pengganti dengan info pada kemampuan Anda sendiri.

Setiap item daftar ini akan diubah menjadi ubin persegi kecil, jadi salin dan tempel kode antara //-Start square dan //-End square untuk membuat kotak untuk setiap keterampilan Anda. Kotak akan berada dalam baris empat jadi cobalah untuk mendapatkan kelipatan empat jika Anda bisa membuatnya terlihat rapi.

Perbarui index.jade Anda menjadi ini:

Dalam kode di atas, kami telah membuat panel baru yang berisi pemanggilan include untuk setiap file konten baru kami. Masing-masing memiliki ID unik seperti #section04 yang dapat kita gunakan untuk menargetkan tautan 'Next' dan / atau 'Prev' antara satu bagian dan bagian berikutnya.

Refresh situs Anda dan sekarang Anda akan melihat link 'Next' yang berfungsi di panel putih pertama Anda.

Klik link itu dan Anda akan diarahkan ke panel 'Skills' yang baru Anda buat, yang terlihat seperti ini:

8. Persegi dan Pane Heading

Panel 'skills' Anda saat ini terlihat agak lucu karena kami hanya memiliki style bawaan yang diterapkan pada unordered list kami. Mari masukkan beberapa style untuk membuat tiles persegi kecil kami dan mengubah judul panel utama.

Dalam style.styl file ganti seluruh kelas .wrapper Anda dengan ini:

Kode ini mengubah font yang diterapkan pada judul utama dan menghapus margin atasnya. Ini menghilangkan lingkaran peluru dari daftar tak beraturan dan mengatur margin dan padding ke nol.

Daftar item yang memegang masing-masing kotak kecil kami diberi lebar masing-masing 24,5% dan melayang ke kiri, yang memberi kami empat item per baris. Mereka juga diatur ke ketinggian 230 piksel masing-masing (dikonversi ke nilai-nilai rem) dengan menambahkan padding dan margin.

Munculnya kotak diatur dengan memberi mereka masing-masing border hitam tebal dan menerapkan raised() bayangan mixin kami menambahkan sebelumnya. Masing-masing dapat dipengaruhi oleh-1.5 derajat yang akan membuat diagonal atas dan tepi bawah. Item h3 dan li miring sebesar 1,5 derajat; memiringkan mereka dengan jumlah yang sama ke arah yang berlawanan akan membuat mereka meluruskan lagi daripada juga tampak miring secara diagonal.

default background color setiap persegi kecil diatur melalui variabel $color_link_default, tapi kami menggunakan kode berikut untuk menerapkan warna $color_highlight dengan cara yang akan menciptakan pola kotak-kotak:

Baris ini mengidentifikasi setiap baris kedelapan dimulai dengan yang pertama, (8n+1), lalu setiap seperempat persegi dimulai dengan yang ketiga, (8n+3), setiap baris kedelapan dimulai dengan keenam, (8n+6), dan setiap persegi kedelapan dimulai dengan yang kedelapan, (8n+8).

Jika Anda menggambar kotak dan warna hanya dalam kotak yang baru saja dijelaskan, Anda akan melihatnya akan memberi Anda pola kotak-kotak yang berkelanjutan tidak peduli berapa banyak baris yang Anda buat.

Sisa &:nth-child() baris bertanggung jawab untuk membersihkan pada akhir setiap baris dan membuat jumlah yang tepat dari batas atas di atas setiap persegi.

Semua di atas harus memberikan efek berikut setelah Anda menyimpan dan refresh:

9. Styling Pada Link Pagination

Sekarang tombol "Next" dan "Prev" link hanya mengambang dan terlihat sangat sederhana. Mari kita ubah itu. Tambahkan kode ini ke bagian akhir file style.styl Anda:

Dengan kode ini kami telah menempatkan link pada background hitam, terapkan mixin bayangan raised() dan tambahkan sedikit dan turun CSS segitiga melalui tiga baris perbatasan pengaturan Anda lihat &:before selector. Kami juga telah menggunakan posisi absolute dan margin negatif untuk menempatkan link di tengah layar, ditempelkan ke bagian atas dan bawah area panel.

Inilah yang seharusnya terlihat seperti sekarang:

10. Menambahkan Smooth Scroll dan Animation

Sekarang ketika seorang pengunjung mengklik tombol 'Next' atau 'Prev', ia akan langsung mengarahkannya ke panel berikutnya tanpa transisi. Sebaliknya, kami ingin membuat efek smooth scrolling dari satu panel ke panel berikutnya. Kami juga akan menambahkan beberapa efek animasi elemen pada layar untuk memberi mereka sedikit lebih hidup.

Menggabungkan Smooth Scrolling JavaScript

Untuk membuat smooth scrolling dari satu panel ke panel yang berikutnya kita akan menggunakan jQuery snippet dengan CSS Trik.

Dalam folder source > scripts > js buat sebuah file bernama smoothscroll.js dan tambahkan kode ini untuk itu:

Sekarang buka file site.js dari folder source > scripts dan tmbahkan baris ini untuk itu:

Kode //@prepros-append memungkinkan Anda untuk memberitahu Prepros file yang Anda ingin combine dan minify. Simpan file Anda dan secara otomatis akan menarik file smoothscroll.js Anda dan memasukkan ke file site.min.js yang sudah di load di situs kami.

Fungsi smooth scrolling berjalan secara otomatis, jadi sekarang, ketika Anda klik "Next" atau "Prev" link Anda akan melihat transisi smooth dari satu panel ke yang lain.

Gabungkan Animasi

Kita akan menggunakan kombinasi perpustakaan Animate.css dari animasi CSS murni, dan skrip Wow.js untuk mengontrol waktu dari animasi ini.

Klik kanan dan simpan wow.js ke dalam folder source > scripts > js sebagai wow.js:

Kemudian, seperti yang Anda lakukan dengan skrip smooth scroll Anda, tambahkan baris ke skrip site.js Anda untuk memberi tahu Prepros bahwa Anda ingin menarik wow.js ke dalam skrip site.min.js Anda.

Update source > scripts > site.js untuk menampilkan:

Simpan file sehingga ia meminta Prepros untuk mengkompilasi ulang.

Sekarang saatnya untuk animate.css. Klik kanan dan save animate.css ke folder source > stylus, namun tidak menyimpannya dengan ekstensi .css. tapi simpan dengan nama _animate.styl yang akan memungkinkan kita untuk mengimpor melalui file Stylus utama kami:

Di file style.styl Anda, di bawah baris dua @import, tambahkan berikut:

Simpan dan stylesheet Anda akan mengkompilasi ulang dengan Animate.css termasuk di dalamnya.

Sekarang satu-satunya yang tersisa untuk mengaktifkan animasi adalah menambahkan skrip kecil yang akan mengaktifkan wow.js.

Buka file wrapper.jade Anda, dan tambahkan tiga baris berikut langsung sebelum baris body Anda, pastikan baris pertama menjorok ke tingkat yang sama sebagai baris script yang sebelumnya:

Kode filter :coffee memberitahu Jade compiler bahwa beberapa CoffeeScript akan datang, dan akan dikompilasi menjadi JavaScript.

Kode di atas pertama kali memeriksa apakah viewport setidaknya berukuran lebar 1200 pixels, karena kami tidak ingin efek animasi pada layar yang lebih kecil, maka jika demikian fungsi animasi dimulai.

Seluruh file wrapper.jade Anda sekarang akan terlihat seperti ini:

Sekarang kami siap menambahkan beberapa animasi.

Animasikan 'Hello' Pane

Menambahkan animasi sekarang super mudah. Yang perlu Anda lakukan adalah menambahkan class wow untuk setiap elemen dan kemudian memilih class Animate.css menambahkan untuk menentukan efek, seperti .fadeIn. Anda juga dapat menambahkan atribut data-wow-duration dan data-wow-delay attribute untuk menentukan durasi dan delay animasi

Kita akan memiliki baris 'Hello' pada slide panel pertama dari atas, kemudian baris kedua meluncur dari kanan, dan baris ketiga dari kiri. Buka file hello.jade Anda dan ubah kode menjadi ini:

Jika menyimpan file hello.jade Anda tidak secara otomatis memicu rekompilasi, cukup buka file index.jade Anda dan simpan, yang akan meminta Prepros.

Pergi ke situs Anda dan refresh kemudian Anda akan melihat masing-masing dari tiga baris menganimasi dirinya sendiri.

Animasikan Panel Lainnya

Kami sekarang akan menganimasikan judul dan kotak kecil di halaman skills Anda. Anda masih belum mengisi konten untuk panel kosong lainnya saat ini, dan kami tidak ingin Anda harus menulis class animasi berulang kali ketika Anda melakukannya. Untuk membuat semuanya efisien kita akan membuat beberapa mixins yang berisi kode animasi kami.

Dalam folder source > content buat file bernama mixins.jade dan tambahkan kode ini ke dalamnya:

Di mana pun mixin ini ditempatkan, kode yang dikandungnya akan disisipkan.

Ketiga variabel dan mixin showSquare() akan memudar di masing-masing kotak kecil kami, masing-masing seperempat detik setelah yang terakhir. Mixin panelHead() akan memudar judul utama segera setelah pengunjung menuju ke sana.

Dalam file skills.jade Anda tambahkan baris ini ke bagian atas file Anda untuk membawa mixin baru Anda:

Replace baris h1 Anda dengan:

Dan replace li pertama dari masing-masing persegi Anda dengan:

Anda harus berakhir dengan sesuatu seperti ini:

Sekarang ketika Anda me-refresh situs Anda setelah mengkompilasi ulang dan pergi ke panel kedua Anda, Anda akan melihat judul memudar di diikuti oleh setiap kotak kecil berturut-turut terhuyung-huyung.

11. Tambahkan Rest Konten Anda

Sekarang mixin kami siap mari lanjutkan dan tambahkan konten ke panel yang tersisa. Tambahkan kode placeholder berikut ke setiap file konten kosong Anda dan sesuaikan sesuai keinginan Anda.

systems.jade

types.jade

tools.jade

Contact.Jade

Memodifikasi Styling Panel "Tools" dan "Contact"

Setelah mendapatkan semua konten di atas di tempat Anda akan melihat panel "tools" dan "contact" sedikit berbeda dengan yang lain. Panel 'Tools' memiliki dua belas kotak dengan judul saja sehingga tinggi mereka saat ini terlalu besar. Panel 'Contact' memiliki tautan pada kotak dan warnanya saat ini tidak berfungsi dengan baik.

Untuk memperbaiki kedua masalah ini, tambahkan kode ini ke file style.styl:

Anda seharusnya memiliki link hitam pada panel "Contact" Anda dan tata letak yang seperti ini pada panel "Tools" Anda:

12. Animasikan Tombol 'Next'

Kita akan menggunakan animasi tombol berikutnya, waktunya setelah pane elemen memiliki yang semua muncul, untuk meminta pengunjung yang mereka bisa pergi ke halaman berikutnya dan juga untuk memastikan mereka menyadari link ada.

Untuk melakukan ini, yang harus kita lakukan adalah menambahkan kelas .wow dan .bounceInUp ke masing-masing tautan 'Next' dan tetapkan penundaan. File index.jade akan dapat mengakses variabel delay dan stagger yang dimasukkan ke setiap panel melalui mixins animasi kami, sehingga kami dapat menggunakan variabel-variabel tersebut dalam pengaturan penundaan untuk secara otomatis menampilkan animasi 'Next' pada waktu yang tepat untuk setiap panel.

Update index.jade Anda jadi berikut:

Kembali ke situs Anda sekarang dan Anda akan melihat tombol 'Next' muncul pada waktu yang tepat untuk setiap panel.

13. Jadikan Responsif

Hal terakhir yang perlu kita lakukan adalah menambahkan beberapa pertanyaan media untuk membuat tata letak responsif. Kami akan mengurangi ukuran tag judul dan font default saat kami menurunkan, mengurangi jumlah kotak kecil per baris dan memperbarui warna dan jaraknya.

Tambahkan kode ini ke akhir style.styl file:

Sekarang ketika Anda menyusut situs Anda segera turun Anda akan memiliki tata letak yang seperti ini:

Wrapping Up

Anda dapat melihat versi lengkap saya sendiri dari situs ini dengan ketrampilan pribadi saya, peralatan dan sebagainya.

Seperti yang Anda lihat, Prepros adalah aplikasi kecil yang hebat dan itu membuat berhadapan dengan preprocessors hampir semudah didapat. Serta Jade dan Stylus juga dapat menangani LESS, Sass, SCSS (dengan Kompas built in), Slim, Coffeescript, LiveScript, Haml dan Markdown. Dengan versi pro, Anda juga bisa mendapatkan FTP dan alat pengujian dan debug tambahan.

Saya kadang-kadang masih mengatur alur kerja berdasarkan Grunt jika saya perlu bekerja dengan beberapa jenis proses tambahan, seperti menghasilkan dokumentasi misalnya, tetapi untuk sebagian besar proyek Prepros telah menjadi standar saya.

Dengan versi gratis yang menawarkan begitu banyak, serta versi Windows dan Mac, ini adalah aplikasi yang harus Anda coba.

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.