Fiddle

Question

我试图用jQuery复制这种效果 - http://www.louisvuitton.fr/front/#/fra_FR/Homepage移动＆＃34;卡＆＃34;跟随鼠标就像他们正在仰视它一样。

我找到了一个主要完成我需要的脚本，但是我需要在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

你知道，在这里问一个问题之前谷歌的一点点可能有帮助....

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)');

    });
});

jQuery divs“查找”鼠标指针

1 个答案:

Fiddle

Link