WORDPRESS
efecto humo o smoke effect, con elementor free, wordpress 190, tutorial español
En SYSPA aprenderemos como crear el efecto humo o smoke effect con elementor free dentro de tu sitio o pagina web wordpress.
este efecto no solo es simple, sino que es increíble. Con muy pocos pasos podrás crear un efecto extraordinario para tu pagina web wordpress, dándole mayor atractivo y profesionalismo.
Solo debes seguir los pasos y veras resultados que seguro te sorprenderán, no dudes en hacer este tutorial, no te vas a arrepentir
Principales puntos del tutorial wordpress efecto humo o smoke effect
Videos relacionados con wordpress efecto humo o smoke effect
🖐️ Pagina Web GRATIS, dominio, hosting, SSL, wordpress 1 tutorial español
En este impresionante tutorial, veremos algo increíble, TODA TU PAGINA WEB TOTALMENTE GRATIS / FREE / $ 0.
DOMINIO, HOSTING, PAGINA WEB y certificado SSL / HTTPS, TODO GRATIS Y DE POR VIDA.
SINCERAMENTE NO VI OTROS TUTORIALES QUE LOGRAN TODO EL CONJUNTO GRATIS Y DE CALIDAD.
Código Utilizado
Efecto Humo o Smoke Effect
<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>
Tenemos Cientos de tutoriales Wordrpess
Inicia aquí gratis !
Accede al listado completo de tutoriales wordpress.