Bangun halaman arahan layar split animasi

Halaman pendaratan Anda adalah elemen penting dalam Anda Tata Letak Situs Web . Ini adalah peluang nyata pertama yang Anda miliki untuk memperkenalkan bisnis Anda, atau produk yang Anda jual, sehingga desainnya adalah kuncinya. Halaman pendaratan dirancang dengan tujuan tunggal yang dikenal sebagai panggilan untuk bertindak (CTA). Penggunaan warna dan gambar untuk melengkapi panggilan untuk bertindak dan pengalaman pengguna Adalah sebuah keharusan.

• Lihat codepen kerja untuk tutorial ini

Dalam tutorial ini, kita akan berjalan melalui cara membangun halaman arahan yang menarik untuk merek fashion fiksi. Ini akan dipusatkan di sekitar desain layar split dengan gambar besar dan transisi animasi yang terjadi pada hover. Halaman ini akan memiliki dua tombol panggilan ke tindakan yang jelas dan kami akan menggunakan HTML, Kelancangan untuk styling dan sentuhan vanili Javascript yang menggunakan sintaks ES6 (ingat untuk memastikan Anda hosting web. cocok untuk kebutuhan situs web Anda). Terlalu kompleks? Buat situs web tanpa perlu kode, coba sederhana Pembangun Situs Web .

01. Atur

Jika Anda menggunakan codepen, pastikan CSS diatur ke 'SCSS' pada pengaturan pena. Anda dapat membuat perubahan ini dengan mengklik tab Pengaturan, pilih 'CSS' dan ubah preprocessor CSS ke SCSS di opsi drop-down.

Maka kita dapat mulai menambahkan HTML kita. Kita akan membungkus bagian yang disebut 'kiri' dan bagian yang disebut 'kanan' dalam kelas wadah, dengan kedua bagian diberi kelas 'layar'.

 & lt; div class = "wadah" & gt;
  & lt; bagian bagian = "layar kiri" & gt;
  & lt; / bagian & gt;
  & lt; bagian kelas = "layar kanan" & gt;
  & lt; / bagian & gt;
& lt; / div & gt; 

02. Selesaikan HTML

Untuk menyelesaikan HTML kami, kami akan menambahkan judul untuk setiap bagian menggunakan h1. menandai. Di bawahnya bahwa kita perlu menambahkan tombol, yang akan menautkan ke halaman lain jika ini adalah proyek dunia nyata. Kami akan memberikan ini kelas tombol untuk menjaga hal-hal baik dan sederhana.

 & lt; div class = "wadah" & gt;
   & lt; bagian bagian = "layar kiri" & gt;
    & lt; h1 & gt; mens mode & lt; / h1 & gt;
      & lt; tombol & gt;
       & lt; href = "#" class = "tombol" & gt; Pelajari lebih lanjut & lt; / a & gt;
      & lt; / tombol & gt;
    & lt; / bagian & gt;

    & lt; bagian kelas = "layar kanan" & gt;
       & lt; h1 & gt; womens fashion & lt; / h1 & gt;
        & lt; tombol & gt;
          & lt; href = "#" class = "tombol" & gt; Pelajari lebih lanjut & lt; / a & gt;
        & lt; / tombol & gt;
     & lt; / section & gt; 

03. Jelajahi variabel SASS

Satu hal yang kita semua cintai tentang SASS adalah penggunaan variabel. Meskipun variabel CSS asli mendapatkan lebih banyak dukungan, kami akan menjaga hal-hal aman dengan menggunakan SASS. Kami akan menempatkan ini di bagian atas kami .css. , dan Anda dapat memilih warna apa pun yang Anda inginkan, tetapi menggunakan RGBA. Nilai akan memberi kita lebih banyak fleksibilitas.

 / ** variabel ** /

