CSS'de Glitch Metin ve Görüntü Efektleri Nasıl Oluşturulur

Bu eğitimde, size bir aksaklık metin efekti nasıl oluşturulacağını göstereceğiz. Özel efektler ve animasyonlar, web sitelerinin öne çıkmasına yardımcı olabilir, kullanıcı üzerinde ana içeriği okumaya başlamadan önce kullanıcı üzerinde acil bir etki yaratabilir. Ana sayfanız ziyaretçileri vasıl ederseniz, sadece CSS kullanarak tonlarca farklı efektler oluşturabilirsiniz.

Burada aksaklık metni oluşturma sürecimiz aslında animasyon yazılımı ile çalışmaya benzer. Anahtar kareleri belirli noktalara yerleştiririz ve eylemi kontrol etmek için bunları kullanacağız. CSS'deki ana karelerle olan fark, koddaki animasyonun zaman çizelgesi için yüzdeler olarak yazılmalarıdır. Bu, göründüğü kadar göz korkutucu olarak yakın bir yerde değil - denedikten sonra, iyi sonuçlar elde etmek için nispeten basit. Kodlama olmadan iyi sonuçlar almak ister misiniz? Deneyin Web Sitesi Oluşturucu . Ve sitenizi doğru şekilde sorunsuz bir şekilde çalıştırın ağ sağlayıcısı hizmet.

Eğitimde kullanılan az miktarda javascript, görüntüleri sayfaya yükledikten sonra kaldırma ekranını kaldırmak için - ancak buradaki ana odak CSS animasyonu . Ayrıca kullanacağız CSS Grid Öğeleri ekrana yerleştirin.

• Eğitim dosyalarını indirin Filesilo'dan (ücretsiz, giriş gerekli)

01. Kurulum

Başlamak için aç Başlat gelen klasör Proje dosyaları kod düzenleyicinizin içinde. Aç index.html Sadece bir barebones iskelet html sayfasını içeren sayfa. Kafa bölümünde, fontların, tasarımın doğru görüntülenmesi için bağlanması gerekir. Yazı tipleri için stil bağlantısını ekleyin.

<link href="https://fonts.googleapis.com/css?family=IM+Fell+English|Playfair+Display:900"rel="stylesheet">

02. CSS'yi bağlayın

CSS'deki temel düzeni başladı site.csss Dosya, ancak aksaklık etkisine ilişkin tüm önemli parçaların tamamı daha sonra eklenecektir. Belgenin baş kısmında, CSS'yi bağlayın, böylece sayfanın temel tasarımı yerinde olacaktır.

 & l l l l l l l l l l = "StyleSheet" Type = "Metin / CSS"
href = "css / site.csss" / & gt; 

03. Bir yükleme ekranı kurun

Şimdi sayfanın vücut bölümüne gidin. Bu, tarayıcıda görünen sayfanın tüm görünen öğelerini içerir. Burada, sayfadaki her şey yüklenene kadar 'Preloader ekranını' tutacak bir div ekleyin. Bu, sayfanın ortasına bir logo gösterecektir.

 & lt; div id = "loader" sınıfı = "yükleme" ve GT;
       & lt; div class = "loading-logo" & gt; & l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l ltur.
   & lt; / div & gt; 

04. Bir başlık çubuğu ekleyin

Ekranın üstünde, bir metin başlığı ile soldaki site için bir SVG logosu içeren küçük bir başlık olacaktır. Ardından ekranın sağ tarafında, kolay gezinme için bir satır içi menü bulunur. Buradaki kodun yapısı bu öğeleri sayfaya ekler.

 & LT; DIV sınıfı = "ContentFixed" & gt;
       & lt; başlık sınıfı = "başlık" & gt;
           & lt; h1 sınıfı = "başlık" & gt; img
src = "img / logo.svg" sınıf = "logo" & gt; HackerCon; / H1 & GT;
       & lt; / başlık ve gt;
       & lt; nav sınıf = "Menü" id = "sitenav" & gt;
           & lt; ul & gt;
               & l li & gt; a href = "index.html" & gt; ev & lt; / a & gt;
               & l li & gt; a href = "hacks.html" & gt; Haberler & lt; / li & gt;
               & l li & gt; a href = "contact.html" & gt; iletişim 

05. Resim ekleyin

Şimdi izleyen bölüm, aynı görüntünün birkaç versiyonunu içerir. glitchit sınıf. Bunun yapacağı, bir aksaklık efekti vermek için bu görüntülerin farklı bölümlerinin farklı bölümlerine sahip olmasıdır. Aşağıdaki bu, görüntülerin tepesine oturacak metni.

