[英]Rotate image by 90 degree depending on the position of other image
I am trying to create a horizontal parallax website. 我正在尝试创建一个水平视差网站。 I have an image with id
#ellipse
that slides on different positions from right to left, say - 我有一个id为
#ellipse
的图片,从右到左滑动不同的位置,比如说 -
item.screenPos=["320%","220%","120%","34%","-80%","-180%","-280%","-380%"];
When this image reaches to the position 34%, it is visible on the screen. 当此图像到达34%的位置时,它在屏幕上可见。
I want another image with id #strip
(which is not sliding and is fixed at the center of the screen), to rotate by 90 degree when above image (with id #ellipse
) reaches at position 34%. 我想要另一个id为
#strip
图像(不滑动并固定在屏幕中央),当上面的图像(id为#ellipse
)到达34%位置时旋转90度。
Currently i'm using this - 目前我正在使用这个 -
<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>
Can anybody help me out. 任何人都可以帮助我。 I am open to use javascript, jquery, css & php.
我愿意使用javascript,jquery,css和php。
You need to use a library for parallax, or define an event that is fired as the parallax animation advances. 您需要使用库来进行视差,或者定义在视差动画前进时触发的事件。 For example, lets say your parallax animation will be controlled by the scroll position:
例如,假设您的视差动画将由滚动位置控制:
// 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');
}
}
});
Now if the position is not proportional to the animation event you could do something like this: 现在,如果位置与动画事件不成比例,您可以执行以下操作:
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%"
};
And match the animationPercentage
to the key of each value. 并将
animationPercentage
与每个值的键相匹配。 But that I believe you can give it a shot on your own. 但我相信你可以自己试一试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.