Isi
- 01. Tambahkan kode ke tag tubuh halaman Anda
- 02. Mendesain tampilan
- 03. Menampilkan kesalahan
- 04. Pegang semuanya
- 05. Menjalankan kesalahan
- 06. Kembali ke normalitas
- Dapatkan tiket Anda untuk Hasilkan New York sekarang
Cara yang bagus untuk menarik perhatian - dan mempertahankannya - adalah dengan membuat tata letak situs web yang memamerkan bakat Anda sejak awal (pembuat situs web yang layak dapat membantu membangunnya). Situs agen web Ukraina Vintage adalah contoh yang bagus untuk hal ini, menarik Anda ke dalam portofolio desain VR-nya dengan kombinasi menarik dari logo berdenyut yang dibuat dari partikel kaca dan sedikit kesalahan indah yang aktif saat mengarahkan kursor.
- Animasi web: Tidak diperlukan kode
Efek kesalahan sederhana yang digunakan dengan hemat dapat memberikan sedikit daya tarik visual tambahan yang penting pada situs Anda, dan ternyata sangat mudah untuk diterapkan. Berikut cara melakukannya.
Punya situs web yang kompleks? Pastikan web hosting Anda sesuai dengan tugasnya. Dan simpan file desain Anda dengan aman di penyimpanan cloud.
Unduh file untuk tutorial ini.
01. Tambahkan kode ke tag tubuh halaman Anda
Membuat efek kesalahan sederhana dapat dilakukan dengan berbagai cara. Di sini kita akan melakukannya dengan memiliki GIF animasi di atas teks, yang akan dihidupkan dan dimatikan pada tampilan. Pertama, tambahkan kode ini ke tag badan halaman Anda.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Mendesain tampilan
Konten tersebut akan menggunakan jenis huruf tertentu dari Google Fonts yang disebut Work Sans. Ambil tautannya dari sana dan letakkan di bagian kepala Anda; lalu tambahkan CSS ke salah satu tag gaya atau file CSS terpisah. Halaman dibuat hitam dengan teks putih dan penahannya ditata untuk teks.
body {background: # 000; font-family: ’Work Sans’, sans-serif; warna: #fff; } #holder {font-size: 6em; lebar: 500px; tinggi: 300px; margin: 0 otomatis; posisi: relatif; }
03. Menampilkan kesalahan
Efek kesalahan akan menjadi gambar latar belakang yang ditempatkan langsung di atas teks. Bagian penting di sini adalah dibuat tidak terlihat dengan mengurangi opasitas menjadi nol sehingga tidak muncul hingga pengguna berinteraksi dengan teks.
#glitch {position: absolute; atas: 0; kiri: 0; z-indeks: 10; lebar: 100%; tinggi: 100%; background: url (glitch.gif); opasitas: 0; }
04. Pegang semuanya
Tambahkan tag skrip ke akhir bagian isi dan buat referensi dalam cache ke div 'glitch' di dokumen. Kemudian variabel bernama 'over' disetel ke false. Ini akan dinyalakan dan dimatikan saat pengguna memindahkan teks.
var gl = document.getElementById ("glitch"); var over = false;
05. Menjalankan kesalahan
Fungsi glitch dipanggil saat mouse bergerak di atas teks. Jika kesalahan tidak berjalan maka visibilitas kesalahan diaktifkan dan dimatikan setelah satu setengah detik.Anda dapat bereksperimen dengan ini dan menggunakan nomor acak untuk membuatnya lebih tidak terduga.
function glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Kembali ke normalitas
Efek glitch tidak boleh tetap aktif karena akan terlalu mengganggu pengguna, tetapi sebagai elemen interaktif, efek ini berfungsi dengan baik. Di sini, kode menyetel ulang opasitas kembali ke nol sehingga tidak terlihat di atas teks.
fungsi normal () {gl.style.opacity = "0"; }
Dapatkan tiket Anda untuk Hasilkan New York sekarang
Acara desain web tiga hari Hasilkan New York kembali. Berlangsung antara 25-27 April 2018, pembicara utama termasuk Dan Mall SuperFriendly, konsultan animasi web Val Head, pengembang JavaScript full-stack Wes Bos dan banyak lagi. Ada juga lokakarya sehari penuh dan peluang jaringan yang berharga - jangan lewatkan. Dapatkan tiket Hasilkan Anda sekarang.
Artikel ini awalnya diterbitkan dalam edisi 270 majalah desain web kreatif Web Designer. Beli masalah 270 di sini atau berlangganan Desainer Web di sini.
