パノラマ写真をマウスの位置に合わせて移動（翻訳+トランジション）

次のような状況があります。パノラマ写真を中心にしています（写真の左右の部分はまだ画面に表示されません）。パノラマ写真をマウスの位置に合わせて移動（翻訳+トランジション）

私は（絵の真ん中Xに関連した）マウスの位置に応じて、写真のことを希望：

は - マウスの場合は左へ>移動を（仮想ツアー中かのように）（写真の右側の部分に）。

- >右に移動します（マウスが画像の左側にある場合）。

- >最初の中央に戻ってきます（マウスが写真の外側にある場合）。

は、これは私が試した方法である（一方向にのみ運動を、私はしたい/必要性2つの方向）：

<head> 
<style type="text/css"> 
    #smartdemo3 { 
    width: 75%; 
    overflow: hidden; 
    } 

    #smartdemo3 img:hover { 
    transform: translate3d(-200px, 0px, 0px); 
    transition: transform 5s linear; 
    } 

    #smartdemo3 img { 
    transition: 4s all ease-in-out; 
    } 
</style> 
</head> 

<body> 
<div id="smartdemo3"> 
    <img src="../images/Panint1.jpg" /> 
</div> 
</body> 
</html>

私はそれをどのように行うことができますか？

ありがとうございます。

出典

2016-02-14 colombo2003

これはいかがですか？

フィドルのデモ：https://jsfiddle.net/os0moz5j/1/

HTML

<div class="panorama default"> 
    <img src="https://unsplash.it/2500/500?image=914"> 
</div>

CSS

.panorama{ width:400px; height:200px; margin:100px; overflow:hidden; position:relative; } 
.panorama img{ height:200px; width:auto; position:absolute; left:0; } 

.panorama.default img{ left:50%; transform:translateX(-50%); transition:all .2s ease; }

$('.panorama').on('mousemove',function(e){ 
    mousePos = e.pageX - $(this).offset().left; 
    eleWidth = $(this).outerWidth(); 
    imgWidth = $(this).find('img').outerWidth(); 
    relativeMousePos = mousePos/eleWidth; 
    imgPos = (imgWidth - eleWidth) * relativeMousePos; 
    $(this).find('img').css('transform','translateX(-'+imgPos+'px)'); 
}); 

$('.panorama').on('mouseenter',function(){ 
    $(this).removeClass('default'); 
}).on('mouseleave',function(){ 
    $(this).addClass('default'); 
    $(this).find('img').css('transform',''); 
});

出典

2016-02-14 22:55:26 rorymorris89

はあなたの助けのためにありがとうございました。マウスが画像の両側にあるときに画像が動くことをお勧めします。私がマウスを右に向けると（マウスはまだ動いていない）、画像は左に移動し、その逆も同様である。また、画像の移動を遅くしたい場合は、.2sの値をpanorama.default.imgの遷移から変更するだけで十分ですか？また、完全に中央の画像を表示するには、何を変更する必要がありますか？あなたのご協力に感謝します。 – colombo2003

パノラマ写真をマウスの位置に合わせて移動（翻訳+トランジション）

答えて

関連する問題