當用戶上下滾動屏幕時旋轉圖像

Question

我對用 html、css 和 javascript 編寫代碼還很陌生。 我離題了； 當用戶在屏幕上上下滾動時，我試圖讓齒輪的圖像旋轉（我希望在添加皮帶時給它一個電梯效果）。 我正在使用 jquery $(window).scroll(function()。我知道它正在工作，因為當我使用 console.log("hi") 時，它會在我每次滾動時寫入。我的問題是 .animate() 函數似乎不起作用。我什至嘗試下載“ http://jqueryrotate.com/ ”並使用它來旋轉。任何幫助將不勝感激！

    ## HTML ##
    <div class="left_pulley">
    <img src="gear2.png" />
    </div>

    <div class="right_pulley">
    <img src="gear2.png" />
    </div>

    ## CSS ##
.left_pulley
{
  position: absolute;

  margin: 0;
  padding: 0;

  top: 263px;
  left: 87%;

  height: 35px;
  width: 35px;
}

.left_pulley img
{
  width: 100%;
}

.right_pulley
{
  position: absolute;

  margin: 0;
  padding: 0;

  top: 263px;
  left: 94.2%;

  height: 35px;
  width: 35px;
}

.right_pulley img
      {
        width: 100%;
        }

 ## JS ##

首先使用 .rotate({})

$(".left_pulley").rotate({bind:
  $(window).scroll(function() {
      if ($(this).scrollTop() > 0) {
        $(.left_pulley).rotate({
          angle: 0,
          animateTo: 180,
          })
      })
    })
  })

現在使用 .animate({}) 嘗試移動它。

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        var scott = $('img');
        scott.animate({
          left: 180
        }
    }
});

 $(window).scroll(function() { if ($(this).scrollTop() > 0) { var scott = $('img'); scott.animate({ left: 180 } function() { console.log("hi"); } }); console.log("hi2"); } });

 .left_pulley { position: absolute; margin: 0; padding: 0; top: 263px; left: 87%; height: 35px; width: 35px; } .left_pulley img { width: 100%; } .right_pulley { position: absolute; margin: 0; padding: 0; top: 263px; left: 94.2%; height: 35px; width: 35px; } .right_pulley img { width: 100%; }

 <div class="left_pulley"> <img src="gear2.png" /> </div> <div class="right_pulley"> <img src="gear2.png" /> </div>

[

我想旋轉的齒輪圖片。

] 1

Answer 1

您應該查看 CSS3 變換屬性，更具體地說是 rotate() 函數。 這里

添加轉換屬性以在旋轉值之間創建動畫“補間”也將是有益的。 在這里。 確保將此過渡添加到過渡屬性（因為這是設置旋轉的位置）。\\

然后，您可以使用 jquery 通過設置 transition 屬性的 css 值來更改齒輪的旋轉（使用自動動畫！），例如：

#gear{

transition: transform 300ms;
transform: rotate(7deg);
transform-origin:90% 90%;

position:absolute;
left:100px;
top:100px;
font-size:10rem;
width:100px;
height:100px;

}

你可以通過點擊運行來測試它。

https://jsfiddle.net/oc4hhons/

Answer 2

JS Fiddle -更新，現在它們一起旋轉相同的方向，但旋轉取決於滾動是向上還是向下：

JS：

var $gears = $('.gear'),
    $i = 0,
    $scrollBefore = 0;
$(window).scroll(function () {
    if($(this).scrollTop() > $scrollBefore){
        $scrollBefore = $(this).scrollTop();
        $gears.css("transform", "rotate(" + ($i+=4) + "deg)");
    }else if($(this).scrollTop() < $scrollBefore){
       $scrollBefore = $(this).scrollTop();
        $gears.css("transform", "rotate(" + ($i-=4) + "deg)"); 
    }
});

---

這個JS Fiddle 2 ，使它們以相反的方向旋轉，並且每個齒輪方向根據滾動是向上還是向下切換：

