Icon Animation On HTML Elements

by Chintan Upadhayay

HTML

<div id="sh-main-wrapper">

  <div class="banner-bg"></div>

  <div class="layer-parent">

    <div class="layer-01"><img src="https://livedemo00.template-help.com/wt_62466_v1/images/parallax-scene-06-240x243.png"></div>
    <div class="layer-02"><img src="https://livedemo00.template-help.com/wt_62466_v1/images/parallax-scene-01-132x133.png" alt=""></div>
    <div class="layer-03"><img src="https://livedemo00.template-help.com/wt_62466_v1/images/parallax-scene-03-108x120.png" alt=""></div>
  </div>



</div>

CSS

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

 body {
   font-family: "Grand Hotel";
   color: white;
 }

 ul {
   width: 100%;
   height: 100%;
   background: #90d9ff;
 }

 #sh-main-wrapper {
   position: relative;
   height: 100%;
 }

 .banner-bg {
   background: url('img/pattern14.jpg');
   background-attachment: scroll;
   background-position: cover;
   background-repeat: repeat;
   background-size: auto auto;
   width: 100%;
   height: 100%;
   position: absolute !important;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   text-align: left;
   pointer-events: none;
 }

 #sh-main-wrapper {
   position: relative;
   height: 100%;
 }

 .layer-parent {
   position: relative;
   transform: translate3d(0px, 0px, 0px);
   transform-style: preserve-3d;
   height: 100%;
 }

 .layer-01 {
   position: absolute;
   top: 53%;
   left: 5%;
 }

 .layer-02 {
   top: 24%;
   position: absolute;
   right: 9%;
 }

 .layer-03 {
   position: absolute;
   top: 10%;
   left: 50%;
 }

JavaScript

$(document).ready(function() {


  var movementStrength_img1 = 25;
  var height_img1 = movementStrength_img1 / $(window).height();
  var width_img1 = movementStrength_img1 / $(window).width();

  $("body").mousemove(function(e) {
    console.log(e.pageX);
    var pageX_img1 = e.pageX - ($(window).width() / 2);
    var pageY_img1 = e.pageY - ($(window).height() / 2);
    var newvalueX_img1 = width_img1 * pageX_img1 * -1 + 10;
    var newvalueY_img1 = height_img1 * pageY_img1 * -1 + 20;

    if (newvalueX_img1 > 40) {
      newvalueX_img1 = 40;
    } else if (newvalueX_img1 < -15) {
      newvalueX_img1 = -15;
    } else {
      newvalueX_img1 = newvalueX_img1;
    }

    if (newvalueY_img1 > 40) {
      newvalueY_img1 = 40;
    } else if (newvalueY_img1 < -15) {
      newvalueY_img1 = -15;
    } else {
      newvalueY_img1 = newvalueY_img1;
    }
    $('.layer-01').css({
      transform: 'translate3d(' + (newvalueX_img1 - 10) + '%,' + (newvalueY_img1 - 10) + '%,0px)',
      'transform-style': 'preserve-3d'
    });
  });



  var movementStrength_img2 = 25;
  var height_img2 = movementStrength_img2 / $(window).height();
  var width_img2 = movementStrength_img2 / $(window).width();
  $("body").mousemove(function(e) {

    var pageX_img2 = e.pageX - ($(window).width() / 2);
    var pageY_img2 = e.pageY - ($(window).height() / 2);
    var newvalueX_img2 = width_img2 * pageX_img2 * -1 + 10;
    var newvalueY_img2 = height_img2 * pageY_img2 * -1 + 20;

    if (newvalueX_img2 > 40) {
      newvalueX_img2 = 40;
    } else if (newvalueX_img2 < -15) {
      newvalueX_img2 = -15;
    } else {
      newvalueX_img2 = newvalueX_img2;
    }

    if (newvalueY_img2 > 40) {
      newvalueY_img2 = 40;
    } else if (newvalueY_img2 < -15) {
      newvalueY_img2 = -15;
    } else {
      newvalueY_img2 = newvalueY_img2;
    }
    $('.layer-02').css({
      transform: 'translate3d(' + (newvalueX_img2 - 10) + '%,' + (newvalueY_img2 - 10) + '%,0px)',
      'transform-style':...