$ Container-BGColor: # 444;
$ LEFT-BGCOLOR: RGBA (136, 226, 247, 0.7);
$ Tombol kiri-hover: RGBA (94, 226, 247, 0.7);
$ Right-BGColor: RGBA (227, 140, 219, 0,8);
$ Kanan-tombol-hover: RGBA (255, 140, 219, 0.7);
$ hover-lebar: 75%;
$ lebar kecil: 25%;
$ animatespeed: 1000ms; 

04. Sesuaikan styling tubuh

Pertama, kita akan menghapus semua bantalan default dan margin ke tubuh dan kemudian mengatur keluarga font untuk membuka sans. Ini hanya akan mempengaruhi tombol, jadi tidak masalah terlalu banyak font apa yang kita gunakan. Maka kita akan menetapkan lebar dan tinggi 100% dan pastikan bahwa apa pun yang meluap pada sumbu x akan disembunyikan.

 html, body {
  Padding: 0;
  MARGIN: 0;
  Font-family: 'Buka Sans', Sans-Serif;
  Lebar: 100%;
  Tinggi: 100%;
  overflow-x: tersembunyi;
} 

05. Gaya judul bagian

Sudah waktunya untuk memilih font google untuk judul bagian - kami telah memilih tampilan playfair. Kemudian gunakan Translatex. Kami dapat memastikan judul bagian selalu dipusatkan pada sumbu x.

 h1 {
  Ukuran font: 5REM;
  Warna: #fff;
  Posisi: absolut;
  Kiri: 50%;
  TOP: 20%;
  Transformasi: Translatex (-50%);
  ruang putih: sekarangRAP;

  Font-Family: 'Playfair Display', Serif;
} 

06. Buat CTAS menonjol

