Kandungan
- 01. Bersiap sedia
- 02. Selesaikan HTML
- 03. Terokai pemboleh ubah Sass
- 04. Laraskan gaya badan
- 05. Gaya tajuk bahagian
- 06. Jadikan CTA menonjol
- 07. Tetapkan latar belakang dan skrin bekas
- 08. Tambahkan gambar latar
- 09. Tambahkan peralihan dan kesan hover
- 10. Pindah ke JavaScript
- 11. Tambah dan buang kelas
- 12. Jadikannya responsif
Halaman arahan anda adalah elemen penting dalam susun atur laman web anda. Ini adalah peluang pertama yang anda mesti memperkenalkan perniagaan anda, atau produk yang anda jual, jadi reka bentuknya adalah kunci. Halaman pendaratan dirancang dengan objektif tunggal yang dikenali sebagai ajakan bertindak (CTA). Penggunaan warna dan gambar untuk melengkapkan ajakan bertindak dan pengalaman pengguna adalah suatu keharusan.
- Lihat CodePen yang berfungsi untuk tutorial ini
Dalam tutorial ini, kita akan membahas cara membina halaman arahan yang menarik untuk jenama fesyen fiksyen. Ini akan berpusat di sekitar reka bentuk layar split dengan gambar besar dan peralihan animasi yang berlaku pada hover.Halaman ini akan mempunyai dua butang ajakan bertindak yang jelas dan kami akan menggunakan HTML, Sass untuk digayakan dan sentuhan JavaScript vanilla yang menggunakan sintaks ES6 (ingat untuk memastikan hosting web anda sesuai dengan keperluan laman web anda). Terlalu kompleks? Buat laman web tanpa memerlukan kod, cubalah pembangun laman web yang mudah.
01. Bersiap sedia
Sekiranya anda menggunakan CodePen, pastikan CSS diatur ke 'SCSS' dalam tetapan Pen. Anda boleh melakukan perubahan ini dengan mengklik pada tab tetapan, pilih 'CSS' dan ubah CSS Preprocessor menjadi SCSS dalam pilihan drop-down.
Kemudian kita boleh mula menambahkan dalam HTML kita. Kami akan membungkus bahagian yang disebut 'kiri' dan bahagian yang disebut 'kanan' dalam kelas kontena, dengan kedua-dua bahagian diberi kelas 'layar'.
div> bahagian> / bahagian> bahagian> / bahagian> / div>
02. Selesaikan HTML
Untuk menyelesaikan HTML kami, kami akan menambahkan tajuk untuk setiap bahagian menggunakan h1 teg. Di bawahnya kita perlu menambahkan butang, yang akan menghubungkan ke halaman lain jika ini adalah projek dunia nyata. Kami akan memberikan kelas ini butang untuk menjaga perkara-perkara baik dan sederhana.
div> bahagian> h1> Mens Fashion / h1> butang> a href = "#"> Ketahui Lebih Lanjut / a> / butang> / bahagian> bahagian> h1> Fesyen Wanita / h1> butang> a href = "#"> Pelajari Lagi / a> / butang> / bahagian>
03. Terokai pemboleh ubah Sass
Satu perkara yang kita semua gemari mengenai Sass adalah penggunaan pemboleh ubah. Walaupun pemboleh ubah CSS asli mendapat lebih banyak sokongan, kami akan menjaga keselamatan dengan menggunakan Sass. Kami akan meletakkannya di bahagian atas .scss, dan anda boleh memilih warna apa sahaja yang anda mahukan, tetapi menggunakan rgba nilai akan memberi kita lebih banyak fleksibiliti.
/ * * Pemboleh ubah * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ left-button-hover: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ right-button-hover: rgba (255, 140, 219, 0.7); $ hover-lebar: 75%; $ kecil-lebar: 25%; $ animateSpeed: 1000ms;
04. Laraskan gaya badan
Pertama, kami akan mengosongkan semua padding dan margin lalai ke badan dan kemudian menetapkan keluarga fon menjadi Open Sans. Ini hanya akan mempengaruhi butang, jadi tidak perlu terlalu banyak fon apa yang kita gunakan. Kemudian kita akan menetapkan lebar dan tinggi ke 100% dan pastikan bahawa apa sahaja yang meluap pada paksi X tersembunyi.
html, body {padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; lebar: 100%; tinggi: 100%; limpahan-x: tersembunyi; }
05. Gaya tajuk bahagian
Sudah tiba masanya untuk memilih fon Google untuk tajuk bahagian - kami telah memilih Playfair Display. Kemudian menggunakan terjemahkanX kita dapat memastikan tajuk bahagian sentiasa berpusat pada paksi X.
h1 {font-size: 5rem; warna: #fff; kedudukan: mutlak; kiri: 50%; atas: 20%; transform: translateX (-50%); ruang putih: nowrap; font-family: ‘Playfair Display’, serif; }
06. Jadikan CTA menonjol
Butang kami akan bertindak sebagai ajakan bertindak, jadi butang ini harus besar, berani dan berada di tempat yang mudah diklik. Kedua-dua butang akan mempunyai sempadan putih dan kesan peralihan yang menarik. Gaya lalai untuk kedua-dua butang akan sama, namun kami akan menukar warnanya pada hover.
.button {paparan: blok; kedudukan: mutlak; kiri: 50%; atas: 50%; tinggi: 2.6rem; padding-top: 1.2rem; lebar: 15rem; text-align: tengah; warna: putih; sempadan: 3px padat #fff; sempadan-jejari: 4px; berat huruf: 600; text-transform: huruf besar; hiasan teks: tiada; transform: translateX (-50%); peralihan: semua .2s;
Butang utama akan mempunyai kesan hover sederhana yang bagus dan kami akan menggunakan pemboleh ubah Sass yang kami tentukan untuk warna, yang akan menjadi warna yang serupa dengan latar belakang halaman.
.screen.left .button: hover {background-color: $ left-button-hover; warna sempadan: $ kiri-butang-hover; } .screen.right .button: hover {background-color: $ right-button-hover; sempadan-warna: $ kanan-butang-hover;
07. Tetapkan latar belakang dan skrin bekas
Kelas kontena akan bertindak sebagai pembungkus halaman kami dan kami akan menetapkan kedudukan ini kepada relatif, hanya kerana kami ingin meletakkan skrin ke kedudukan mutlak. Kami akan memberikan kontena warna latar belakang lalai, tetapi tentu saja ini tidak akan dapat dilihat kerana kami akan menetapkan warna yang berbeza untuk kedua-dua latar layar.
.konten {kedudukan: relatif; lebar: 100%; tinggi: 100%; latar belakang: $ container-BgColor; . skrin {kedudukan: mutlak; lebar: 50%; tinggi: 100%; limpahan: tersembunyi; }}
08. Tambahkan gambar latar
Kedua-dua bahagian kiri dan kanan akan memaparkan gambar, dan anda boleh mendapatkan gambar stok bebas royalti dari laman web seperti Unsplash, Pixabay atau Pexels (yang telah saya gunakan dalam tutorial ini). Untuk mempermudah, saya telah menggunakan perkhidmatan hosting dan perkongsian gambar percuma yang disebut imgbb yang boleh kami pautkan di CSS kami.
.screen.left {kiri: 0; latar belakang: url pusat ('https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp') pusat tidak berulang; latar belakang: penutup; &: sebelum {kedudukan: mutlak; kandungan: ""; lebar: 100%; tinggi: 100%; latar belakang: $ left-bgColor; }}
Bahagian kanan halaman juga akan memaparkan gambar latar menggunakan imgbb, dan kami akan menetapkan warna latar menjadi merah jambu. Sekali lagi, kami menetapkan ukuran latar belakang penutup. Ini akan membolehkan kita merangkumi keseluruhan elemen yang mengandungi, yang dalam kes kita adalah skrin kelas.
.screen.right {kanan: 0; latar belakang: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) pusat pusat tidak diulang; latar belakang: penutup; &: sebelum {kedudukan: mutlak; kandungan: ""; lebar: 100%; tinggi: 100%; latar belakang: $ right-bgColor; }}
09. Tambahkan peralihan dan kesan hover
Kelajuan animasi untuk kesan hover kami pada kedua skrin akan dikendalikan oleh peralihan yang menyimpan nilai pemboleh ubah kami $ animateSpeed, iaitu 1000ms (satu saat). Kemudian kita akan selesai dengan memberi kelonggaran kepada animasi, yang merupakan kemudahan masuk dan keluar yang akan membantu memberi kita animasi yang lebih halus.
.screen.left, .screen.right, .screen.right: sebelumnya, .screen.left: sebelum {peralihan: $ animateSpeed all easy-in-out; }
Apa yang ingin kami lakukan sekarang ialah apabila anda mengarahkan kursor ke kiri, akan ada kelas yang ditambahkan ke bahagian tersebut menggunakan JavaScript (yang akan kami tulis pada langkah selanjutnya). Apabila kelas ini ditambahkan, maka skrin itu akan meluas ke lebar apa pun pemboleh ubah yang kami tentukan - yang akan menjadi 75%, dan kemudian sebelah kanan akan ditetapkan ke pemboleh ubah lebar yang lebih kecil (25%).
.hover-kiri .left {width: $ hover-width; } .hover-kiri. kanan {lebar: $ kecil-lebar; } .hover-kiri. kanan: sebelum {z-index: 2; }
Ini berfungsi sama seperti sebelah kiri, di mana kelas baru akan ditambahkan pada tetikus tetikus menggunakan JavaScript, dan layar kanan akan terbentang sesuai. Kita juga perlu memastikannya z-indeks ditetapkan ke 2 jadi butang CTA menjadi lebih menyerlah.
.hover-kanan .right {width: $ hover-width; } .hover-kanan .left {width: $ small-width; } .hover-kanan. kiri: sebelum {z-index: 2; }
10. Pindah ke JavaScript
Kami akan menggunakan sentuhan JavaScript vanila untuk membantu kami menambah dan membuang kelas CSS dan kami juga akan menggunakan beberapa ciri ES6 baru. Perkara pertama yang perlu kita lakukan ialah menyatakan beberapa pemboleh ubah tetap.
Kerana kita akan menggunakan dokumen lebih daripada sekali, kita akan menetapkan pemboleh ubah tetap yang dipanggil dokumen dan simpan dokumen di dalamnya sehingga kita dapat memastikan perkataan 'dokumen' bagus dan pendek.
const doc = dokumen;
Sekarang kita perlu menetapkan tiga lagi pemalar yang akan menyimpannya betul, .dibiarkan dan .kontena pemilih. Sebab kami menggunakan pemalar adalah kerana kami tahu kami tidak mahu mengubah nilai ini, jadi penggunaan pemalar masuk akal. Dengan set ini sekarang, kita dapat meneruskan dan menambahkan beberapa acara tetikus pada mereka.
const right = doc.querySelector (". betul"); const left = doc.querySelector (". kiri"); const container = doc.querySelector (". container");
Menggunakan dibiarkan pemboleh ubah malar yang kami nyatakan pada langkah terakhir, kini kami dapat menambahkan pendengar peristiwa padanya. Acara ini akan menjadi pusat tetikus acara dan bukannya menggunakan fungsi panggilan balik, kami akan menggunakan ciri ES6 lain yang dipanggil Fungsi Anak Panah ’(() =>).
// menambahkan kelas ke elemen kontena pada hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Tambah dan buang kelas
Pada langkah terakhir, pendengar acara kami menambah a pusat tetikus acara yang mensasarkan kelas kontena utama dan menambah kelas baru yang dipanggil arahkan ke kiri ke elemen bahagian kiri. Dengan penambahan yang disebut ini, kita sekarang perlu menghapusnya ketika mengarahkannya keluar. Kami akan melakukan ini dengan menggunakan mouseleave acara dan . keluarkan () kaedah.
// mengalih keluar kelas yang ditambahkan pada hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Sehingga kini kami telah melakukan semua perkara di skrin kiri. Sekarang kita akan menyelesaikan JavaScript dan menambah dan membuang kelas pada elemen bahagian yang betul. Sekali lagi kami telah menggunakan sintaks fungsi anak panah di sini untuk memastikan semuanya kelihatan baik dan kemas.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Jadikannya responsif
Tidak ada projek - tidak kira seberapa besar atau kecil - tidak boleh dibuat responsif. Oleh itu, dalam langkah ini kita akan menambahkan beberapa pertanyaan media ke CSS kita, dan menjadikan projek kecil ini sebagai adaptif untuk peranti mudah alih dengan sebaik mungkin. Anda perlu melihat CodePen yang asal untuk melihat cara kerjanya.
@media (lebar maksimum: 800px) {h1 {font-size: 2rem; }. butang {lebar: 12rem; }
Kami telah memastikan bahawa apabila lebar halaman kami turun menjadi 800px, ukuran fon dan butang akan berkurang. Oleh itu, untuk menyelesaikan sesuatu, kami juga mahu menyasarkan ketinggian dan memastikan butang kami bergerak ke bawah halaman apabila ketinggian halaman berada di bawah 700px.
@media (ketinggian maksimum: 700px) {.tombol {atas: 70%; }}
Ingin menyimpan halaman anda? Eksportnya sebagai PDF dan simpan dalam simpanan awan yang selamat.
Acara reka bentuk laman web Jana London kembali pada 19-21 September 2018, menawarkan jadual pembicara terkemuka industri, bengkel seharian penuh dan peluang rangkaian berharga - jangan ketinggalan. Dapatkan tiket Jana anda sekarang.
Artikel ini pada mulanya diterbitkan di majalah net terbitan 305. Langgan sekarang.
