Animasyonlu bir buhar metni etkisi oluşturun

Sep 12, 2025
Nasıl Yapılır
Steam text effect

Metne efektleri eklemek, yepyeni bir katılım ve ilgi düzeyi ekleyebilir. Gibi etkiler kinetik tipografi bir izleyicinin dikkatini çekecek, yardım kullanıcı deneyimi ve anlatılan hikayeyi anlatmaya yardımcı olun. Üzerinde metin etkisi Harikalar yapmak Site getiriyor web yazı tipi Odak çizgisine satırla. Benzer bir şeyi nasıl yeniden yaratacağınızı öğrenmek için okuyun.

Almak Proje dosyaları Bu eğitimi takip etmek için.

01. HTML belgesini başlat

İlk adım, HTML içeriğini saklayacak belge yapısını tanımlamaktır. Bu, kafa ve vücut bölümlerini depolayan belge kabından oluşur. Baş bölümü mürekkepleri dış CSS ve JavaScript kaynaklarına kaydederken, vücut 02 adımında oluşturulan görünür içeriği saklar. 

 ​​& LT;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; unvanı ve gt; bulanıklık metnidir; / ​​unvan & gt;
& link rel = "Stylesheet" Type = "Metin / CSS" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script;
/ head & gt;
& lt; vücut ve gt;
  *** 2. adım burada
& lt; / body & gt;
& lt; / html & gt;

02. HTML içeriği

