jquery-waves

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Waves Examples</title>  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">  <link rel="stylesheet" href="css/jquery-waves.css"> <style> /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}} </style> <style> body { font-family: 'Nunito', sans-serif; } code { display: block; padding: 0.25rem 0.5rem; background-color: #2d3748; color: #f7fafc; } button { margin: 4px 0; padding: 0.5rem; cursor: pointer; background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } button.sm { padding: 0.35rem; } button.lg { padding: 0.85rem; } button:hover { background-color: #f7f7f7; } .container { width: 100%; max-width: 800px; margin: 4rem auto; } .text-highlight { color: yellow; background-color: rgba(255, 255, 255, 0.1); font-weight: bold; } .box { position: relative; display: inline-block; margin: 0.1rem; cursor: pointer; width: 250px; height: 250px; border: 1px solid black; } .bg-black { background-color: #000000 !important; color: #ffffff !important; } </style>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> <script src="js/jquery-waves.js"></script> </head> <body> <main> <div class="container"> <h1><a href="https://github.com/isaeken/jquery-waves">isaeken/jquery-waves</a></h1> <p class="text-gray-600">A simple & lightweight waves effect plugin</p> <br> <img src="img/ss.png" alt="isaeken/jquery-waves" style="width: 100%; max-width: 450px"> <h2>Installation</h2> <div> You can install jquery-waves plugin using npm or include directly files <h4 class="text-gray-700">Install with using npm</h4> <code>npm install animejs</code> <code>npm install jquery-waves</code> <h4 class="text-gray-700">or include files</h4> <code><link rel="stylesheet" href="/your/servers/assets/path/css/jquery-waves.min.css"></code> <code><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></code> <code><script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script></code> <code><script src="/your/servers/assets/path/js/jquery-waves.min.js"></script></code> </div> <br><br> <h2>Documentation</h2> <br> <h3>Creating Waves Effect</h3> <div> You can create waves using classes for example: <br> <code><button class="waves-effect">Button</button></code> <div> <button class="waves-effect sm">Small Button</button> <button class="waves-effect">Button</button> <button class="waves-effect lg">Large Button</button> </div> or you can create wave effect with attributes for example: <br> <code><button data-waves>Button</button></code> <div> <button data-waves class="sm">Small Button</button> <button data-waves class="">Button</button> <button data-waves class="lg">Large Button</button> </div> </div> <br><br> <h3>Wave effect with background color</h3> <div> <code><button data-waves data-waves-background-color="rgba(255, 0, 0, 0.35)">Button</button></code> <div> <button data-waves data-waves-background-color="rgba(255, 0, 0, 0.35)" class="sm">Small Button</button> <button data-waves data-waves-background-color="rgba(255, 0, 0, 0.35)" class="">Button</button> <button data-waves data-waves-background-color="rgba(255, 0, 0, 0.35)" class="lg">Large Button</button> </div> <h4 class="text-gray-700">Colored Wave With Classes</h4> <div> <code> <button class="waves-effect">Default</button><br> <button class="waves-effect waves-light bg-black">Light</button><br> <button class="waves-effect waves-red">Red</button><br> <button class="waves-effect waves-yellow">Yellow</button><br> <button class="waves-effect waves-orange">Orange</button><br> <button class="waves-effect waves-purple">Purple</button><br> <button class="waves-effect waves-green">Green</button><br> <button class="waves-effect waves-teal">Teal</button><br> </code> <div> <button class="waves-effect">Default</button> <button class="waves-effect waves-light bg-black">Light</button> <button class="waves-effect waves-red">Red</button> <button class="waves-effect waves-yellow">Yellow</button> <button class="waves-effect waves-orange">Orange</button> <button class="waves-effect waves-purple">Purple</button> <button class="waves-effect waves-green">Green</button> <button class="waves-effect waves-teal">Teal</button> </div> </div> <h4 class="text-gray-700">Rainbow Wave</h4> <div> <code><button data-waves data-waves-background-color="RANDOM">Button</button></code> <div> <button data-waves data-waves-background-color="RANDOM" class="sm">Small Button</button> <button data-waves data-waves-background-color="RANDOM" class="">Button</button> <button data-waves data-waves-background-color="RANDOM" class="lg">Large Button</button> </div> </div> </div> <br> <h3>Wave effect like mdbootstrap ripples</h3> <div> <code> <button class="waves-effect">Default</button><br> <button class="waves-effect waves-light bg-black">Light</button><br> <button class="waves-effect waves-red">Red</button><br> <button class="waves-effect waves-yellow">Yellow</button><br> <button class="waves-effect waves-orange">Orange</button><br> <button class="waves-effect waves-purple">Purple</button><br> <button class="waves-effect waves-green">Green</button><br> <button class="waves-effect waves-teal">Teal</button><br> </code> <div> <button class="waves-effect waves-material">Default</button> <button class="waves-effect waves-material waves-light bg-black">Light</button> <button class="waves-effect waves-material waves-red">Red</button> <button class="waves-effect waves-material waves-yellow">Yellow</button> <button class="waves-effect waves-material waves-orange">Orange</button> <button class="waves-effect waves-material waves-purple">Purple</button> <button class="waves-effect waves-material waves-green">Green</button> <button class="waves-effect waves-material waves-teal">Teal</button> </div> </div> <br><br> <h3>Wave effect with opacity</h3> <div> <code><button data-waves data-waves-background-color="red" data-waves-opacity="0.35">Button</button></code> <div> <button data-waves data-waves-background-color="red" data-waves-opacity="0.35" class="sm">Small Button</button> <button data-waves data-waves-background-color="red" data-waves-opacity="0.35" class="">Button</button> <button data-waves data-waves-background-color="red" data-waves-opacity="0.35" class="lg">Large Button</button> </div> </div> <br><br> <h3>Wave effect with duration</h3> <div> <h4 class="text-gray-700">Default</h4> <code><button data-waves data-waves-duration="600" data-waves-hide-duration="800">Button</button></code> <div> <button data-waves data-waves-duration="600" data-waves-hide-duration="800" class="sm">Small Button</button> <button data-waves data-waves-duration="600" data-waves-hide-duration="800" class="">Button</button> <button data-waves data-waves-duration="600" data-waves-hide-duration="800" class="lg">Large Button</button> </div> <h4 class="text-gray-700">Fast</h4> <code><button data-waves data-waves-duration="300" data-waves-hide-duration="400">Button</button></code> <div> <button data-waves data-waves-duration="300" data-waves-hide-duration="400" class="sm">Small Button</button> <button data-waves data-waves-duration="300" data-waves-hide-duration="400" class="">Button</button> <button data-waves data-waves-duration="300" data-waves-hide-duration="400" class="lg">Large Button</button> </div> <h4 class="text-gray-700">Slow</h4> <code><button data-waves data-waves-duration="800" data-waves-hide-duration="1200">Button</button></code> <div> <button data-waves data-waves-duration="800" data-waves-hide-duration="1200" class="sm">Small Button</button> <button data-waves data-waves-duration="800" data-waves-hide-duration="1200" class="">Button</button> <button data-waves data-waves-duration="800" data-waves-hide-duration="1200" class="lg">Large Button</button> </div> </div> <br><br> <h3>Ripples in box</h3> <div> <code><pre>.box { position: relative; display: inline-block; margin: 0.1rem; cursor: pointer; width: 250px; height: 250px; border: 1px solid black; }</pre></code> <br> <code> <div class="box waves-effect">This is a box</div> <br> <div class="box bg-black waves-effect waves-light">This is a box</div> <br> <div class="box waves-effect waves-red">This is a box</div> <br> <div class="box waves-effect waves-yellow">This is a box</div> <br> <div class="box waves-effect waves-orange">This is a box</div> <br> <div class="box waves-effect waves-purple">This is a box</div> <br> <div class="box waves-effect waves-green">This is a box</div> <br> <div class="box waves-effect waves-teal">This is a box</div> <br> </code> <br> <div> <div class="box waves-effect">This is a box</div> <div class="box bg-black waves-effect waves-light">This is a box</div> <div class="box waves-effect waves-red">This is a box</div> <div class="box waves-effect waves-yellow">This is a box</div> <div class="box waves-effect waves-orange">This is a box</div> <div class="box waves-effect waves-purple">This is a box</div> <div class="box waves-effect waves-green">This is a box</div> <div class="box waves-effect waves-teal">This is a box</div> </div> <br> <code> <div class="box waves-effect waves-material">This is a box</div> <br> <div class="box bg-black waves-effect waves-material waves-light">This is a box</div> <br> <div class="box waves-effect waves-material waves-red">This is a box</div> <br> <div class="box waves-effect waves-material waves-yellow">This is a box</div> <br> <div class="box waves-effect waves-material waves-orange">This is a box</div> <br> <div class="box waves-effect waves-material waves-purple">This is a box</div> <br> <div class="box waves-effect waves-material waves-green">This is a box</div> <br> <div class="box waves-effect waves-material waves-teal">This is a box</div> <br> </code> <br> <div> <div class="box waves-effect waves-material">This is a box</div> <div class="box bg-black waves-effect waves-material waves-light">This is a box</div> <div class="box waves-effect waves-material waves-red">This is a box</div> <div class="box waves-effect waves-material waves-yellow">This is a box</div> <div class="box waves-effect waves-material waves-orange">This is a box</div> <div class="box waves-effect waves-material waves-purple">This is a box</div> <div class="box waves-effect waves-material waves-green">This is a box</div> <div class="box waves-effect waves-material waves-teal">This is a box</div> </div> </div> <br><br> <h3>Create wave effect with programmatically</h3> <div> <code><pre><div id="rippleContainer" data-waves-background-color="random" class="box" style="display: block"></div> <button id="addRipple">Click me to add ripple</button> <script> $('#addRipple').click(function () { $('#rippleContainer').rippleAnimation(); }); </script></pre></code> <br> <div> <div id="rippleContainer" data-waves-background-color="random" class="box" style="display: block"></div> <button id="addRipple">Click me to add ripple</button> <script> $('#addRipple').click(function () { $('#rippleContainer').rippleAnimation(); }); </script> </div> </div> <br> <hr> <br> <div> <code><pre><div id="elementRipple" class="box" style="display: block">Click me</div> <button id="removeRipple">Click me to remove ripples</button> <script> var ripples = []; $('#elementRipple').click(function () { var ripple = $(this).ripple( 50, // x position 80, // y position ); ripples.push(ripple); }); $('#removeRipple').click(function () { $.each(ripples, function (index, ripple) { $('#removeRipple').hideRipple(ripple); }); }); </script></pre></code> <br> <div> <div id="elementRipple" class="box" style="display: block">Click me</div> <button id="removeRipple">Click me to remove ripples</button> <script> var ripples = []; $('#elementRipple').click(function () { var ripple = $(this).ripple( 50, // x position 80, // y position ); ripples.push(ripple); }); $('#removeRipple').click(function () { $.each(ripples, function (index, ripple) { $('#removeRipple').hideRipple(ripple); }); }); </script> </div> </div> <br> <hr> <br> <div> <code><pre><div id="elementRippleCenter" class="box" style="display: block">Click me</div> <button id="removeRippleCenter">Click me to remove ripples</button> <script> var ripples = []; $('#elementRippleCenter').click(function () { var ripple = $(this).ripple(); ripples.push(ripple); }); $('#removeRippleCenter').click(function () { $.each(ripples, function (index, ripple) { $('#removeRippleCenter').hideRipple(ripple); }); }); </script></pre></code> <br> <div> <div id="elementRippleCenter" class="box" style="display: block">Click me</div> <button id="removeRippleCenter">Click me to remove ripples</button> <script> var ripples = []; $('#elementRippleCenter').click(function () { var ripple = $(this).ripple(); ripples.push(ripple); }); $('#removeRippleCenter').click(function () { $.each(ripples, function (index, ripple) { $('#removeRippleCenter').hideRipple(ripple); }); }); </script> </div> </div> </div> </main> </body> </html>