Javascript

【jQuery】ホバーで背景画像にパララックス効果Parallax effect on mouse hover

August 26, 2016

Parallax effect on mouse hoverはマウスホバーで背景画像にパララックス効果を追加するJavaScript

HTML

 <div id="parallax1">
    <div id="parallax2">
      <div id="parallax3">
      </div>
    </div>
  </div>

CSS

#parallax1{
    background: url('img/paint1.jpg') no-repeat center  center ;
    background-size: calc(100% + 50px);
    width: 750px;
    height: 600px;
    z-index: 1;
  }

  #parallax2{
    background: url('img/paint2.png') no-repeat center  center ;
    background-size: calc(100% + 50px);
    width: 750px;
    height: 600px;
    z-index: 2;
  }

  #parallax3{
    background: url('img/paint3.png') no-repeat center  center ;
    background-size: calc(100% + 50px);
    width: 750px;
    height: 600px;
    z-index: 3;
  }

JavaScript

  $("#parallax1").mousemove(function(e){
    parallax(this, e, 25);
  });

  $("#parallax2").mousemove(function(e){
    parallax(this, e, 75);
  });

  $("#parallax3").mousemove(function(e){
    parallax(this, e, 125);
  });

 function parallax(obj, e, factor){
    var width = factor / $(obj).width();
    var height = factor / $(obj).height();
    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2) - $(window).scrollTop();
    var newvalueX = width * pageX * -1 - 25;
    var newvalueY = height * pageY * -1 - 25;
    $(obj).css("background-position", newvalueX + "px " + newvalueY + "px");
  }

MITライセンス

Demo/Download