Applying 3D Hover Effect to Multiple Divs

Question

I have this jQuery 3D hover effect: https://jsfiddle.net/qdc4v1jg/

The code works fine when it's applied to one div, but when it's applied to more than one div, it doesn't work.

I tried to get the code to work with multiple divs by:

Changing all of the HTML & CSS div ID's to div classes
Changing the jQuery code from "document.getElementById('tilt')" to "document.getElementsByClassName('tilt')"

However, none of these changes worked. As you can see here: https://jsfiddle.net/qdc4v1jg/1/

If anyone could help me out with this, I'd greatly appreciate it. Again, I just need this 3D hover effect to work with multiple divs (an unlimited amount).

user_13866075 · Answer

Wow, that's so cool! Correct me if I'm wrong, but getElementsByClassName returns an HTML collection, right? Wouldn't you need to turn it into an array and then use 'forEach' to add an event listener to each one?

P.S. You've probably got some of the best comments on your code I've seen on Stackoverflow (I'm new, so I obviously haven't seen much haha)

EDIT: Sorry it took a while for me to reply back! Here's the solution. I've added comments to the changes I've made. I basically put the majority of your code under forEach so that everything is applied to EACH item in the array we created.

/* Store the elements with class "tilt" in elements */
let elements = Array.from(document.getElementsByClassName("tilt"));

/* For each 'item' in the "elements" array... */
elements.forEach((item) => {
  /* Assign each 'item' in the "elements" array to a variable called "el" */
  let el = item;

  /*
   * Add a listener for mousemove event
   * Which will trigger function 'handleMove'
   * On mousemove
   */
  el.addEventListener("mousemove", handleMove);

  /* Get the height and width of the element */
  const height = el.clientHeight;
  const width = el.clientWidth;

  /* Define function a */
  function handleMove(e) {
    /*
     * Get position of mouse cursor
     * With respect to the element
     * On mouseover
     */
    /* Store the x position */
    const xVal = e.layerX;
    /* Store the y position */
    const yVal = e.layerY;

    /*
     * Calculate rotation valuee along the Y-axis
     * Here the multiplier 20 is to
     * Control the rotation
     * You can change the value and see the results
     */
    const yRotation = 20 * ((xVal - width / 2) / width);

    /* Calculate the rotation along the X-axis */
    const xRotation = -20 * ((yVal - height / 2) / height);

    /* Generate string for CSS transform property */
    const string =
      "perspective(500px) scale(1.1) rotateX(" +
      xRotation +
      "deg) rotateY(" +
      yRotation +
      "deg)";

    /* Apply the calculated transformation */
    el.style.transform = string;
  }

  /* Add listener for mouseout event, remove the rotation */
  el.addEventListener("mouseout", function () {
    el.style.transform = "perspective(500px) scale(1) rotateX(0) rotateY(0)";
  });

  /* Add listener for mousedown event, to simulate click */
  el.addEventListener("mousedown", function () {
    el.style.transform = "perspective(500px) scale(0.9) rotateX(0) rotateY(0)";
  });

  /* Add listener for mouseup, simulate release of mouse click */
  el.addEventListener("mouseup", function () {
    el.style.transform = "perspective(500px) scale(1.1) rotateX(0) rotateY(0)";
  });
});

html {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* Styles for the tilt block */
.tilt {
  display: block;
  height: 200px;
  width: 300px;
  background-color: grey;
  margin: 50px auto;
  transition: box-shadow 0.1s, transform 0.1s;

  /*
     * Adding image to the background
     * No relation to the hover effect.
     */
  background-image: url(http://unsplash.it/300/200);
  background-size: 100%;
  background-repeat: no-repeat;
}

.tilt:hover {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

user_2015909 · Answer

Javascript

Simply move you Javascript to a function
use document.querySelectorAll('.tilt') to create a list of elements
remove let el = document.getElementById('tilt')
loop the list of elements and attach the 'tilt' listeners to each element found

CSS

Change all ID #tilt to class .tilt
don't modify , but use or a .wrapper instead

HTML

Add as many as 'tilt elements' as you like using class="tilt"

Snippet (go 'Full-page' view on SO)

//Traverse an array and execute the passed callback function for each array element found
var forEachEntryIn = function (array, callback, scope) {
 for (var i = 0; i < array.length; i++) { callback.call(scope, i, array[i]); } };

// Create a list of 'tilted' element ojects 
var elList = document.querySelectorAll('.tilt');
// can be any comma delimited selector list, not just '.tilt'

// Attach the tilt listeners to the list of elements
forEachEntryIn(elList, function (idx,el,scope) { connectListener(el); } );

/* 
 * Packed original code in function connectListener()
 * parameter: element object to attach listenener to
 */
function connectListener(el) {

/* Store the element in el */
//let el = document.getElementById('tilt') // REMOVE

/* Get the height and width of the element */
const height = el.clientHeight;
const width = el.clientWidth;

    /*
      * Add a listener for mousemove event
      * Which will trigger function 'handleMove'
      * On mousemove
      */
    el.addEventListener('mousemove', handleMove);

    /* Define function a */
    function handleMove(e) {
      /*
        * Get position of mouse cursor
        * With respect to the element
        * On mouseover
        */
      /* Store the x position */
      const xVal = e.layerX;
      /* Store the y position */
      const yVal = e.layerY;
  
      /*
        * Calculate rotation valuee along the Y-axis
        * Here the multiplier 20 is to
        * Control the rotation
        * You can change the value and see the results
        */
      const yRotation = 20 * ((xVal - width / 2) / width);
  
      /* Calculate the rotation along the X-axis */
      const xRotation = -20 * ((yVal - height / 2) / height);
  
      /* Generate string for CSS transform property */
      const string = 'perspective(500px) scale(1.1) rotateX(' + xRotation + 'deg) rotateY(' + yRotation + 'deg)';
  
      /* Apply the calculated transformation */
      el.style.transform = string;
    }

    /* Add listener for mouseout event, remove the rotation */
    el.addEventListener('mouseout', function() {
      el.style.transform = 'perspective(500px) scale(1) rotateX(0) rotateY(0)';
    });

    /* Add listener for mousedown event, to simulate click */
    el.addEventListener('mousedown', function() {
      el.style.transform = 'perspective(500px) scale(0.9) rotateX(0) rotateY(0)';
    });

    /* Add listener for mouseup, simulate release of mouse click */
    el.addEventListener('mouseup', function() {
      el.style.transform = 'perspective(500px) scale(1.1) rotateX(0) rotateY(0)';
    });
};

body {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center; /* CORRECTED, was 'align-contents' */
    height: 100%;
}
/*
    Changed all ID #tilt to Class .tilt 
*/
/* Styles for the tilt block */
.tilt {
    display: block;
    height: 200px;
    width: 300px;
    background-color: grey;
    margin: 3rem auto; /* MOD from '0' to add some space */

    transition: box-shadow 0.1s, transform 0.1s;
  
    /*
        Adding image to the background
        No relation to the hover effect.
    */
    background-image: url(http://unsplash.it/300/200);
    background-size: 100%;
    background-repeat: no-repeat;
}

.tilt:hover {
    box-shadow: 0px 0px 30px rgba(0,0,0, 0.6);
    cursor: pointer;
}

Applying 3D Hover Effect to Multiple Divs

2 Answers