javascript - jQuery divs "look up"到鼠标指针

Question

我正在尝试用 jQuery 复制这种效果 - http://www.louisvuitton.fr/front/#/fra_FR/Homepage那些移动的“卡片”，它们像在仰望鼠标一样跟随鼠标。

我找到了一个脚本，它主要满足我的需要，但我需要在 x/y 上添加卡片移动，而且如果每张卡片都有自己的中心点，而不是屏幕中心，那就太好了。所以当我在一张卡片上时，那张卡片将是平的，而另一张卡片将抬头看向鼠标。

HTML:

<div id="collections">
        <article>
        </article>
        <article>
        </article>
        <article>
        </article>
        <article>
        </article>
        <article>
        </article>
    </div>

CSS:

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; 
    }

jQuery:

$.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(); }
    });
};

jsfiddle:http://jsfiddle.net/Xw259/

谢谢你的帮助。

Answer 1

当每张卡片作为他自己的中心时有点奇怪但是..

Fiddle

您知道，在此处提问之前先用 Google 搜索一下可能会有所帮助......

Link

无论如何...

$(document).mousemove(function(e) {
    $('article').each(function(i,elem) {

        var xpos = $(elem).position().left;
        var ypos = $(elem).position().top;

        var cx = Math.ceil($(elem).parent().width() / 2.0);
        var cy = Math.ceil($(elem).parent().height() / 2.0);
        var dx = e.pageX - cx;
        var dy = e.pageY - cy;

        if (cardIsCenter) {
            cx = xpos + Math.ceil($(elem).width() / 2.0);
            cy = ypos + Math.ceil($(elem).height() / 2.0);
        }

        var tiltx = (dy / cy);
        var tilty = - (dx / cx);
        var radius = Math.sqrt(tiltx*tiltx + tilty*tilty);
        var degree = (radius * 20);

        $(elem).css('transform',
                    'rotate3d(' + tiltx + ',' + tilty + 
                    ',0,' + degree + 'deg)');

    });
});