Ehab Mamdouh Ismaiel Ehab Mamdouh Ismaiel - 4 months ago 15
Javascript Question

rotate on mouse hover

I have this function but there are two issues I can't solve, first one is that the mouse action is set on all the screen and I want it to be when hover over the dive "ehab" only, not when I move mouse over screen,
the other issue is that when I have more than one div , the function works only on the first one ...
kindly advise me

/*
By : Ofelquis
Twitter: @felquis
Blog : tutsmais.com.br

Simples implementação ;)
*/
!(function ($doc, $win) {
var screenWidth = $win.screen.width / 2,
screenHeight = $win.screen.height / 2,
$ehab = $doc.querySelectorAll('#ehab')[0],
validPropertyPrefix = '',
otherProperty = 'perspective(600px)';

if(typeof $ehab.style.webkitTransform == 'string') {
validPropertyPrefix = 'webkitTransform';
} else {
if (typeof $ehab.style.MozTransform == 'string') {
validPropertyPrefix = 'MozTransform';
}
}

$doc.addEventListener('mousemove', function (e) {
// vars
var centroX = e.clientX - screenWidth,
centroY = screenHeight - (e.clientY + 13),
degX = centroX * 0.1,
degY = centroY * 0.1

// Seta o rotate do elemento
$ehab.style[validPropertyPrefix] = otherProperty + 'rotateY('+ degX +'deg) rotateX('+ degY +'deg)';
});
})(document, window);

Answer

The first problem, (I want it to be when hover the div "#ehab"), you need the attach the mousemove event to your div:

$ehab.addEventListener('mousemove', function (e) {
     //You code here.
});

The second problem, (when I have more than one div , the function works only on the first one), you can't have duplicated IDs on your DOM tree, change the selector to a class, for example, .ehab then you have to loop through the matched elements, please try this code:

/*
                By     : Ofelquis
                Twitter: @felquis
                Blog   : tutsmais.com.br

                Simples implementação ;)
            */
    !(function($doc, $win) {
      var $ehabDIVs = $doc.querySelectorAll('.ehab'),
        otherProperty = 'perspective(600px)';


      for (var i = 0; i < $ehabDIVs.length; ++i) {
        var $ehab = $ehabDIVs[i];

        $ehab.addEventListener('mousemove', function(e) {
          // vars 
          var centroX = (e.pageX - this.offsetLeft) - this.offsetWidth/2,
            centroY = this.offsetHeight/2 - (e.pageY-this.offsetTop),
            degX = centroX * 0.1,
            degY = centroY * 0.1
          if(this._leave) clearInterval(this._leave);
          // Seta o rotate do elemento
          this.style.transform = otherProperty + 'rotateY(' + degX + 'deg)  rotateX(' + degY + 'deg)';
        });

        $ehab.addEventListener('mouseleave', function(e) {
          var self = this;
          this._leave = setTimeout(function() {
              self.style.transform = otherProperty + 'rotateY(0deg)  rotateX(0deg)';
          }, 1000);
        });

      }
    })(document, window);
.ehab {
  width:300px;
  height:300px;
  background-color:red;
  margin:15px;
  float:left;
  transition: all 0.01s ease;
}
<div class="ehab">First Div</div><div class="ehab">Second Div</div>

Good Luck Ismaiel.

Comments