I am attempting to recreate a fascinating effect using jQuery - where "cards" move in response to the mouse cursor as if they are looking up at it.
I have come across a script that almost achieves what I need, but I require the ability to control the movement of the cards on the x and y axes individually. Additionally, it would be ideal if each card could have its own center point rather than being centered on the screen. This way, when the cursor hovers over a specific card, only that card will align flat while others look towards the mouse.
Here is the HTML structure:
<div id="collections">
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
</div>
Corresponding CSS styling:
div#collections {
width: 100%;
height: 100%;
position: relative;
z-index: 6;
}
div#collections article {
width: 20%;
height: 15%;
background: red;
position: absolute;
transform-style: preserve-3d;
transform-origin: center center;
backface-visibility: visible;
transform: rotateX( 0deg );
transition: transform 50ms ease;
}
div#collections article:nth-child(1) {
left: 20%;
top: 30%;
background: blue;
}
div#collections article:nth-child(2) {
left: 40%;
top: 10%;
background: black;
}
div#collections article:nth-child(3) {
right: 10%;
top: 20%;
background: pink;
}
div#collections article:nth-child(4) {
left: 10%;
bottom: 20%;
background: purple;
}
div#collections article:nth-child(5) {
right: 30%;
bottom: 30%;
background: green;
}
.notransition,
.notransition div#collections,
.notransition div#collections article {
transition-duration: 0 !important;
transition-delay: 0 !important;
}
.transition-reset,
.transition-reset div#collections,
.transition-reset div#collections article {
transition-duration: 600ms !important;
}
The jQuery function for this effect:
$.fn.mcollections = function() {
var doc = $(document),
body = $("section#home"),
docWidth = doc.width(),
docHeight = doc.height(),
horiz = 0,
vert = 0,
x,
y,
range = 30
objekt = this;
console.log("docWidth: "+docWidth);
console.log("docHeight: "+docHeight);
console.log("range: "+range);
function noTransition() {
body.removeClass("transition-reset"); //addClass("notransition");
}
function followMouse() {
horiz = ((range*2)*(x / docWidth))-range;
vert = -(((range*2)*(y / docHeight))-range);
objekt.css({"transform" : "rotateX(" + vert + "deg) rotateY(" +horiz + "deg)"});
noTransition();
}
function reset() {
body.removeClass("notransition").addClass("transition-reset");
objekt.css("transform", "");
}
doc.mousemove(function(e){
x = e.pageX;
y = e.pageY;
});
doc.mousemove($.throttle(50,followMouse));
doc.on({
mouseleave : function(){ reset(); },
mousedown : function(){ reset(); }
});
};
Check out the working example on jsfiddle: http://jsfiddle.net/Xw259/
Your assistance with this is greatly appreciated. Thank you.