Kandungan
- 01. Tambahkan kod pada teg badan halaman anda
- 02. Menggayakan paparan
- 03. Menampilkan kesalahan
- 04. Tahan segalanya
- 05. Menjalankan kesalahan
- 06. Kembali ke normal
- Dapatkan tiket anda untuk Generate New York sekarang
Kaedah yang baik untuk menarik perhatian - dan terus memilikinya - adalah dengan membuat susun atur laman web yang memperlihatkan bakat anda dari luar (pembina laman web yang baik dapat membantu pembangunannya). Laman web agensi laman web Ukraine adalah contoh yang baik, menarik anda ke dalam portfolio reka bentuk VR dengan kombinasi menarik dari logo berdenyut yang dibina dari partikel kaca dan sedikit gangguan yang mengaktifkan hover.
- Animasi web: Tidak memerlukan kod
Kesan kesalahan sederhana yang digunakan dengan bijak dapat memberikan laman web anda sedikit minat visual yang penting, dan sangat mudah dilaksanakan. Inilah cara untuk melakukannya.
Ada fikiran laman web yang kompleks? Pastikan hosting web anda sesuai dengan tugasnya. Dan simpan fail reka bentuk anda dalam simpanan awan.
Muat turun fail untuk tutorial ini.
01. Tambahkan kod pada teg badan halaman anda
Membuat kesan gangguan sederhana boleh dilakukan dengan pelbagai cara. Di sini kita akan melakukannya dengan mempunyai GIF animasi di bahagian atas teks, yang akan dihidupkan dan dimatikan di paparan. Pertama, tambahkan kod ini pada teg badan halaman anda.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Menggayakan paparan
Kandungannya akan menggunakan jenis huruf tertentu dari Google Font yang disebut Work Sans. Dapatkan pautan dari sana dan letakkan di bahagian kepala anda; kemudian tambahkan CSS ke tag gaya atau fail CSS yang berasingan. Halaman dibuat hitam dengan teks putih dan pemegang digayakan untuk teks.
badan {latar belakang: # 000; font-family: 'Work Sans', sans-serif; warna: #fff; } #holder {font-size: 6em; lebar: 500px; tinggi: 300px; margin: 0 automatik; kedudukan: saudara; }
03. Menampilkan kesalahan
Kesan kesalahan akan menjadi gambar latar yang diletakkan tepat di bahagian atas teks. Bahagian penting di sini adalah bahawa ia dibuat tidak kelihatan dengan mengurangkan kelegapan menjadi sifar sehingga tidak muncul sehingga pengguna berinteraksi dengan teks.
#glitch {kedudukan: mutlak; atas: 0; kiri: 0; z-index: 10; lebar: 100%; tinggi: 100%; latar belakang: url (glitch.gif); kelegapan: 0; }
04. Tahan segalanya
Tambahkan tag skrip ke hujung bahagian badan dan buat rujukan cache ke div 'glitch' dalam dokumen. Kemudian pemboleh ubah bernama 'over' ditetapkan ke false. Ini akan dihidupkan dan dimatikan apabila pengguna beralih teks.
var gl = document.getElementById ("kesalahan"); var lebih = salah;
05. Menjalankan kesalahan
Fungsi kesalahan dipanggil ketika tetikus bergerak di atas teks. Sekiranya kesalahan tidak berjalan maka penglihatan kesalahan dihidupkan dan dimatikan setelah satu setengah saat.Anda boleh bereksperimen dengan ini dan menggunakan nombor rawak untuk menjadikannya lebih tidak dapat diramalkan.
gangguan fungsi () {if (over == false) {gl.style.opacity = "1"; setTimeout (fungsi () {normal ();}, 1500); }}
06. Kembali ke normal
Kesan kesalahan tidak boleh berterusan kerana terlalu mengganggu pengguna, tetapi sebagai elemen interaktif ia berfungsi dengan baik. Di sini, kod menetapkan semula kelegapan menjadi sifar sehingga tidak kelihatan di bahagian atas teks.
berfungsi normal () {gl.style.opacity = "0"; }
Dapatkan tiket anda untuk Generate New York sekarang
Acara reka bentuk web tiga hari Generate New York kini kembali. Berlangsung antara 25-27 April 2018, pembentang utama termasuk SuperFriendly's Dan Mall, perunding animasi web Val Head, pembangun JavaScript tumpukan penuh Wes Bos dan banyak lagi. Terdapat juga seharian bengkel dan peluang rangkaian berharga - jangan ketinggalan. Dapatkan tiket Jana anda sekarang.
Artikel ini pada mulanya diterbitkan dalam edisi 270 majalah reka bentuk laman web Web Designer. Beli terbitan 270 di sini atau melanggan Web Designer di sini.