Tombol kami akan bertindak sebagai panggilan kami untuk bertindak, jadi ini perlu besar, berani dan diposisikan di mana mereka mudah diklik. Kedua tombol akan memiliki batas putih dan efek transisi yang menarik. Gaya default untuk kedua tombol akan sama, namun kami akan mengubah warna mereka di hover.

 .button {
  Tampilan: blok;
  Posisi: absolut;
  Kiri: 50%;
  TOP: 50%;
  Tinggi: 2.6REM;
  Padding-top: 1.2Rem;
  Lebar: 15REM;
  Teks-Align: Center;
  warna putih;
  Batas: 3px solid #fff;
  BORDER-RADIUS: 4PX;
  Font-weight: 600;
  Teks-transformasi: huruf besar;
  dekorasi teks: tidak ada;
  Transformasi: Translatex (-50%);
  Transisi: Semua .2s; 

Tombol utama akan memiliki efek hover sederhana yang bagus dan kami akan menggunakan variabel SASS yang kami tentukan untuk warna, yang akan menjadi warna yang mirip dengan latar belakang halaman.

 .Screen.LEFT .button: hover {
  Latar Belakang - Warna: $ Tombol kiri-melayang;
  BORDER-COLOR: $ Tombol kiri-melayang;
}

.creen.right .button: hover {
  Latar Belakang - Warna: $ Tombol kanan-melayang;
  BORDER-WORMARY: $ HOY-TOMBOL-HOVER; 

07. Atur latar belakang dan layar wadah

Kelas kontainer akan bertindak sebagai pembungkus halaman kami dan kami akan menetapkan posisi ini ke relatif, hanya karena kami ingin memposisikan layar ke posisi absolut. Kami akan memberikan wadah warna latar belakang default, tetapi tentu saja ini tidak akan terlihat karena kami akan menetapkan warna yang berbeda untuk kedua latar belakang layar.

 .container {
  Posisi: Relatif;
  Lebar: 100%;
  Tinggi: 100%;
  Latar belakang: $ kontainer-bgcolor;
  
    .layar {
      Posisi: absolut;
      Lebar: 50%;
      Tinggi: 100%;
      Overflow: Tersembunyi;
    }
} 

08. Tambahkan gambar latar belakang

Bagian kiri dan kanan akan menampilkan gambar, dan Anda dapat menemukan gambar stok royalti dari situs web seperti Unsplash. , Pixabay. atau Pexels. (yang saya gunakan dalam tutorial ini). Untuk membuat segalanya lebih mudah, saya telah menggunakan hosting gambar gratis dan layanan berbagi yang disebut IMGBB yang dapat kami tautkan di CSS kami.

 .Screen.Left {
  Kiri: 0;
  Latar Belakang: URL ('https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg') Pusat Pusat Tidak Berulang;
  ukuran latar belakang: penutup;
  
    & amp;: sebelum {
       Posisi: absolut;
      kandungan: "";
      Lebar: 100%;
      Tinggi: 100%;
      Latar belakang: $ bgcolor kiri;
    }
} 

Sisi kanan halaman juga akan menampilkan gambar latar belakang menggunakan IMGBB, dan kami akan mengatur warna latar belakang menjadi pink. Sekali lagi, kami mengatur ukuran latar belakang penutup . Ini akan memungkinkan kita untuk menutupi seluruh elemen yang mengandung, yang dalam kasus kita adalah .layar kelas.

 .creen.right {
  Kanan: 0;
  Latar Belakang: URL ('https://preview.bb.co/mtopcr/seth_doyle_82563_1.jpg') Pusat Pusat Tidak Ulangi;
  ukuran latar belakang: penutup;
  
   & amp;: sebelum {
      Posisi: absolut;
      kandungan: "";
      Lebar: 100%;
      Tinggi: 100%;
      Latar belakang: $ BG-BGCOLOR;
    }
} 

09. Tambahkan efek transisi dan hover

Kecepatan animasi untuk efek hover kami pada kedua layar akan dikendalikan oleh transisi yang memiliki nilai variabel kami $ animatespeed. , yaitu 1000ms (satu detik). Kemudian kita akan selesai dengan memberikan beberapa pelonggaran animasi, yang merupakan kemudahan masuk dan keluar yang akan membantu memberi kita animasi yang lebih halus.

 .Screen.Left, .creen.right, .creen.right: sebelumnya, .creen.Left: sebelum {
  Transisi: $ AnimatesPeed semua kemudahan dan kemudahan;
} 

Apa yang kita inginkan terjadi sekarang adalah ketika Anda mengarahkan kursor ke layar kiri, akan ada kelas yang ditambahkan ke bagian itu menggunakan Javascript (yang akan kami tulis di langkah selanjutnya). Ketika kelas ini ditambahkan, maka layar itu akan meregang dengan apa pun yang lebar variabel yang kami tentukan - yang akan menjadi 75%, dan kemudian sisi kanan akan diatur ke variabel lebar yang lebih kecil (25%).

 .hover-Left .LEFT {
  Lebar: $ lebar hover;
}

.hover-left .right {
  Lebar: $ Lebar Kecil;
}
.hover-left .right: sebelum {
  Z-index: 2;
} 

Ini berfungsi persis sama dengan sisi kiri, di mana kelas baru akan ditambahkan pada hover mouse menggunakan javascript, dan layar yang tepat akan membentang sesuai. Kita juga perlu memastikan z-index. diatur ke 2. Jadi tombol CTA menjadi lebih menonjol.

 .hover-right .right {
  Lebar: $ lebar hover;
}

.hover-right .LEFT {
  Lebar: $ Lebar Kecil;
}

.hover-right .Left: sebelum {
  Z-index: 2;
} 

10. Pindah ke Javascript

Kami akan menggunakan sentuhan vanili 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 kita akan menggunakan dokumen lebih dari sekali, kami akan menetapkan variabel konstan yang disebut dokter dan simpan dokumen di dalamnya sehingga kami dapat menyimpan kata 'dokumen' bagus dan pendek.

 Const Doc = Document; 

Sekarang kita perlu mengatur tiga konstanta lagi yang akan menyimpan .Baik , .kiri dan .wadah Selectors. Alasan kami menggunakan konstanta adalah karena kami tahu kami tidak ingin mengubah nilai ini, jadi menggunakan konstanta masuk akal. Dengan set sekarang ini, kita dapat melanjutkan dan menambahkan beberapa peristiwa mouse kepada mereka.

 Const Right = doc.queryselector (". Benar");
const kiri = doc.queryselector (". kiri");
wadah const = doc.queryselector (". wadah"); 

Menggunakan kiri Variabel konstan yang kami nyatakan pada langkah terakhir, sekarang kita dapat menambahkan pendengar acara untuk itu. Acara ini akan menjadi Mouseenter. acara dan bukannya menggunakan fungsi panggilan balik, kami akan menggunakan fitur ES6 lain yang disebut Fungsi panah '(() = & gt;) .

 // tambahkan kelas ke elemen kontainer pada hover
kiri.addeventlistener ("mouseenter", () = & gt; {
  wadah.classlist.add ("hover-left");
}); 

11. Tambah dan Hapus Kelas

Pada langkah terakhir, pendengar acara kami menambahkan a Mouseenter. acara yang menargetkan kelas wadah utama dan menambahkan kelas baru yang disebut Hover-Left. ke elemen bagian kiri. Dengan ini disebut menambahkan, kita sekarang perlu menghapusnya ketika kita melingkari itu. Kami akan melakukan ini dengan menggunakan Mouseleave. acara dan .menghapus() metode.

 // menghapus kelas yang ditambahkan pada hover
kiri.addeventlistener ("mouseleave", () = & gt; {
  wadah.classlist.remove ("hover-left");
}); 

Sampai sekarang kami telah melakukan semuanya di layar kiri. Sekarang kami akan menyelesaikan JavaScript dan menambah dan menghapus kelas pada elemen bagian kanan. Lagi-lagi kami telah menggunakan sintaks fungsi panah di sini untuk menjaga semuanya terlihat bagus dan rapi.

 benar.addeventlistener ("mouseenter", () = & gt; {
  wadah.classlist.add ("hover-right");
});

right.addeventlistener ("mouseleave", () = & gt; {
  wadah.classlist.remove ("hover-right");
}); 

12. Buat responsif

Tidak ada proyek - tidak peduli seberapa besar atau kecil - harus menghindari responsif. Jadi, pada langkah ini kami akan menambahkan beberapa pertanyaan media ke CSS kami, dan membuat proyek kecil ini adaptif dengan perangkat seluler sebaik mungkin. Perlu memeriksa codepen asli Untuk melihat cara kerjanya.

 @Media (Lebar Maks: 800px) {
  h1 {
    Ukuran font: 2REM; }

  .button {
    Lebar: 12REM;
  } 

Kami telah memastikan bahwa ketika lebar halaman kami turun ke 800px, font dan tombol akan berkurang ukurannya. Jadi, untuk menyelesaikan semuanya, kami ingin menargetkan ketinggian juga dan pastikan tombol kami bergerak ke bawah halaman ketika ketinggian halaman berada di bawah 700px.

 @Media (Tinggi Maks: 700px) {
  .button {
    TOP: 70%;
}} 

Ingin menyimpan halaman Anda? Ekspor mereka sebagai PDF dan selamatkan mereka dengan aman penyimpanan awan .

Acara Desain Web Hasilkan London. Kembali pada 19-21 September 2018, menawarkan jadwal pembicara terkemuka di industri, seharian lokakarya dan peluang jaringan yang berharga - jangan lewatkan. Dapatkan tiket penghasil Anda sekarang .

Artikel ini awalnya diterbitkan di Net Magazine masalah 305. . Berlangganan sekarang .

Baca lebih lajut:

• 5 situs web baru sensasional untuk diilhami oleh
• Buat efek teks 3D animasi
• 19 Situs Web Scrolling Parallax Besar