#home(data-role="page")
  .ui-content
View Compiled
html,body,#home,.ui-content
  margin: 0
  padding: 0
  height: 100%
  width: 100%
  overflow: hidden
  cursor: pointer
#home
  background: url(https://i.imgur.com/IcH3btW.jpg) 
  background-attachment: fixed
  background-position: center center
  background-size: auto 100%
  position: relative
.wave-position
  position: absolute
  width: 300px
  height: 300px
.wave-body
  position: relative
  width: 100%
  height: 100%
.wave
  position: absolute
  top: calc((100% - 15px)/2)
  left: calc((100% - 15px)/2)
  width: 15px
  height: 15px
  border-radius: 300px
  background: url(https://i.imgur.com/IcH3btW.jpg)
  background-attachment: fixed
  background-position: center center
.wave0
  z-index: 2
  background-size: auto 106%
  animation: w 1s forwards
.wave1
  z-index: 3
  background-size: auto 102%
  animation: w 1s .2s forwards
.wave2
  z-index: 4
  background-size: auto 104%
  animation: w 1s .4s forwards
.wave3
  z-index: 5
  background-size: auto 101%
  animation: w 1s .5s forwards
.wave4
  z-index: 6
  background-size: auto 102%
  animation: w 1s .8s forwards
.wave5
  z-index: 7
  background-size: auto 100%
  animation: w 1s 1s forwards
[class^="wave"]
  &.zoomIn
    animation: z 1s 0s forwards
@keyframes w
  0%
    top: calc((100% - 15px)/2)
    left: calc((100% - 15px)/2)
    width: 15px
    height: 15px
  100%
    top: calc((100% - 300px)/2)
    left: calc((100% - 300px)/2)
    width: 300px
    height: 300px
@keyframes z
  0%
    // transform: scale(100%)
    opacity: 1
  100%
    // transform: scale(0%)
    opacity: 0
  
  
View Compiled
// var mx, my, timer;
let z = 2;
$(document).on('mouseover', (e)=> {
  const mx = e.pageX;
  const my = e.pageY;
  z = z + 1;
  _wave(mx, my, z);
});

function _wave(i, j, k) {
  $('.ui-content').prepend(
    '<div class="wave-position water' + k + '" style="z-index:' + k + ';top:' + (j - 150) + 'px;left:' + (i - 150) + 'px;">' +
    '<div class="wave-body">' +
    '<div class="wave wave5"></div>' +
    '<div class="wave wave4"></div>' +
    '<div class="wave wave3"></div>' +
    '<div class="wave wave2"></div>' +
    '<div class="wave wave1"></div>' +
    '<div class="wave wave0"></div>' +
    '</div>' +
    '</div>'
  );
  setTimeout(() => {
    $('.water' + k).addClass('zoomIn');
    setTimeout(() => {
      $('.water' + k).remove();
    }, 1000);
  }, 1000);
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://code.jquery.com/jquery-1.12.4.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js