Web sitenize küçük ama dikkat çekici efektler eklemek, kullanıcı deneyimini ve sitenizin akılda kalmasını büyük ölçüde artırabilir. Elementor kullanıcıları için metin animasyonları, özellikle başlıklar ve önemli metinlerde oldukça etkili bir yöntemdir. Bu yazıda, duman animasyonu efekti ile metinlerinizi nasıl canlandıracağınızı adım adım anlatacağız.

Neden Duman Animasyonu?

Duman animasyonu, fare ile metin üzerine gelindiğinde harflerin kaybolup duman gibi dağılması ve ardından tekrar görünmesiyle ziyaretçilerin ilgisini çeker. Bu küçük ama eğlenceli efekt, sitenize yaratıcı bir dokunuş katar ve başlıklarınızı ön plana çıkarır.

Elementor’da Adım Adım Uygulama

Başlık veya Metin Bileşeni Ekleme:
Elementor editöründe duman animasyonu eklemek istediğiniz başlık veya metin bileşenini sayfaya ekleyin.

Sınıf Adı Verme:
Başlığa veya metne duman adını verin. Bu sınıf, animasyonun çalışmasını sağlar.

HTML Widget ile Kod Ekleme:
HTML widget’ını sayfaya ekleyin ve yukarıdaki CSS + JS kodlarını içine yapıştırın.

Kaydetme ve Ön İzleme:
Sayfayı kaydedin ve ön izlemeyi açın. Fare ile başlık harflerinin üzerine gelerek animasyonu test edin.

Gerekli Kodlar

CSS Kodu

<style>
.duman span {
    cursor: default;
    position: relative;
    display: inline-block;
}
.duman span.active {
    animation: dumanEfekt 1s linear;
}
@keyframes dumanEfekt {
    50% { opacity: 1; }
    100% {
        opacity: 0;
        filter: blur(20px);
        transform: translateX(300px) translateY(-300px) rotate(360deg) scale(4);
    }
}
.duman span.back {
    opacity: 0;
    filter: blur(20px);
    animation: dumanGeri 1s linear 0.5s forwards;
}
@keyframes dumanGeri {
    100% { opacity: 1; filter: blur(0); }
}
</style>Code language: HTML, XML (xml)

JavaScript

<script>
jQuery(document).ready(function($){
    var heading = $('.duman').children();
    heading.each(function(){
        $(this).html($(this).text().replace(/\S/g, '<span>$&</span>'))  
    });
    var headingLetter = heading.find('span');
    headingLetter.on('mouseover', function(){
        $(this).removeClass('back').addClass('active');
    });
    headingLetter.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(e){
        if ($(e.target).hasClass('active')) {
            $(this).removeClass('active').addClass('back');
        } else {
            $(this).removeClass('back');
        }
    });
});
</script>
Code language: HTML, XML (xml)

Özelleştirme ve İpuçları

• Her harfin ayrı span içine alınması animasyonun doğru çalışması için önemlidir.
• CSS’teki translate, rotate ve scale değerlerini değiştirerek animasyonun yönünü ve hızını özelleştirebilirsiniz.
• JavaScript üzerinde küçük değişiklikler yaparak animasyonu sayfa açıldığında otomatik başlatabilirsiniz.

Elementor’da metinlere duman animasyonu eklemek çok kolaydır. Sadece birkaç adımda, ekstra eklentiye ihtiyaç duymadan sitenize profesyonel ve yaratıcı bir dokunuş katabilirsiniz.

Denediniz mi? Yorumlarda deneyimlerinizi paylaşın ve daha fazla Elementor ipucu için blogumuzu takip etmeyi unutmayın!