İçerik
- 01. Sayfanızın gövde etiketine kod ekleyin
- 02. Ekranın stilini belirleme
- 03. Arızanın görüntülenmesi
- 04. Her şeyi tutun
- 05. Arızayı yönetme
- 06. Normalliğe Dönüş
- Generate New York için biletinizi şimdi alın
Dikkat çekmenin ve onu tutmanın harika bir yolu, yeteneklerinizi en başından sergileyen bir web sitesi düzeni oluşturmaktır (iyi bir web sitesi oluşturucu, oluşturmaya yardımcı olabilir). Ukrayna web ajansı Vintage’ın sitesi bunun harika bir örneğidir ve sizi, cam parçacıklarından yapılmış titreşimli bir logo ile fareyle üzerine gelindiğinde etkinleşen hoş bir aksaklık parçasının göz alıcı bir kombinasyonuyla VR tasarım portföyüne çekiyor.
- Web animasyonu: Kod gerekmez
Az miktarda kullanılan basit bir aksaklık efekti, sitenize hayati önem taşıyan biraz daha fazla görsel ilgi sağlayabilir ve uygulanması şaşırtıcı derecede kolaydır. İşte bunu nasıl yapacağınız.
Aklınızda karmaşık bir web sitesi mi var? Web barındırma hizmetinizin göreve hazır olduğundan emin olun. Ve tasarım dosyalarınızı bulut depolamada güvende tutun.
Dosyaları indirin bu eğitim için.
01. Sayfanızın gövde etiketine kod ekleyin
Basit bir aksaklık efekti yaratmak pek çok farklı yolla yapılabilir. Burada bunu, metnin üst kısmına ekranda açılıp kapanacak bir animasyonlu GIF koyarak yapacağız. İlk olarak, bu kodu sayfanızın gövde etiketine ekleyin.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> ÜRÜN-br> ION / div>
02. Ekranın stilini belirleme
İçerik, Google Fonts'tan Work Sans adlı belirli bir yazı tipi kullanacaktır. Bağlantıyı oradan alın ve baş bölümünüze yerleştirin; ardından CSS'yi stil etiketlerine veya ayrı bir CSS dosyasına ekleyin. Sayfa beyaz metinle siyah yapılır ve tutucu metin için biçimlendirilir.
gövde {arka plan: # 000; font-family: "Work Sans", sans-serif; renk: #fff; } #holder {yazı tipi boyutu: 6em; genişlik: 500px; yükseklik: 300px; kenar boşluğu: 0 otomatik; konum: göreceli; }
03. Arızanın görüntülenmesi
Aksaklık efekti, doğrudan metnin üstüne yerleştirilen bir arka plan görüntüsü olacaktır. Buradaki önemli kısım, kullanıcı metinle etkileşime geçene kadar görünmemesi için opaklığın sıfıra indirilerek görünmez hale getirilmesidir.
#glitch {konum: mutlak; üst: 0; sol: 0; z-endeksi: 10; genişlik:% 100; yükseklik:% 100; arkaplan: url (glitch.gif); opaklık: 0; }
04. Her şeyi tutun
Gövde bölümünün sonuna komut dosyası etiketleri ekleyin ve belgedeki "aksaklık" div öğesine önbelleğe alınmış bir referans oluşturun. Daha sonra 'over' adlı bir değişken false olarak ayarlanır. Bu, kullanıcı metin üzerinde hareket ettiğinde açılacak ve kapatılacaktır.
var gl = document.getElementById ("aksaklık"); var over = false;
05. Arızayı yönetme
Glitch işlevi, fare metin üzerinde hareket ettiğinde çağrılır. Arıza çalışmıyorsa, arıza görünürlüğü açılır ve bir buçuk saniye sonra kapanır.Bunu deneyebilir ve daha öngörülemez hale getirmek için rastgele bir sayı kullanabilirsiniz.
function glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (işlev () {normal ();}, 1500); }}
06. Normalliğe Dönüş
Hata etkisi, kullanıcıyı çok rahatsız edeceği için devam etmemelidir, ancak etkileşimli bir öğe olarak iyi çalışır. Burada kod, metnin üstünde görünmemesi için opaklığı yeniden sıfırlar.
normal fonksiyon () {gl.style.opacity = "0"; }
Generate New York için biletinizi şimdi alın
Üç günlük web tasarım etkinliği Generate New York geri döndü. 25-27 Nisan 2018 tarihleri arasında gerçekleşen ana konuşmacılar arasında SuperFriendly's Dan Mall, web animasyon danışmanı Val Head, tam yığın JavaScript geliştiricisi Wes Bos ve daha fazlası yer alıyor. Ayrıca tam bir günlük atölye çalışmaları ve değerli ağ oluşturma fırsatları var - bunu kaçırmayın. Generate biletinizi şimdi alın.
Bu makale ilk olarak yaratıcı web tasarım dergisi Web Designer'ın 270. sayısında yayınlandı. 270 sayısını buradan satın alın veya Web Designer'a buradan abone olun.
