Tip: Animate any element on mouseover and mousemove

Tips & Tricks
1

Hi all,

Here is a little function I created that calculates the mid-point of any element and then calls for actions when you move over and around the element. Can be adapted for most situations.

Run this code as a new function on Mouse Over

/// instansiate the element and any other elements at the initial mouseover
element.style.transform = "rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1.07, 1.07, 1.07)";
hypeDocument.getElementById('text').style.transform = "";
element.style.boxShadow = "0px 5px 10px #666";
element.style.borderRadius = "10px";
element.style.background = "-webkit-linear-gradient(white, grey);"

	
/// declare variables and work out the mid-point
var doc = hypeDocument.documentId();
var docWidth = parseInt(hypeDocument.getElementById(doc).style.width);

var positionX = (document.body.clientWidth - docWidth) / 2 + parseInt(element.style.left);
var positionY = parseInt(element.style.top) - document.body.scrollTop;

var midPointX = positionX + (parseInt(element.style.width) / 2);
var midPointY = positionY + (parseInt(element.style.height) / 2);

/// Actions for when the mouse moves (over each quarter in this case)
element.onmousemove = function (event) {
						
	var tempX = event.clientX;
        var tempY = event.clientY;

    	
            if (tempX > positionX && tempX < midPointX && tempY < midPointY ) { /// top left corner
            /// Actions after mouse moves over the corner
		hypeDocument.getElementById('text').style.transform = "scale3d(1.17, 1.17, 1.17)";
		element.style.boxShadow = "5px 0px 10px #666";
		element.style.webkitTransform = "rotateX(15deg) rotateY(-5deg) rotateZ(0deg) scale3d(1.07, 1.07, 1.07)";
		}
		
		if (tempX > positionX && tempX > midPointX && tempY < midPointY ) { /// top right corner
			/// Actions after mouse moves over the corner
			hypeDocument.getElementById('text').style.transform = "scale3d(1.17, 1.17, 1.17)";
			element.style.boxShadow = "-5px 0px 10px #666";
			element.style.webkitTransform = "rotateX(15deg) rotateY(5deg) rotateZ(0deg) scale3d(1.07, 1.07, 1.07)";
		}
		
		if (tempX > positionX && tempX < midPointX && tempY > midPointY ) { /// bottom left corner
			/// Actions after mouse moves over the corner
			hypeDocument.getElementById('text').style.transform = "scale3d(1.17, 1.17, 1.17)";
			element.style.boxShadow = "2px -5px 10px #666";
			element.style.webkitTransform = "rotateX(-15deg) rotateY(-5deg) rotateZ(0deg) scale3d(1.07, 1.07, 1.07)";
		}
		
		if (tempX > positionX && tempX > midPointX && tempY > midPointY ) { /// bottom right corner
			/// Actions after mouse moves over the corner
			hypeDocument.getElementById('text').style.transform = "scale3d(1.17, 1.17, 1.17)";
			element.style.boxShadow = "-2px -5px 10px #666";
			element.style.webkitTransform = "rotateX(-15deg) rotateY(5deg) rotateZ(0deg) scale3d(1.07, 1.07, 1.07)";
		}
		
	}

To reset the element when you “Mouse Out” run this code reset() on Mouse Out:

element.style.transform = "";
element.style.boxShadow = "";
hypeDocument.getElementById('text').style.transform = "";

Basically you’re getting rid of any transitions and placing the element (and any other elements) back to their original states.

Hope this is useful to somebody.

imitationKlocv2.zip (40.7 KB)

4 Likes
2

Very nice!! Thank you =)

3

That’s really awesome. Although, I was wondering a slightly more modification to this. You’re very close to what I’m looking for but I noticed that the text itself is NOT quite parallaxed. This is the idea of the new Apple TV poster. There are few more examples out there on the net. What I need is when you have several layers because I’m looking at wanting to place unlimited number of layers and as you move the mouse over one side or the other it feels like the layers move in certain way that it feels like 3D. Then obviously when you mouse out it flattens. Here’s another example: http://designmodo.com/apple-tv-effect/ Yes, I can use this example, but Hype seems a little easier to work with. I don’t understand programming at all. I’m a visual designer. Anyway, thanks.

4

Thanks for sharing this. I am trying to do something related but can’t see anything on the forums.
I want the entire background image and certain elements to respond to mouse movements exactly like this site - http://www.riomovies.com

Will your script work?
Here is the .hype files I want to apply this too…

Thanks!