Bu adım görünür HTML içeriğini tanımlar. Bulanıklık etkisinin, 'bulanıklık' sınıfına sahip bir kap içinde nasıl belirlenen metinlerin nasıl bulunduğunu not edin. Bu sınıf, JavaScript tarafından 03. adımdaki metin maddelerine ve sonraki adımlardaki CSS ile başvurulması için kullanılır. 

 ​​& lt; h2 & gt;
  Disiplin geliyor
  & lt; ul sınıfı = "bulanık" & gt;
  Taahhüt & Li & Gt; / li & gt;

  • 03. Otomatik animasyon gecikmesi

    'Code.js' adlı yeni bir dosya oluşturun. Bulanıklık kabın içindeki her öğe önceki öğeden üç saniye sonra sunulmalıdır. JavaScript, benzersiz CSS niteliklerinin uygulanmasını otomatikleştirmek için kullanılır. Bunun ilk adımı, bulanıklık kabın içindeki tüm ilk düzeyleri seçmektir - sayfa yüklendikten sonra. 

     window.addeventlistener ("yük", işlev () {
  var düğümleri = belge.queryselectorall (". Bulanık ve GT; *");
  *** 4. adım burada
});

    04. Saniye sayısı

    Bir 'için' döngü, bir önceki adımdaki 'Düğümler' değişkenine döndürülen her öğeye başvurmak için kullanılır. 'İçin' döngü indeks sayacı, animasyon gecikme özelliğine atanacak saniye sayısını hesaplamak için kullanılır. Sonuç olarak, her öğenin önceki öğeden üç saniye daha uzun bir gecikme vardır. 

     için (var i = 0; i & lt; düğümler. Uzunluğu; i ++) {
  düğümler [i] .style.animationdelay = (i * 3) + "s";
}

    05. CSS BLUR

    'Styles.css' adlı yeni bir dosya oluşturun. CSS sunum kurallarını tanımlamak için ilk adım, her bir metin öğesini görünmez olarak başlatır. 'AnimationBlur' adlı bir animasyon da, maddeyi beş saniyelik bir süre boyunca görünür hale getirecek şekilde uygulanır. Animasyon modu, son karesini durduracak şekilde 'ileri' olarak ayarlanmalıdır. 

     .Blur & gt; * {
  Opaklık: 0;
  Animasyon: AnimateBlur 5S ileri;
}

    06. Animasyon başlat

    5. adımdaki 'bulanıklık' öğelerine uygulanan animasyon bu adımda tanımlanır. 'AnimationBlur' referansı, bir anahtar kare animasyonu olarak yapılır. 'Dan' ilk kare, elemanları bir metin gölgesi ile görünür olarak ayarlar - ancak şeffaf bir metin rengiyle. Bu, bulanık metin etkisini üreten şeydir. 

     @keyframes animateblur {
  {
  Opaklık: 1;
  Metin gölge: 0 0 1EM RGBA (0,0,0, .5);
  Renk: RGBA (0,0,0,0);
  }
    *** 7. Adım burada
}

    07. Son animasyon çerçevesi

    Animasyon içindeki 'için' kare, metnin animasyon yapacağı son çerçeveyi tanımlar. Bu çerçeve, metin gölgesini, tamamen görünen bir metin rengiyle birlikte kaybolmasını sağlar. Adım 06 ile birlikte, '' dan 've' to 'arasındaki animasyon çerçeveleri tarayıcı tarafından otomatik olarak hesaplanacaktır. 

     için {
  Opaklık: 1;
  Metin gölge: 0 0 0 0px RGBA (0,0,0,0);
  Renk: # 000;
}

    Bu makale başlangıçta Web Designer dergisinde ortaya çıktı. Abone olun .

    Unutmayın - her zaman kullanıcıyı düşünün

    Generate - the conference for web designers

    Bir sayfaya sahip bir sayfaya fantezi etkilerini tanıtırken, bir amacınız olması gerekir, kullanıcı deneyimini düşünmeniz gerekir.Ve bu freelance ön uç UI geliştiricisi Sara Soueidan, UX 'konuşmasının iyiliği için' CSS'yi (ve SVG) kullanan 'olarak ortaya çıkacak. Londra 2018 oluşturun .

    Konuşmasında, CSS'nin UI'nizin genel kullanıcı deneyimini iyileştirme, CSS (SVG ve JS sprinkles ve burada ve orada) kullanarak çok çeşitli olasılıklar gösterecek.

    Kaçırmadığınızdan emin olun. Şimdi biletini al.

    İlgili Makaleler:

    • Javascript ile titrek bir metin efekti oluşturun
    • Parlayan bir neon metin efekti oluşturun
    • Metin nasıl mükemmel hale getirilir

    Nasıl Yapılır - En Popüler Makaleler

    Nasıl bir komik sayfa oluşturulur

    Nasıl Yapılır Sep 12, 2025

    Bu eğitim, herhangi bir komik sayfa oluşturmayı size gösterecektir. Kullanmamıza rağmen Klibi stüdyo boya B..

    SVG filtreleri CSS ile ekleyin

    Nasıl Yapılır Sep 12, 2025

    SVG, 2000'lerin başından bu yana geçti ve yine de tasarımcıların kullanmayı bulduğu ilginç yollar var. Bu eğitimde, oda..

    Javascript ile SVG'yi canlandırın

    Nasıl Yapılır Sep 12, 2025

    JavaScript'te CSS3 veya Web Animasyonları API kullanarak tarayıcıda doğal olarak elde edilebilecek çok şey var. Basit anima..

    Resimlerinde ölçek nasıl elde edilir

    Nasıl Yapılır Sep 12, 2025

    Bu eğitimde, büyük ölçekli fikrini kendi parçalarınızda iletişim kurmanıza yardımcı olacak bazı temel ilkeleri aşacağız. Bu öğretici için kalem ve yağ kullanıyorum, ancak..

    Apple'ın Fotoğraf App Mastering için 10 İpuçları

    Nasıl Yapılır Sep 12, 2025

    MacOS fotoğrafları uygulaması iPhoto olarak hayata başladı: dijital fotoğrafları yönetmek için bir tüketici uygulaması..

    Fotogerçekçi bir oda sahnesi nasıl oluşturulur

    Nasıl Yapılır Sep 12, 2025

    Gerçekçi bir 3D mimari sineklik nasıl yaratılacağını bilmek istiyorum, ancak çabalarınızı boru hattı içinde nereden ..

    Anatomy MasterClass: Rakamlarınızı mükemmelleştirin

    Nasıl Yapılır Sep 12, 2025

    Bu masterclass'ta, öğrenmek için takip etmeniz gereken temel adımları ortaya çıkaracağım. Rakamlar nasıl çizil..

    Sass ile nasıl başlanacağı

    Nasıl Yapılır Sep 12, 2025

    Sos Diğer programlama dillerinden birçok özelliği, işlevler, değişkenler ve ilmekler gibi CSS'ye sunan güçl�..

    Kategoriler