Tambahkan efek kesalahan ke situs web Anda

Sep 12, 2025
Bagaimana caranya

Cara yang bagus untuk menarik perhatian - dan tetap memegangnya - adalah membuat a Tata Letak Situs Web yang memamerkan bakat Anda dari off. Agen Web Ukraina Vintage. Situs ini adalah contoh yang bagus dari ini, menarik Anda ke VR-nya Portofolio desain Dengan kombinasi yang menarik dari logo berdenyut yang dibangun dari partikel kaca dan sedikit kesalahan yang diaktifkan di sekitar.

  • Animasi Web: Tidak diperlukan kode

Efek kesalahan sederhana yang digunakan dengan hemat dapat memberikan sedikit minat visual yang sangat penting, dan secara mengejutkan mudah diimplementasikan. Inilah cara melakukannya.

Unduh file untuk tutorial ini.

01. Tambahkan kode ke tag tubuh halaman Anda

Vintage's glitch effect is easy to reproduce if you know its secret

Efek Glitch Vintage mudah bereproduksi jika Anda tahu rahasianya

Membuat efek kesalahan sederhana dapat dilakukan dengan berbagai cara berbeda. Di sini kita akan melakukannya dengan memiliki gif animasi di atas teks, yang akan dihidupkan dan dimatikan di layar. Pertama, tambahkan kode ini ke tag tubuh halaman Anda. 

 & lt; div id = "dudukan" onmouseover = "Glitch ()" & gt;
  & lt; div id = "Glitch" & gt; & lt; / div & gt;
  Web.
  & lt; br & gt; PRODUK-
  & lt; br & gt; ION
& lt; / div & gt;

02. Menata layar

Konten akan menggunakan jenis huruf tertentu dari font Google yang disebut Work Sans. Raih tautan dari sana dan letakkan di bagian kepala Anda; Kemudian tambahkan CSS ke tag gaya atau file CSS terpisah. Halaman ini dibuat hitam dengan teks putih dan dudukan ditata untuk teks. 

 tubuh {
  Latar Belakang: # 000;
  Font-Family: 'Work Sans', Sans-Serif;
  Warna: #fff;
}
# pemegang {
  Ukuran font: 6EM;
  Lebar: 500px;
  Tinggi: 300px;
  MARGIN: 0 AUTO;
  Posisi: Relatif;
}

03. Menampilkan kesalahan

Efek glitch akan menjadi gambar latar belakang yang ditempatkan langsung di atas teks. Bagian penting di sini adalah bahwa itu dibuat tidak terlihat dengan mengurangi opacity menjadi nol sehingga tidak muncul sampai pengguna berinteraksi dengan teks. 

 #glitch {
  Posisi: absolut;
  TOP: 0;
  Kiri: 0;
  Z-index: 10;
  Lebar: 100%;
  Tinggi: 100%;
  Latar Belakang: URL (Glitch.gif);
  Opacity: 0;
}

04. Pegang segalanya

Tambahkan tag skrip ke ujung bagian tubuh dan buat referensi cache ke div 'kesalahan' dalam dokumen. Kemudian variabel bernama 'over' diatur ke false. Ini akan dihidupkan dan dimatikan ketika pengguna pindah melalui teks. 

 var gl = document.getelementbyid ("Glitch");
var over = false;

05. Menjalankan kesalahan

Fungsi kesalahan disebut ketika mouse bergerak melalui teks. Jika kesalahan tidak berjalan maka visibilitas glitch dihidupkan dan dimatikan setelah satu setengah detik. Anda dapat bereksperimen dengan ini dan menggunakan nomor acak untuk membuatnya lebih tidak dapat diprediksi. 

 Glitch Fungsi () {
  Jika (over == false) {
  gl.style.Opacy = "1";
  SUDAHOUT (FUNGSI () {
  normal();
  }, 1500);
  }
}

06. Kembali ke Normalitas

Efek kesalahan seharusnya tidak tetap pada saat itu akan terlalu mengganggu bagi pengguna, tetapi sebagai elemen interaktif itu berfungsi dengan baik. Di sini, kode mengatur ulang opacity kembali ke nol sehingga tidak terlihat di atas teks. 

 Fungsi normal () {
  gl.style.Opacity = "0";
}

Dapatkan tiket Anda untuk menghasilkan New York sekarang

Acara desain web tiga hari Hasilkan New York. kembali. Berlangsung antara 25-27 April 2018, speaker utama termasuk Superfriendly's Dan Mall, Web Animation Consultant Val Head, Full-Stack JavaScript Developer Wes Bos dan banyak lagi. Ada juga hari penuh lokakarya dan peluang jaringan yang berharga - jangan lewatkan. Dapatkan tiket penghasil Anda sekarang .

Artikel ini awalnya diterbitkan dalam edisi 270 dari desainer web Majalah Desain Web Kreatif. Beli masalah 270 di sini atau berlangganan desainer web di sini .

Artikel terkait:

  • Buat Glitch Art dengan filter foto rumit ini
  • Animate SVG dengan JavaScript
  • 10 sumber daya animasi CSS hebat

Bagaimana caranya - Artikel Terpopuler

Cara menggambar seseorang

Bagaimana caranya Sep 12, 2025

Artis mana pun Anda, memahami cara menggambar seseorang adalah keterampilan mendasar. Kuasai bentuk manusia, dan kapan saatnya untuk mulai membuat desain k..

Bangun blog dengan grid dan flexbox

Bagaimana caranya Sep 12, 2025

Dua hingga tiga tahun terakhir telah melihat tata letak bergerak maju dalam lompatan dan batas. Sekarang, teknik modern ini memil..

Cara menggambar karakter dalam pena dan tinta

Bagaimana caranya Sep 12, 2025

Sebagai seorang seniman di studio permainan, saya sudah lupa media tradisional, tetapi tinta selalu menelepon kembali ke saya. Se..

Cara membuat lukisan minyak digital menggunakan artrage

Bagaimana caranya Sep 12, 2025

Melukis secara digital menggunakan a menggambar tablet. dan menggambar artrage perangkat lunak. Menggunakan pada t..

Cara Menggambar Refleksi Metalik

Bagaimana caranya Sep 12, 2025

Ketika cahaya menyerang objek metalik, itu dapat memantulkan kembali objek terdekat dengan cara yang tidak biasa. Biasanya, cahay..

Cara melukis cityscape dengan blok warna

Bagaimana caranya Sep 12, 2025

Pemandangan yang menakjubkan, kaki langit menakjubkan dan cityscapes yang indah membuat foto-foto hebat, tetapi bisa agak menakut..

Cara membuat karakter 3D bergaya untuk game

Bagaimana caranya Sep 12, 2025

Ini Seni 3d. Tutorial akan fokus pada penciptaan avatar semi-bergaya di pembuat karakter ICLONE. Saya akan menunju..

Berkreasilah dengan Potret dan Liquify Aware

Bagaimana caranya Sep 12, 2025

Kita semua memiliki permainan dengan alat Liquify di Photoshop, tetapi dalam iterasi terbaru Photoshop CC, Adobe. ..

Kategori