body,
html {
  width: 100%;
  height: 100%;
}

.g-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=");
  background-attachment: fixed;
  background-position: center center;
  background-size: auto 100%;
  overflow: hidden;
  cursor: pointer;
}

.g-position {
  position: absolute;
  width: 80vmin;
  height: 80vmin;
}

.g-center {
  position: relative;
  width: 100%;
  height: 100%;
}

.wave {
  position: absolute;
  top: calc((100% - 20vmin)/2);
  left: calc((100% - 20vmin)/2);
  width: 20vmin;
  height: 20vmin;
  border-radius: 50%;
  background-image: url("https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=");
  background-attachment: fixed;
  background-position: center center;
  transform: translate3d(0, 0, 0);
  opacity: 0;
  transition: all 0.2s;
}

.g-wave1 {
  background-size: auto 106%;
  -webkit-animation: wave 1s ease-out 0.1s;
          animation: wave 1s ease-out 0.1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 10;
}

.g-wave2 {
  background-size: auto 102%;
  -webkit-animation: wave 1s ease-out 0.15s;
          animation: wave 1s ease-out 0.15s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 20;
}

.g-wave3 {
  background-size: auto 104%;
  -webkit-animation: wave 1s ease-out 0.25s;
          animation: wave 1s ease-out 0.25s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 30;
}

.g-wave4 {
  background-size: auto 100%;
  -webkit-animation: wave 1s ease-out 0.4s;
          animation: wave 1s ease-out 0.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 40;
}

@-webkit-keyframes wave {
  0% {
    top: calc((100% - 20vmin)/2);
    left: calc((100% - 20vmin)/2);
    width: 20vmin;
    height: 20vmin;
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    top: calc((100% - 80vmin)/2);
    left: calc((100% - 80vmin)/2);
    width: 80vmin;
    height: 80vmin;
    opacity: 0;
  }
}

@keyframes wave {
  0% {
    top: calc((100% - 20vmin)/2);
    left: calc((100% - 20vmin)/2);
    width: 20vmin;
    height: 20vmin;
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    top: calc((100% - 80vmin)/2);
    left: calc((100% - 80vmin)/2);
    width: 80vmin;
    height: 80vmin;
    opacity: 0;
  }
}

(function() {
    let x, y;
    let index = 0;
    let screenSizeWidth = $('body').width();
    let screenSizeHeight = $('body').height();
    let halfvmin = (screenSizeWidth > screenSizeHeight ? screenSizeHeight / 2 : screenSizeWidth / 2) * 0.8;
    
    console.log('halfvmin', halfvmin);
    
    $(document).on("click", function(e) {
        x = e.pageX;
        y = e.pageY;
        waveMove(x, y, index++);
    });

    function waveMove(x, y, z) {
        $(".g-container").append(`
            <div class="g-position g-position${z}" style="top:${y - halfvmin}px; left:${x - halfvmin}px; z-index:${z}">
                <div class="g-center">
                    <div class="wave g-wave1"></div>
                    <div class="wave g-wave2"></div>
                    <div class="wave g-wave3"></div>
                    <div class="wave g-wave4"></div>
                </div>
            </div>
        `);
        
        setTimeout(function() {
            $(`.g-position${z}`).remove();
        }, 3000);
    }
})();