Spostare (tradotto + transizione) foto panoramica in base alla posizione del mouse

Ho la seguente situazione: Ho una foto panoramica centrata (le parti destra e sinistra dell'immagine non sono ancora visibili sullo schermo).Spostare (tradotto + transizione) foto panoramica in base alla posizione del mouse

vorrei che, a seconda della posizione del mouse (relativo alla X centro della foto) le immagini:

-> si muove (come se in un tour virtuale) a sinistra (se il mouse è nella parte destra della foto);

-> si sposta verso destra (se il mouse si trova sulla parte sinistra dell'immagine);

-> e ritorna alla posizione centrata iniziale (quando il mouse è fuori dalle immagini).

È così che ho provato (il movimento in una sola direzione, ma voglio/bisogno due direzioni):

<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>

Come potrei farlo?

Grazie.

fonte

2016-02-14 colombo2003

Che ne dici di questo?

Fiddle demo: 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',''); 
});

fonte

2016-02-14 22:55:26 rorymorris89

La ringrazio molto per il vostro aiuto. Mi piacerebbe, però, che le immagini si muovano da sole quando il mouse si trova su entrambi i lati dell'immagine. Se punto il mouse sul lato destro (il mouse è fermo, non si muove) l'immagine si sposta a sinistra e viceversa. Inoltre, se voglio che l'immagine si muova più lentamente è sufficiente modificare il valore .2s dalla transizione in panorama.default.img? Inoltre, per avere immagini perfettamente centrate, cosa devo modificare? Milioni di grazie per il vostro aiuto. – colombo2003

Spostare (tradotto + transizione) foto panoramica in base alla posizione del mouse

risposta

Problemi correlati