All geek questions in one place

Moving (translation + transition) panoramic photo depending on the position of the mouse

I have the following situation: I have a centered panoramic photo (the right and left parts of the image are not yet visible on the screen).

I would like, depending on the position of the mouse (relating to the middle X image) of the image:

-> moves (as if in a virtual tour) to the left (if the mouse is on the right side of the photo);

-> moves to the right (if the mouse is on the left side of the image);

-> and returns to its original position (when the mouse is outside the image).

This is how I tried (moving in one direction only, but I need / need two directions):

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

How can i do this?

Thanks.

+5
source share
1 answer

How about this?

Demo screenshot: 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; }

Js

 $('.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',''); });
0
source

Source: https://habr.com/ru/post/1243008/

More articles:


All Articles