根据另一张图片的位置将图像旋转90度

Question

我正在尝试创建一个水平视差网站。我有一个带有id #ellipse 的图像，它从右侧滑动到左侧的不同位置，例如 -

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

当图像到达34%的位置时，它在屏幕上可见。

当具有id为#ellipse的图像到达34%位置时，我希望另一张图像（具有id为#strip，不滑动且固定在屏幕中心）旋转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。

- Gaurav Manral

---

请创建一个 http://www.jsfiddle.net - 谢谢。 - redditor

请编写您的HTML、CSS代码...或者只需使用jsfiddle。 - Prashant Tapase

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与每个值的关键字匹配。但我相信你可以自己尝试。

- Juank

---

感谢你的回答，Juank。但是我做不到，因为我很新手。你能否提供一些可行的示例链接？如果可以的话，那就太好了。 - Gaurav Manral