1

我想在滚动时旋转一个 div。
当我向下滚动页面的 25% 时，我希望元素旋转 90*，当我滚动页面的 50% 时，我希望它旋转 180*，依此类推。

有人建议我使用 jQueryRotat.js，我在 JSfiddle 上填写了所有内容，但无法正常工作。你可以在这里查看我已经拥有的：JSFiddle

这是我到目前为止得到的

HTML：

<div class="site_wrapper">
    <div class="logo">
        <h1>Logo</h1>
    </div>
</div

CSS：

.site_wrapper{
    max-width:200px;
    height:10000px;
    margin:auto;
    background:#555;
}

.logo{
    width:150px;
    height:150px;
    margin-left:-75px;
    border-radius:50%;
    background:url(http://www.gielesdesign.nl/imgs/textures/texture-1.jpg);
    position:fixed;
    top:50px;
    left:50%;
    text-align:center;
}
4

4 回答 4

4

您还没有windowHeight定义也没有onscroll事件集

$(document).ready(function(){
   var bodyHeight = $("body").height()-$(window).height();
   window.onscroll = function() {

      //Determine the amount to rotate by.
      var deg = -window.scrollY*(360/bodyHeight);

      $(".logo").css({
        "transform": "rotate("+deg+"deg)",
      });

   };
});

正如 Blazemonger 所建议的那样，在页面结束时从身体高度中减去窗口高度以获得完整的旋转。

JSFiddle

于 2013-09-30T15:17:35.943 回答
0

我为您制作小提琴（带有可选缓存）

利用

$(window).scroll(function(){});
于 2013-09-30T15:12:49.387 回答
0

您需要将您的功能附加到$(document).scroll()，我也认为您想使用$(document)而不是$(window)获取页面高度。这是一个工作的jsfiddle

于 2013-09-30T15:14:02.250 回答
0

您的代码有一些问题。首先，您需要在使用$(window).on('scroll')事件滚动窗口时触发它。

其次，windowheight不是代码中的变量。我将其替换为$(window).height()，但后来决定实际上没有必要并完全删除该测试。

最后，我更新了你的.rotate参数。intialangle应该是元素的当前角度，通过调用.getRotateAngle()方法获得。终端角度（在 0 到 180 度之间）可以通过将当前值除以scrollTop整个文档的高度减去窗口高度来计算 - 然后将其乘以-180.

最终结果是一个徽标，当您向上和向下滚动页面时，它会平滑地旋转。

$(window).on('scroll', function () {
        $(".logo").rotate({
            duration: 1, /* why wait? No easing needed now, either */
            angle: $('.logo').getRotateAngle(),
            animateTo: -180 * $(window).scrollTop() / ($(document).height() - $(window).height())
        });
});

http://jsfiddle.net/mblase75/nqm2w/

于 2013-09-30T15:23:58.237 回答