Javascript 根据其他图像的位置将图像旋转90度

我正在尝试创建一个水平视差网站。我有一张id为椭圆的图像，可以从右到左在不同的位置滑动，比如说-

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>

$（文档）.ready（函数（）{
$（“#椭圆”）。位置（“34%”（函数（）{
$（“#条”）。旋转（{角度：90}）；
});
}); 

---

有人能帮我吗。我愿意使用javascript、jquery、css和php。

您需要使用视差库，或者定义随着视差动画的发展而触发的事件。例如，假设您的视差动画将由滚动位置控制：

// 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');
        }
    }
});

---

并将

animationPercentage

与每个值的键相匹配。但是我相信你可以自己试一试。

请回答-谢谢。请编写你的html、css代码。。。或者只是感谢你的回答，胡安。但是我不能让它工作，因为我对这个很陌生。您可以指定一些工作示例链接吗。你真是太好了。

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%"
};