根據其他圖像的位置將圖像旋轉90度

Question

我試圖創建一個水平視差網站。我有一個ID #ellipse上不同位置滑動從右到左的圖像，說 -

item.screenPos=["320%","220%","120%","34%","-80%","-180%","-280%","-380%"]; 

當此圖像到達的位置34％，這是在屏幕上可見。

我想要另一張id爲#strip（不滑動並固定在屏幕中央）的圖像，當上面的圖像（ID爲#ellipse）達到位置34％時旋轉90度。

我目前使用此 -

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#ellipse").position("34%")(function(){ 
    $("#strip").rotate({angle:90}); 
    }); 
}); 
</script> 

任何人能幫助我。我打開使用javascript，jquery，css & php。

Answer 1

您需要使用庫來獲得視差，或者定義視差動畫前進時觸發的事件。例如，讓我們說你的視差動畫將通過滾動條的位置進行控制：

// catch the event that triggers the animation 
// this could be a mouse position, a accelerometer angle, etc 
$(window).scroll(function(){ 
    var currentScrollPosition = $(document).scrollTop(), 
    // lets say your scroll animation should happen in the first 
    // 300px of scroll, therefore 0px = first frame of anim 
    // 300px = last frame of anim 
     animationPercentage = currentScrollPosition/300; // 0 to 1 

    // only animate if in range 
    if (animationPercentage <= 1){ 
     // now you can control stuff based on the percentage of the animation 

     //    position = start pos + delta * % 
     $('#ellipse').css('left', (-380 + (320 + 380) * animationPercentage); 

     // rotate as a function of animationPercentage 
     // let's say that #ellipse is visible at 50% of the animation 
     if (animationPercentage >= 0.5){ 
      $('#strip').css('-webkit-transform', 'rotate(90deg)'); // or 
      $('#strip').addClass('rotate'); 
     } 
    } 
}); 

如果現在的位置是不成正比的動畫事件，你可以做這樣的事情：

item.screenPos={ 
    "0.9":"320%", // position at 90% of animation 
    "0.85":"220%", // position at 85% of animation 
    "0.71":"120%", //... you get the point 
    "0.5":"34%", 
    "0.48":"-80%", 
    "0.2":"-180%", 
    "0.15":"-280%", 
    "0":"-380%" 
}; 

和匹配animationPercentage爲每個值的關鍵。但是，我相信你可以靠自己的努力。