次のWordPressテーマのフルスクリーン画像のこの例と同じ垂直の「画像パン」/「マウスオーバー」効果を作成するために利用できるコードを探しています
返信ありがとうございます。
ありがとう
このコードを試してくださいdivには、幅と高さよりも大きい大きなbackgroundimageがあります
// HTML
<div id="pageBg">
</div>
// CSS
#pageBg {
background: url(images/pageBg.jpg) no-repeat 0 0 scroll;
background-size: cover;
height: auto;
left: 0;
min-height: 768px;
min-width: 1024px;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
// Javascript
$(document).ready(function(){
$('#pageBg').mousemove(function(e){
var mousePosY = (e.pageY/$(window).width())*100;
$('#pageBg').css('background-position-y', mousePosY +'%');
});
});
1 つのアプローチの疑似コードを次に示します。
css
.div{
width:200px;
height:200px;
overflow:hidden;
}
jQuery
$('#theimage').mousemove(function(event){
$('#theimage').css('top', function(current){
return current + event.pageY + offset;
//offset is what sets the zero point in the center
};
});
これからの教訓は、コード自体ではなく、ロジックであるべきです。私はそれを試していませんが、まだエラーがある可能性があると確信しています。