JS：

var $gearLeft = $('.left_pulley'),
  $gearRight = $('.right_pulley'),
  $i = 0,
  $j = 0,
  $scrollBefore = 0;
$(window).scroll(function() {
  if ($(this).scrollTop() > $scrollBefore) {
    $scrollBefore = $(this).scrollTop();
    $gearLeft.css("transform", "rotate(" + ($i += 4) + "deg)");
    $gearRight.css("transform", "rotate(" + ($j -= 4) + "deg)");
  } else if ($(this).scrollTop() < $scrollBefore) {
    $scrollBefore = $(this).scrollTop();
    $gearLeft.css("transform", "rotate(" + ($i -= 4) + "deg)");
    $gearRight.css("transform", "rotate(" + ($j += 4) + "deg)");
  }
});

Answer 3

大量借用https://stackoverflow.com/a/17348698/2026508

你可以這樣做：

 var degrees = 0; var prevScroll = 0; $(window).scroll(function() { if ($(window).scrollTop() > 0) { if (prevScroll > $(window).scrollTop()) { $('.woo').css({ '-webkit-transform': 'rotate(' + degrees+++'deg)', '-moz-transform': 'rotate(' + degrees+++'deg)', '-ms-transform': 'rotate(' + degrees+++'deg)', 'transform': 'rotate(' + degrees+++'deg)' }); console.log('prevScroll greater:', prevScroll) } else if (prevScroll < $(window).scrollTop()) { $('.woo').css({ '-webkit-transform': 'rotate(' + degrees--+'deg)', '-moz-transform': 'rotate(' + degrees--+'deg)', '-ms-transform': 'rotate(' + degrees--+'deg)', 'transform': 'rotate(' + degrees--+'deg)' }); console.log('prevScroll less:', prevScroll) } prevScroll = $(window).scrollTop() } })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="height: 40px; width: 100px;background-image: url(' gear2.png ');background-color:blue;" class="woo">turn</div>

Answer 4

謝謝各位的幫助！

只是想發布我的最終代碼，以防其他人將來需要幫助。

 /* Scott Louzon 11/24/15 This code is used to rotate two images of a gears when user scrolls */ /*This function see's when user scrolls then calls rotate_right & rotate_left accordingly */ var scroll_at = 0; //variable to keep track of //scroll postion $(window).scroll(function() { if ($(this).scrollTop() > 0) //if scroll postion is not at { //top do this if ($(this).scrollTop() > scroll_at) //if scroll postion is > than b4 { rotate_down(); } else if ($(this).scrollTop() < scroll_at) //if scroll postion is < than b4 { rotate_up(); } scroll_at = $(this).scrollTop(); //set varible to were scroll //postion is at now } }) //Both these functions call css to rotate the image of a gear var rotation = 0; function rotate_down() { rotation+= 8; $(".left_pulley").css("transform","rotate("+ rotation +"deg)"); $(".right_pulley").css("transform","rotate("+ (-1 * rotation) +"deg)"); } function rotate_up() { rotation += 8; $(".left_pulley").css("transform","rotate("+ (-1 * rotation)+"deg)"); $(".right_pulley").css("transform","rotate("+ rotation +"deg)"); }

 .left_pulley { position: absolute; margin: 0; padding: 0; /*Used for gear rotation */ transition: transform 1ms; transform-origin:50% 50%; top: 263px; left: 87%; height: 35px; width: 35px; } .left_pulley img { width: 100%; } .right_pulley { position: absolute; margin: 0; padding: 0; /* Used for gear rotation */ transition: transform 1ms; transform-origin:50% 50%; top: 263px; left: 94.2%; height: 35px; width: 35px; } .right_pulley img { width: 100%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="left_pulley"> <img src="gear2.png" /> </div> <div class="right_pulley"> <img src="gear2.png" /> </div>