A jquery-based mouse-clicked Water Wave Effect

A jquery-based mouse-clicked Water Wave Effect

Today, I want to introduce a special water wave effect that is implemented by jquery by clicking the mouse. Click the page with your mouse, and you will see the page continuously ripple. Then the water ripple gradually disappears. The results are very good. Let's take a look:

 

Download Online Preview source code

 

Implementation code.

Html code:

 <div id="container">        
Css code:
  * {  user-select: none;  cursor: default;}body, html {  height: 100%;  font-family: helvetica neue,helvetica,arial,sans-serif;}h1, p {  text-align: center;  position: relative;  z-index: 1;}h1 {  padding: 50px 0;  margin: 0 50px;  font-size: 30px;  line-height: 30px;  font-weight: 200;}p {  font-size: 14px;  font-weight: 200;  margin: 0 50px;  color: #53646e;}p em {  color: #42a6df;}#container {  position: relative;  height: 100%;  width: 100%;  overflow: hidden;}#container button {  padding: 20px;  border: none;  background: transparent;  display: block;  position: relative;  z-index: 3;  margin: 0 auto;}.dot {  height: 2px;  width: 2px;  border-radius: 100%;  position: absolute;  z-index: 0;  animation: sploosh 3s cubic-bezier(0.165, 0.84, 0.44, 1);  background: transparent;}@keyframes sploosh {  0% {    box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);    background: rgba(66, 166, 223, 0.7);  }  100% {    box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);    background: rgba(66, 166, 223, 0);  }}
Js Code:
  $(window).ready(function () {            setTimeout(function () {                setTimeout(function () {                    $('#container').append('<div class="dot">)                }, 900);                setTimeout(function () {                    $('#container').append('<div class="dot">)                }, 600);                setTimeout(function () {                    $('#container').append('<div class="dot">)                }, 300);                setTimeout(function () {                    $('#container').append('<div class="dot">)                }, 0);                setTimeout(function () {                    $('#container .dot').remove();                }, 2900);            }, 1500);        });        // click animation        if (Modernizr.touch) {            $('#container').on('touchstart', function (e) {                var left = e.originalEvent.touches[0].pageX;                var top = e.originalEvent.touches[0].pageY;                $(this).append('<div class="dot">)                setTimeout(function () {                    $('#container .dot:first-of-type').remove();                }, 3000);            });            document.body.addEventListener('touchmove', function (e) {                e.preventDefault();            });        } else {            $('#container').on('mousedown', function (e) {                var left = e.pageX;                var top = e.pageY;                $(this).append('<div class="dot">)                setTimeout(function () {                    $('#container .dot:first-of-type').remove();                }, 3000);            });        } //@ sourceURL=pen.js
Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/6909

How can I make effects with water ripple when I click a win7 mouse?
Download the mouse topic. It's a mouse topic.

How can I close an EXE program and set it to click the mouse to see the effect of water Ripple? How can I close it?
You should call mscongfig in the startup Item to check if there is any exe file in the startup Item. Just click the checkpoint and restart.