050-4253300

אפקט "טקסט מעשן"

מאת: אלון בכר

אז איך יוצרים אפקט טקסט מעשן ?

ראשית יוצרים טקסט

לאחר מכן יש לגרור אלמנט HTML מתחת לטקסט

ולהדביק את הקוד הבא:

<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.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')
    }
})
		
})
}(jQuery))
</script>

לאחר מכן ניגשים לעריכת הכותרת ← מתקדם ← ורושמים: smoke בשורת css classes

מעדכנים … וזהו! יש לכם טקסט מעשן 🙂 בהצלחה

אהבתם את הפוסט? שתפו

שיתוף ב facebook
שיתוף ב whatsapp
שיתוף ב twitter
שיתוף ב linkedin
שיתוף ב pinterest
שיתוף ב print
שיתוף ב email
שיתוף ב telegram
פוסטים נוספים

מיזוג דפי PDF לספר תלת מימד

קטגוריה: תוספים

מאת: אלון בכר

התקנת הגנת ספאם לטפסי אלמנטור באמצעות Recaptcha

שמירת אירוע עם כל הפרטים ב – Google Calendar

קטגוריה: בניית אתרים

מאת: אלון בכר

עריכה מהירה לפוסטים מסוג CCT & CPT בתוסף Jet engine

קטגוריה: תוספי Crocoblock

מאת: אלון בכר

נקודת שבירה באלמנטור להתאמת מכשירים

קטגוריה: בניית אתרים

מאת: אלון בכר

העברת אתרים All in one wp migration עד 100GB

קטגוריה: תוספים

מאת: אלון בכר

advanced divider
דילוג לתוכן