Skip to main content

Add Water Wave Animation on Text in Elementor 2022 | WordPress Tutorial 2022

 

Video Tutorial







Heading Stroke CSS

  1. selector{ -webkit-text-stroke: 2px #03a9f4; }

Wave Animation CSS

  1. selector{ -webkit-animation: water 4s ease-in-out infinite; animation: water 4s ease-in-out infinite; } @-webkit-keyframes water{ 0%, 100%{ -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%); clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%); } 50%{ -webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%); clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%); } } @keyframes water{ 0%, 100%{ -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%); clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%); } 50%{ -webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%); clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%); } }


Labels:

Comments

Post a Comment

Popular posts from this blog

How to Add Background Music in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial Do you want to add background music in Elementor? This Elementor tutorial will show you how to add background music in Elementor. Learn how to add background music in Elementor | WordPress Website 2022 JAVA SCRIPT Code Snippet <iframe style="display: none;" src=""></iframe> <audio id="myaudio" autoplay="autoplay" loop="loop" controls="controls"> <source src="**paste url here**" type="audio/mp3" /> </audio> <script>   var audio = document.getElementById("myaudio");   audio.volume = 0.2; </script>
Post a Comment
Read more

How to Add Show / Hide any Section on Click in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial JavaScript Code Snippet document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ $('.showsection').each(function(i){ $(this).click(function(){ $('.hidesection').eq(i).show(); $('.showsection'); }); }); }); }); </script> <style> .showsection{ cursor: pointer; } .hidesection{ display: none; } </style> }
Post a Comment
Read more

How to Create 3D Rotating Image Gallery in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial Javascript Snippet for 3D Image Gallery <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> var $ = jQuery $(document).ready(function(){ var className = '3dGallery' $('.' + className).each(function(){ var span = $(this).find('.elementor-widget-image'), len = span.length span.each(function(i){ $(this).css('transform', 'rotateY(' + i*360/len + 'deg) translateZ(calc(' + ((len + 1) * 31 + len*1) + 'px))') }) $(this).parent().addClass('3dGalleryParent') }) }) </script> CSS Snippet for 3D Image Gallery selector .elementor-widget-wrap{ width: 200px; height:300px; transform-style: preserve-3d; } selector .elementor-widget-image{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: center; transform-style: preserve-3d; -webkit-box-reflect: bel...
Post a Comment
Read more