& lt; div class = "içeriği" & gt;
       & lt; div class = "Glitch" & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
       & lt; / div & gt;
       & lt; div sınıf = "içerikli" & gt;
       & lt; h2 sınıfı = "ContentTitle" & gt; hacker & lt; / span & gt; / h2 & gt;
          & lt; p sınıfı = "ContentText" & gt; bir açıklama ekleyin; / p & gt;
           & lt; / div & gt;
       & lt; / div & gt; 

06. Glitch metni efektini tetikleyin

Vücut içeriğinin sonunda JavaScript etiketleri yerleştirilir. Tüm bunlar, sayfanın yüklendiğini ve ardından yükleme ekranını kaldırdığını kontrol eder ve bu da ilgili aksaklık bölümlerini etkilemek için gövdeye bir sınıf ekleyerek Glitter efekti animasyonunu tetikler.

 & lt; script & gt;
       var yükleyici = document.getElementbyid ('loader');
       window.addeventlistener ("yük",
işlevi (olay) {
           loader.classlist.
Kaldır ('yükleme');
           loader.classlist.add ('yüklü');
           document.body.classlist.
ekle ('imgloaded');
       });
& lt; / script & gt; 

07. CSS değişkenlerini ayarlayın

Sayfayı şimdi kaydedin ve site.csss CSS klasöründeki dosya. Burada zaten kod var, ancak başka bir kodun hemen üstünde, aşağıda gösterilen değişkenlerde ekleyin. Bu CSS değişkenleri, tasarımda daha sonra kullanılacak renkleri ve boyutları tutacaktır.

 vücut {
   - renk metni: #fff;
   --color-bg: # 000;
   --color-link: # 555;
   --color-Link-Hover: # 98FADF;
   - renk bilgisi: # F7CFB9;
   --Glitch-Genişliği: 100vw;
   --Glitch-yükseklik: 100vh;
   --gap-yatay: 10px;
   --gap-dikey: 5px;
   - zaman-anim: 4s;
   --delay-anim: 2s; 

08. Değişken ayarları ile deneyin

Gördüğünüz gibi, bu değişkenler vücut etiketine atanır, böylece vücudun içindeki sayfadaki herhangi bir etiket tarafından kullanılabilecekleri, bu da tüm görünür sayfanın tümüdür. Burada farklı görüntüler için şeffaflık ve harmanlama modları ayarlanmıştır. Beş resim vardır ve farklı sonuçlar elde etmek için bu ayarları deneyebilirsiniz.

 - Mend-Mode-1: Yok;
   --Bend-Mode-2: Yerleşimi;
   --Bend-mode-3: Yok;
   --Bend-Mode-4: Yok;
   --Bend-Mode-5: Yerleşimi;
   --Bend-Color-1: Şeffaf;
   --Bend-Color-2: # 7D948E;
   --Bend-Color-3: Şeffaf;
   --blend-reng-4: şeffaf;
   --Blend-Color-5: # AF4949;
} 

09. Ekranı görüntülerle doldurun

Kodu düzgün bir şekilde tutmak için, CSS dosyasındaki 9 ila 13 arasındaki adımları işaretleyen yoruma kaydırın, bu kodu ekler. Burada aksaklık kodu konumları div Tüm görüntüleri içeren tüm ekranı doldurun ve ekranın sol üst köşesine kesinlikle konumlandırılabilir. Not Genişliği ve yüksekliğini CSS değişkenlerinden alır.

 .glitch
{
   Konum: Mutlak;
   Üst: 0;
   Sol: 0;
   Genişlik: var (- aksaklık genişliği);
   Yükseklik: var (- aksaklık yüksekliği);
   Taşma: Gizli;
} 

10. Görüntü konumlandırmasını ayarlayın

Glitch etkisi aynı görüntünün kopyalarından yapıldığı için, bu kod her birini konumlandırır. div Sayfada ve ekrandan biraz daha büyük yapar. Üstten konumlandırır ve daha büyük olduğunu hesaba katar ve görüntüyü görüntüyü doldurmak için arka plana yerleştirilir.

 .glitchit {
   Konum: Mutlak;
   Üst: Calc (-1 * var (- Gap-dikey));
   Sol: Calc (-1 * var (- Gap-yatay));
   Genişlik: Calc (% 100 + var (- Gap-yatay) *
2);
   Yükseklik: Calc (% 100 + var (- Gap-dikey) *
2);
   Arka Plan: URL (../ IMG / MAIN.JPG) YEŞİL
% 50 0;
   arka plan rengi: var (- karışımlı renk-1);
   Arka plan boyutu: Kapak;
   Dönüştür: Translate3D (0, 0, 0);
   Arka Plan-Karışım Modu: var (- Karışım
MODE-1);
} 

11. Resimler seçin

