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

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ライセンス

 
Parallax effect on mouse hover

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

  • LATEST
  • RELATED
  • POPULAR