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

Parallax effect on mouse hoverはマウスホバーで背景画像にパララックス効果を追加するJavaScript
<div id="parallax1"> <div id="parallax2"> <div id="parallax3"> </div> </div> </div>
#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; }
$("#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ライセンス