Buradaki kod, ilk görüntü hariç her görüntüyü seçer. Bunun nedeni, ilk görüntü sayfada kalırken, diğerleri ise ana kare animasyonu ile üst üste açılır. Bu üst görüntüler, opaklığın sıfıra ayarlanmasına ihtiyaç duyulana kadar gizlenir.

 .GritchItfit: nth-child (n + 2) {
   Opaklık: 0;
}
.gaded .glitchit: nth-child (n + 2) {
   Animasyon Süresi: var (- zaman-anim);
   animasyon gecikmesi: var (- gecikme anim);
   Animasyon-zamanlama fonksiyonu: doğrusal;
   animasyon-yineleme-sayım: sonsuz;
} 

12. Görüntüleri iki ve üç ayarlayın

İkinci ve üçüncü görüntü bu kodda canlandıracak şekilde ayarlanmıştır. İlgili karışım ve renk modları verilir, böylece farklı gösterilerek. Buradaki en büyük fark, karıştırmak için takip edilecek farklı anahtarlık animasyonları verilmeleridir.

 Etkileri yukarı.
.imgloaded .glitchit: nth-child (2) {
   arka plan rengi: var (- karışımlı renk-2);
   Arka Plan-Karışım Modu: var (- Karışım
MODE-2);
   animasyon adı: aksaklık-1;
}
.imgloaded .glitchit: nth-child (3) {
   arka plan rengi: var (- karışımlı renk-3);
   Arka Plan-Karışım Modu: var (- Karışım
MODE-3);
   animasyon adı: aksaklık-2;
} 

13. Görüntüleri dört ve beş ayarlayın

Bu sefer sonraki iki görüntü diğerlerine oldukça yakın ayarlanır, ancak yine bu sefer bu görüntülerin görünmesi için farklı harmanlama modları ve animasyonları vardır. Key kareler henüz bu animasyonların bazıları için oluşturulmamıştır ve bu sırada gelecektir.

 .imgloaded .glitchit: nth-child (4) {
   arka plan rengi: var (- karışımlı renk-4);
   Arka Plan-Karışım Modu: var (- Karışım
MODE-4);
   Animasyon-İsim: Glitch-3;
}
.imgloaded .glitchit: nth-child (5) {
   arka plan rengi: var (- karışımlı renk-5);
   Arka Plan-Karışım Modu: var (- Karışım
MODE-5);
   Animasyon-İsim: Glitch-flaş;
} 

14. İlk ana kare kümesini ekleyin

Anahtarlıklar, görüntünün farklı bölümlerini kaplayarak ve sadece görünür olacak şekilde kapatarak çalışır. Opaklık farklı zamanlarda açık ve kapanır, böylece görüntünün kısımları diğer animasyonlara farklı zamanlarda görünür ve böylece aksaklık etkisi yaratır. Görüntü x ekseni üzerinde hafifçe hareket ettirilir.

 @keyframes glitch-1 {
   0% {
       Opaklık: 1;
       Dönüştür: Translate3D (var (- Gap-
yatay), 0, 0);
       klip-yol: çokgen (% 0 2,% 100% 2,
% 100% 5,% 05);
   } 2% {
       klip-yol: çokgen (0% 15,% 100% 15,
% 100% 15,% 0 15);
   } 

15. Klip yolu kullanın

Klip yolu bir dikdörtgen alıyor, böylece ilk iki sayı sol üstte, sonra sağ üst. Bu, sağ alt ve sol alttan takip edilir. Bu numaraları hareket ettirerek, görüntünün farklı kısımları farklı noktalarda görünür hale gelir.

% 4 {
       Klip-yol: çokgen (0% 10,% 100% 10,
% 100% 20,% 0 20);
   } 6% {
       Klip-yol: çokgen (0% 0,% 100% 1,
% 100% 2,% 02);
   } 8% {
       klip-yol: çokgen (03%,% 100% 33, 1
00% 33,% 03%);
   } 10% {
       klip-yol: çokgen (% 0 44,% 100% 44,
% 100% 44, 0% 44);
   } 

16. Hareketi hızlandırın

Klip yolunu bir dizi ana karenin üzerinde hızlı bir şekilde hareket ettirerek, efekt, görüntünün oluşturulması ve görüntünün farklı kısımları düzensiz bir şekilde yanıp sönüyor gibi görünüyor. Daha fazla görüntü katmanının da bunu yaptığını ve etkisi ne yaptığı konusunda çok iyi çalışır.

% 12 {
       klip-yol: çokgen (0% 50,% 100% 50,
% 100% 20,% 0 20);
   } 14% {
       Klip-yol: çokgen (0 70%,% 100% 70,
% 100% 70, 0 70%);
   } 16% {
       Klip-yol: çokgen (0% 8,% 100% 80,
% 100% 80,% 0% 80);
   } 18% {
       klip-yol: çokgen (0% 50,% 100% 50,
% 100% 55, 0 55%);
   } 20% {
       Klip-yol: çokgen (0 70%,% 100% 70,
% 100% 80,% 0% 80);
   } 

17. Görüntü aksaklıklarını bitirin

% 22'den sonra, animasyon tekrar oynatılana kadar görüntü kapatılır. Bu tamamladı aksaklık-1 etkisi ile aksaklık-2 ve aksaklık-3 zaten kodda veriliyor. Bir sonraki bölüm, görüntünün tepesinde olan metni de gizleyecektir.

 21.9% {
       Opaklık: 1;
       Dönüştür: Translate3D (var (- Gap-
yatay), 0, 0);
   }% 22, 100% {
       Opaklık: 0;
       Dönüştür: Translate3D (0, 0, 0);
       klip-yol: çokgen (0 0, 0 0, 0 0, 0
0);
   }
} 

