Wordpress Elementor ile Metinlere Duman Animasyonu Ekleme | Adım Adım Kodlu Öğretici

[benkruz]

Elementor’de Metne Duman Animasyonu Nasıl Eklenir?​

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 rehber

<style>
.smoke .elementor-widget-container span{
    cursor: default;
    position: relative;
    display: inline-block;
}
.smoke .elementor-widget-container span.active{
    animation: smoke 1s linear;
}
@keyframes smoke{
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        filter: blur(20px);
        transform: translateX(300px) translateY(-300px) rotate(360deg) scale(4);
    }
}
.smoke .elementor-widget-container span.back{
    opacity: 0;
    filter: blur(20px);
    animation: back 1s linear 0.5s;
}
@keyframes back{
    100%{
        opacity: 1;
        filter: blur(0);
    }
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
(function($){
$(document).ready(function(){
        
var heading = $('.smoke .elementor-widget-container').children()

heading.each(function(){
    $(this).html($(this).text().replace(/\S/g, '<span>$&</span>')) 
})

var headingLetter = heading.****('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')
    }
})
        
})
}(jQuery))
</script>