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).on('scroll')イベントを使用してウィンドウがスクロールされるたびにトリガーする必要があります。

第二に、windowheightコード内の変数ではありません。に置き換えましたが$(window).height()、実際には必要ないと判断し、そのテストを完全に削除しました。

最後に、.rotateパラメータを更新しました。初期値は、メソッドangleを呼び出して取得した要素の現在の角度である必要があります。.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 に答える