18. Glitch metni nasıl oluşturulur

Bu kod, metni baş aşağı çevirmesi dışında, önceki kodlara son derece benzer şekilde çalışır ve daha sonra çarpıcı bir şekilde hareket ettirilen bir atlama etkisi vermek için klipsler. Klips yolunun, yalnızca küçük bölümleri ortaya çıkardığını, anahtar kareler boyunca hızlı hareketle ortaya çıkar.

 @keyframes glitch-text {
   0% {
       Dönüştür: Translate3D (Calc (-1 *
VaR (- Gap-yatay)), 0, 0) skala3d (-1, -1,
1);
       klip-yol: poligon (0% 20,% 100% 20,
% 100% 21,% 0 21);
   } 2% {
       Klip-Path: Poligon (03%,% 100% 33,
% 100% 33, 03%);
   } 4% {
       klip-yol: çokgen (% 0 44,% 100% 44,
% 100% 44, 0% 44);
   } 

19. daha fazla kırpma

Etki, kırpma yolunun şeklini hızla değiştirerek bu kod bölümünde devam eder. klip-yol ayrıca -Webkit- Önek ama kısalık için bu, burada herhangi bir kodun hiçbirinde gösterilmemiştir. Yazma sırasında, Klip yolu şu anda IE, Edge veya Opera Mini'de desteklenmiyor, ancak diğer tüm tarayıcılarda.

% 5 {
       klip-yol: çokgen (0% 50,% 100% 50,
% 100% 20,% 0 20);
   } 6% {
       Klip-yol: çokgen (0 70%,% 100% 70,
% 100% 70, 0 70%);
   } 7% {
       Klip-yol: çokgen (0% 8,% 100% 80,
% 100% 80,% 0% 80);
   } 8% {
       klip-yol: çokgen (0% 50,% 100% 50,
% 100% 55, 0 55%);
   } 

20. Metni geri çevirin

Son metnide glitch animasyonunda, metin orijinal konumuna geri döner ve ana karelerin tekrar gelmesini bekler. Tüm animasyon görebileceğiniz gibi, yüzde 10'unda gerçekleşirken, zamanın yüzde 90'ına uyurken, metni doğru miktarda sıkıntıyı verir ve okunabilmesine izin verir.

 9% {
       Klip-yol: çokgen (0 70%,% 100% 70,
% 100% 80,% 0% 80);
   } 9.9% {
       Dönüştür: Translate3D (Calc (-1 *
VaR (- Gap-yatay)), 0, 0) skala3d (-1, -1,
1);
   }% 10, 100% {
       Dönüştür: Translate3D (0, 0, 0)
skala3d (1, 1, 1);
       klip-yol: çokgen (0 0, 100% 0, 100%
% 100,% 0% 100);
   }
} 

21. Hızlı bir flaş oluşturun

Son adım, bir görüntünün Glitch-Flash animasyonu verilmesidir ve bu anahtar kare serisi, yalnızca orijinalin bir ofsetini vermek için kısa bir süre için bir yüzde 20 opaklıkla görüntüye görüntüyü yerleştirin. CSS dosyasını şimdi kaydedin ve efekt, içerik tarayıcıya yükler bir kez oynatmaya başlamalıdır.

 @keyframes glitch-flash {
   0%, 5% {
       Opaklık: 0.2;
       Dönüştür: Translate3D (var (- Gap-
yatay), var (- Gap-dikey), 0);
   % 5.5, 100% {
       Opaklık: 0;
       Dönüştür: Translate3D (0, 0, 0);
}} 

Tasarım dosyalarınızı kaydetmek için güvenli bir yere var mı? Eğer değilse, rehberimize ihtiyacınız olursa Bulut depolama Seçenekler.

Bu makale başlangıçta Creative Web Design Magazine Web Tasarımcısı'nda yayınlandı. Sayı satın al 281 veya abone ol .

Daha fazla oku:

• Web sitenize bir aksaklık efekti ekleyin
• 10 İnanılmaz Yeni CSS Teknikleri
• CSS ile tarayıcıda kolaj efektleri oluşturun