Why animation is not working for all class element?

Question

My animation is not working for all the images but only for the first image. I want to move the images when the mouse is enter and move in the image.

var container = document.querySelector(".movement"),
          inner = document.querySelector(".product");

      // Mouse
      var mouse = {
        _x: 0,
        _y: 0,
        x: 0,
        y: 0,
        updatePosition: function(event) {
          var e = event || window.event;
          this.x = e.clientX - this._x;
          this.y = (e.clientY - this._y) * -1;
        },
        setOrigin: function(e) {
          this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
          this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
        },
        show: function() {
          return "(" + this.x + ", " + this.y + ")";
        }
      };

      // Track the mouse position relative to the center of the container.
      mouse.setOrigin(container);
      var counter = 0;
      var refreshRate = 10;
      var isTimeToUpdate = function() {
        return counter++ % refreshRate === 0;
      };
     var onMouseEnterHandler = function(event) {
        update(event);
      };

      var onMouseLeaveHandler = function() {
        inner.style = "";
      };

      var onMouseMoveHandler = function(event) {
        if (isTimeToUpdate()) {
          update(event);
        }
      };
      var update = function(event) {
        mouse.updatePosition(event);
        updateTransformStyle(
          (mouse.y / inner.offsetHeight / 2).toFixed(2),
          (mouse.x / inner.offsetWidth / 2).toFixed(2)
        );
      };

      var updateTransformStyle = function(x, y) {
        var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
        inner.style.transform = style;
        inner.style.webkitTransform = style;
        inner.style.mozTranform = style;
        inner.style.msTransform = style;
        inner.style.oTransform = style;
      };
      container.onmousemove = onMouseMoveHandler;
      container.onmouseleave = onMouseLeaveHandler;
      container.onmouseenter = onMouseEnterHandler;

.movement {
      perspective: 100px;
    }
.product{
      transition: transform 0.5s;
      -webkit-transition: transform 0.5s;
      -moz-transition: transform 0.5s;
      -o-transition: transform 0.5s;
    }

<div class="container">
            <div class="row">
              <div class="col-md-6 col-sm-6 movement">
                <img class="product" src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1953&q=80">
              </div>
            </div>

            <div class="row">
              <div class="col-md-6 col-sm-6 movement">
                  <img class="product" src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1953&q=80">
              </div>
         
            </div>

I want to transform the image according to the mouse position. Suppose, the mouse position is (112,80) then the image will rotate rotateX(112deg), rotateY(80 deg) How can I SOLVE THIS PROBLEM?

score 2 · Accepted Answer · answered Jan 04 '21 at 06:02

You can use querySelectorAll and add eventListner to all elements you want to animate

Example:

var wraps = document.querySelectorAll(".movement");

for (var i = 0; i < wraps.length; i++) {
    wraps[i].addEventListener("mouseover", function () {
        animation(this);
    });
}

// Mouse
var mouse = {
    _x: 0,
    _y: 0,
    x: 0,
    y: 0,
    updatePosition: function (event) {
        var e = event || window.event;
        this.x = e.clientX - this._x;
        this.y = (e.clientY - this._y) * -1;
    },
    setOrigin: function (e) {
        this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
        this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
    },
    show: function () {
        return "(" + this.x + ", " + this.y + ")";
    }
};

function animation(container) {

    var inner = container.querySelector(".product");

    // Track the mouse position relative to the center of the container.
    mouse.setOrigin(container);
    var counter = 0;
    var refreshRate = 10;
    var isTimeToUpdate = function () {
        return counter++ % refreshRate === 0;
    };
    var onMouseEnterHandler = function (event) {
        update(event);
    };

    var onMouseLeaveHandler = function () {
        inner.style = "";
    };

    var onMouseMoveHandler = function (event) {
        if (isTimeToUpdate()) {
            update(event);
        }
    };
    var update = function (event) {
        mouse.updatePosition(event);
        updateTransformStyle(
            (mouse.y / inner.offsetHeight / 2).toFixed(2),
            (mouse.x / inner.offsetWidth / 2).toFixed(2)
        );
    };

    var updateTransformStyle = function (x, y) {
        var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
        inner.style.transform = style;
        inner.style.webkitTransform = style;
        inner.style.mozTranform = style;
        inner.style.msTransform = style;
        inner.style.oTransform = style;
    };
    container.onmousemove = onMouseMoveHandler;
    container.onmouseleave = onMouseLeaveHandler;
    container.onmouseenter = onMouseEnterHandler;

}

.movement {
    perspective: 100px;
}

.product {
    transition: transform 0.5s;
    -webkit-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
    -o-transition: transform 0.5s;
}

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-6 movement">
            <img class="product"
                src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1953&q=80">
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-sm-6 movement">
            <img class="product"
                src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1953&q=80">
        </div>

    </div>
</div>

Why animation is not working for all class element?

1 Answers1