آموزش افزودن انیمیشن متن دود در المنتور

<style> .smoke .elementor-widget-container {     direction: rtl; /* تنظیم جهت متن به راست به چپ */     text-align: right; } .smoke .elementor-widget-container span {     cursor: default;     position: relative;     display: inline-block;     font-family: inherit;     line-height: 1;     margin: 0;     padding: 0;     white-space: pre; /* حفظ فاصله‌ها به صورت طبیعی */ } .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();          // برای جلوگیری از جدا شدن حروف فارسی، متن را فقط به تگ span داخل کلمات تبدیل می‌کنیم         heading.each(function () {             var text = $(this).text();             var newText = '';             // برای هر کلمه یک تگ span ایجاد می‌کنیم             text.split(' ').forEach(function (word) {                 newText += '<span>' + word + '</span> ';             });             $(this).html(newText.trim());         });          var headingWord = heading.find('span');          headingWord.on('mouseover', function () {             $(this).removeClass('back').addClass('active');         });          headingWord.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function (e) {             if ($(e.target).hasClass('active')) {                 $(this).removeClass('active').addClass('back');             } else {                 $(this).removeClass('back');             }         });     }); })(jQuery); </script> 

<style> .smoke-english .elementor-widget-container span {     cursor: default;     position: relative;     display: inline-block;     font-family: inherit;     line-height: 1;     margin: 0;     padding: 0;     white-space: pre; } .smoke-english .elementor-widget-container span.active {     animation: smoke-english 1s linear; } @keyframes smoke-english {     50% {         opacity: 1;     }     100% {         opacity: 0;         filter: blur(20px);         transform: translateX(300px) translateY(-300px) rotate(360deg) scale(4);     } } .smoke-english .elementor-widget-container span.back {     opacity: 0;     filter: blur(20px);     animation: back-english 1s linear 0.5s; } @keyframes back-english {     100% {         opacity: 1;         filter: blur(0);     } } </style> <script> (function ($) {     $(document).ready(function () {         var headingEnglish = $('.smoke-english .elementor-widget-container').children();          headingEnglish.each(function () {             var text = $(this).text();             var words = text.split(' '); // کلمات را جدا می‌کنیم             var newText = '';             words.forEach(function (word) {                 newText += '<span>' + word + '</span> '; // هر کلمه در یک تگ span قرار می‌گیرد             });             $(this).html(newText.trim());         });          var headingWordEnglish = headingEnglish.find('span');          headingWordEnglish.on('mouseover', function () {             $(this).removeClass('back').addClass('active');         });          headingWordEnglish.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function (e) {             if ($(e.target).hasClass('active')) {                 $(this).removeClass('active').addClass('back');             } else {                 $(this).removeClass('back');             }         });     }); })(jQuery); </script>