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 ?
Rich (BB code):
<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>
Rich (BB code):
<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>