How can I transform an image to the cursor, and transform it on hover aswell?

问题内容:

I am working on a script to adjust an image using transform based on the cursor.

// JavaScript source code
var catchX = 0,
    catchY = 0,
    x = 0,
    y = 0,
    burn = 1 / 28;

function imageWatch() {
    x += (catchX - x) * burn;

    translate = 'translate(' + x + 'px, ' + y + 'px)';

    $('.image-area img').css({
        '-webit-transform': translate,
        '-moz-transform': translate,
        'transform': translate
    });

    window.requestAnimationFrame(imageWatch);
}

$(window).on('mousemove click', function (e) {

    var mouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
    catchX = (26 * mouseX) / 100;

});

imageWatch();
     
html,body { height:100%}
body {margin: 0; padding: 0;}
*, *::before, *::after {
  content:"\0020";
  box-sizing: border-box;
}
#stick {
  position:fixed;
  left: 0;
  top:0;
  opacity:.5;
  padding:2px;
  z-index:10;
  background:white;
}
.poster {
  display: inline-block;
  width: 32vw;
  height: 100vh;
  position:relative;
  overflow:hidden !important
}
 .image-area {
            position: absolute;
            width: 100%;
            height: 100vh;
            opacity: .24;
            transition: 2.5s ease;
        }

.image-area {
            opacity: 1;
        }


.image-area > img {
            margin-top: -312px;
            margin-left: -913px;
            width: auto;
            /* height: auto */
            height: 1000px;
            transform: scale(1,1);
            transition:8s all;
        }

.poster:hover .image-area > img {
            transform: scale(1.3,1.3)
        }
        
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="poster">
    <div class="image-area">
         <img class="poster" src="https://vignette1.wikia.nocookie.net/logopedia/images/f/fc/Sky_Believe_in_better_logo.jpg/revision/latest?cb=20110910152552" alt="Sky" />
    </div>
</div>

<div class="poster">
    <div class="image-area">
         <img class="poster" src="https://vignette1.wikia.nocookie.net/logopedia/images/f/fc/Sky_Believe_in_better_logo.jpg/revision/latest?cb=20110910152552" alt="Sky" />
    </div>
</div>

<div class="poster">
    <div class="image-area">
         <img class="poster" src="https://vignette1.wikia.nocookie.net/logopedia/images/f/fc/Sky_Believe_in_better_logo.jpg/revision/latest?cb=20110910152552" alt="Sky" />
    </div>
</div>
<button id="stick">
Toggle no transform
</button>

My JS is using the transform property, and so is my CSS to make it zoom on hover. If you remove the transform from the CSS, the script works fine, but I need the transition:8s all for the image to also zoom on hover, as well to align with the mouse.

I wondered if translateX would work rather than just translate. There is no change.

This S.O informed me that you can have two transform properies but they must be on one line, but how do I do that with my Javascript?


jsFiddle

问题评论:

原文地址:

https://stackoverflow.com/questions/47755402/how-can-i-transform-an-image-to-the-cursor-and-transform-it-on-hover-aswell

添加评论