Isi
- 01. Bersiap
- 02. Selesaikan HTML
- 03. Jelajahi variabel Sass
- 04. Sesuaikan gaya tubuh
- 05. Style pada judul bagian
- 06. Buat CTA menonjol
- 07. Mengatur latar belakang dan layar wadah
- 08. Tambahkan gambar latar belakang
- 09. Tambahkan transisi dan efek hover
- 10. Pindah ke JavaScript
- 11. Menambah dan menghapus kelas
- 12. Buatlah menjadi responsif
Halaman arahan Anda adalah elemen penting dalam tata letak situs web Anda. Ini adalah kesempatan nyata pertama yang Anda miliki untuk memperkenalkan bisnis Anda, atau produk yang Anda jual, jadi desainnya adalah kuncinya. Halaman landing dirancang dengan satu tujuan terfokus yang dikenal sebagai ajakan bertindak (CTA). Penggunaan warna dan gambar untuk melengkapi ajakan bertindak dan pengalaman pengguna adalah suatu keharusan.
- Lihat CodePen yang berfungsi untuk tutorial ini
Dalam tutorial ini, kita akan menjelaskan cara membuat halaman landing yang menarik untuk merek fesyen fiktif. Ini akan berpusat di sekitar desain layar terpisah dengan gambar besar dan transisi animasi yang terjadi saat mengarahkan kursor.Halaman ini akan memiliki dua tombol ajakan bertindak yang jelas dan kami akan menggunakan HTML, Sass untuk gaya dan sentuhan vanilla JavaScript yang menggunakan sintaks ES6 (ingat untuk memastikan web hosting Anda sesuai dengan kebutuhan situs web Anda). Terlalu rumit? Buat situs web tanpa perlu kode, coba pembuat situs web sederhana.
01. Bersiap
Jika Anda menggunakan CodePen, pastikan CSS disetel ke 'SCSS' di setelan Pena. Anda dapat melakukan perubahan ini dengan mengklik tab pengaturan, pilih 'CSS' dan mengubah CSS Preprocessor menjadi SCSS di pilihan drop-down.
Kemudian kita bisa mulai menambahkan HTML kita. Kami akan membungkus bagian yang disebut 'kiri' dan bagian yang disebut 'kanan' dalam kelas penampung, dengan kedua bagian diberi kelas 'layar'.
div> bagian> / bagian> bagian> / bagian> / div>
02. Selesaikan HTML
Untuk menyelesaikan HTML kami, kami akan menambahkan judul untuk setiap bagian menggunakan h1 menandai. Di bawahnya kita perlu menambahkan tombol, yang akan terhubung ke halaman lain jika ini adalah proyek dunia nyata. Kami akan memberikan ini kelas tombol agar semuanya tetap bagus dan sederhana.
div> section> h1> Fashion Pria / h1> tombol> a href = "#"> Pelajari Lebih Lanjut / a> / button> / section> section> h1> Fashion Wanita / h1> tombol> a href = "#"> Pelajari Lebih / a> / tombol> / bagian>
03. Jelajahi variabel Sass
Satu hal yang kita semua suka tentang Sass adalah penggunaan variabel. Meskipun variabel CSS asli mendapatkan lebih banyak dukungan, kami akan menjaga keamanan dengan menggunakan Sass. Kami akan meletakkan ini di bagian atas kami .scss, dan Anda dapat memilih warna apa pun yang Anda inginkan, tetapi menggunakan rgba nilai-nilai akan memberi kita lebih banyak fleksibilitas.
/ * * Variabel * * / $ container-BgColor: # 444; $ left-bgWarna: rgba (136, 226, 247, 0.7); $ tombol-kiri-melayang: rgba (94, 226, 247, 0.7); $ right-bgWarna: rgba (227, 140, 219, 0.8); $ tombol-kanan-melayang: rgba (255, 140, 219, 0.7); $ lebar melayang: 75%; $ lebar kecil: 25%; $ animateSpeed: 1000ms;
04. Sesuaikan gaya tubuh
Pertama, kita akan menghapus semua padding dan margin default ke body dan kemudian mengatur font family menjadi Open Sans. Ini hanya akan memengaruhi tombol, jadi tidak masalah font apa yang kita gunakan. Kemudian kita akan mengatur lebar dan tinggi menjadi 100% dan pastikan bahwa apa pun yang meluap di sumbu X akan disembunyikan.
html, body {padding: 0; margin: 0; font-family: ’Open Sans’, sans-serif; lebar: 100%; tinggi: 100%; overflow-x: tersembunyi; }
05. Style pada judul bagian
Saatnya memilih font Google untuk judul bagian - kami telah memilih Tampilan Playfair. Kemudian gunakan translateX kita dapat memastikan judul bagian selalu berpusat pada sumbu X.
h1 {ukuran font: 5rem; warna: #fff; posisi: mutlak; kiri: 50%; atas: 20%; transform: translateX (-50%); ruang-putih: nowrap; font-family: ’Playfair Display’, serif; }
06. Buat CTA menonjol
Tombol kami akan bertindak sebagai ajakan bertindak, jadi tombol ini harus berukuran besar, tebal, dan diposisikan di tempat yang mudah diklik. Kedua tombol akan memiliki bingkai putih dan efek transisi yang menarik. Gaya default untuk kedua tombol akan sama, namun kami akan mengubah warnanya saat mengarahkan kursor.
.button {display: block; posisi: mutlak; kiri: 50%; atas: 50%; tinggi: 2.6rem; padding-top: 1.2rem; lebar: 15rem; text-align: center; warna putih; batas: 3px solid #fff; radius batas: 4px; font-weight: 600; text-transform: huruf besar; dekorasi-teks: tidak ada; transform: translateX (-50%); transisi: semua .2s;
Tombol utama akan memiliki efek hover sederhana yang bagus dan kami akan menggunakan variabel Sass yang kami tentukan untuk warnanya, yang akan menjadi warna yang mirip dengan latar belakang halaman.
.screen.left .button: hover {background-color: $ left-button-hover; border-color: $ left-button-hover; } .screen.right .button: hover {background-color: $ right-button-hover; border-color: $ right-button-hover;
07. Mengatur latar belakang dan layar wadah
Kelas kontainer akan bertindak sebagai pembungkus halaman kami dan kami akan mengatur posisinya menjadi relatif, hanya karena kami ingin memposisikan layar ke posisi absolut. Kami akan memberi penampung warna latar belakang default, tetapi tentu saja ini tidak akan terlihat karena kami akan menyetel warna yang berbeda untuk kedua latar belakang layar.
.container {position: relative; lebar: 100%; tinggi: 100%; latar belakang: $ container-BgColor; .screen {position: absolute; lebar: 50%; tinggi: 100%; overflow: tersembunyi; }}
08. Tambahkan gambar latar belakang
Baik bagian kiri dan kanan akan menampilkan gambar, dan Anda dapat menemukan gambar stok bebas royalti dari situs web seperti Unsplash, Pixabay atau Pexels (yang telah saya gunakan dalam tutorial ini). Untuk mempermudah, saya telah menggunakan layanan berbagi dan hosting gambar gratis yang disebut imgbb yang dapat kita tautkan di CSS kita.
.screen.left {kiri: 0; background: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) pusat pusat tanpa pengulangan; ukuran latar belakang: penutup; &: sebelum {position: absolute; kandungan: ""; lebar: 100%; tinggi: 100%; background: $ left-bgColor; }}
Sisi kanan halaman juga akan menampilkan gambar latar belakang menggunakan imgbb, dan kami akan mengatur warna latar belakang menjadi merah muda. Sekali lagi, kami mengatur ukuran latar belakang menjadi penutup. Ini akan memungkinkan kita untuk menutupi seluruh elemen yang mengandung, yang dalam kasus kita adalah .layar kelas.
.screen.right {kanan: 0; background: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) pusat pusat tanpa pengulangan; ukuran latar belakang: penutup; &: sebelum {position: absolute; kandungan: ""; lebar: 100%; tinggi: 100%; latar belakang: $ right-bgColor; }}
09. Tambahkan transisi dan efek hover
Kecepatan animasi untuk efek hover kita di kedua layar akan dikontrol oleh transisi yang menyimpan nilai variabel kita $ animateSpeed, yaitu 1000ms (satu detik). Kemudian kita akan menyelesaikannya dengan memberikan animasi sedikit kemudahan, yang merupakan kemudahan masuk dan keluar yang akan membantu memberikan animasi yang lebih halus.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {transisi: $ animateSpeed all easy-in-out; }
Apa yang kami inginkan terjadi sekarang adalah ketika Anda mengarahkan kursor ke layar kiri, akan ada kelas yang ditambahkan ke bagian itu menggunakan JavaScript (yang akan kita tulis di langkah selanjutnya). Ketika kelas ini ditambahkan, maka layar itu akan meregang ke berapa pun lebar variabel yang kita tentukan - yang akan menjadi 75%, dan kemudian sisi kanan akan disetel ke variabel lebar yang lebih kecil (25%).
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left .right: sebelum {z-index: 2; }
Ini bekerja persis sama dengan sisi kiri, di mana kelas baru akan ditambahkan pada mouse hover menggunakan JavaScript, dan layar kanan akan terbentang sesuai. Kami juga perlu memastikan file z-indeks diatur ke 2 sehingga tombol CTA menjadi lebih menonjol.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: sebelum {z-index: 2; }
10. Pindah ke JavaScript
Kami akan menggunakan sentuhan vanilla JavaScript untuk membantu kami menambah dan menghapus kelas CSS dan kami juga akan menggunakan beberapa fitur ES6 baru. Hal pertama yang perlu kita lakukan adalah mendeklarasikan beberapa variabel konstan.
Karena kami akan menggunakan dokumen lebih dari sekali, kami akan menetapkan variabel konstan yang disebut dokter dan menyimpan dokumen di dalamnya sehingga kita dapat membuat kata 'dokumen' tetap bagus dan pendek.
const doc = dokumen;
Sekarang kita perlu menyetel tiga konstanta lagi yang akan menyimpan file .Baik, .kiri dan .wadah penyeleksi. Alasan kami menggunakan konstanta adalah karena kami tahu kami tidak ingin mengubah nilainya, jadi penggunaan konstanta masuk akal. Dengan ini sekarang ditetapkan, kita dapat melanjutkan dan menambahkan beberapa event mouse ke dalamnya.
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); const container = doc.querySelector (". container");
Menggunakan kiri variabel konstan yang kita deklarasikan pada langkah terakhir, sekarang kita dapat menambahkan event listener ke dalamnya. Acara ini akan menjadi mouseenter acara dan alih-alih menggunakan fungsi panggilan balik, kami akan menggunakan fitur ES6 lain yang disebut Fungsi Panah '(() =>).
// menambahkan kelas ke elemen kontainer di hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Menambah dan menghapus kelas
Pada langkah terakhir, pendengar acara kami menambahkan file mouseenter acara yang menargetkan kelas penampung utama dan menambahkan kelas baru yang disebut arahkan kursor ke kiri ke elemen bagian kiri. Dengan ini disebut ditambahkan, kita sekarang perlu menghapusnya saat kita mengarahkannya. Kami akan melakukan ini dengan menggunakan mouseleave acara dan .menghapus() metode.
// menghapus kelas yang ditambahkan pada hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Sampai sekarang kami telah melakukan semua yang ada di layar kiri. Sekarang kita akan menyelesaikan JavaScript dan menambah serta menghapus kelas pada elemen bagian kanan. Sekali lagi kami telah menggunakan sintaks fungsi panah di sini untuk menjaga semuanya terlihat bagus dan rapi.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Buatlah menjadi responsif
Tidak ada proyek - tidak peduli seberapa besar atau kecil - yang tidak boleh dibuat responsif. Jadi, pada langkah ini kita akan menambahkan beberapa kueri media ke CSS kita, dan menjadikan proyek kecil ini sebagai adaptif untuk perangkat seluler sebaik mungkin. Sebaiknya lihat CodePen asli untuk melihat cara kerjanya.
@media (lebar-maks: 800px) {h1 {font-size: 2rem; }. tombol {width: 12rem; }
Kami telah memastikan bahwa saat lebar halaman kami diturunkan menjadi 800px, ukuran font dan tombol akan berkurang. Jadi, untuk menyelesaikan semuanya, kami ingin menargetkan ketinggian juga dan memastikan tombol kami bergerak ke bawah halaman ketika tinggi halaman di bawah 700px.
@media (max-height: 700px) {.button {top: 70%; }}
Ingin menyimpan halaman Anda? Ekspor sebagai PDF dan simpan di penyimpanan cloud yang aman.
Acara desain web Hasilkan London kembali pada 19-21 September 2018, menawarkan jadwal padat pembicara terkemuka di industri, lokakarya sehari penuh dan peluang jaringan yang berharga - jangan lewatkan. Dapatkan tiket Hasilkan Anda sekarang.
Artikel ini awalnya diterbitkan di majalah net Masalah 305. Berlangganan sekarang.
