我正在尝试创建一个水平视差网站。我有一个 ID 为 #ellipse
的图片,它在不同的位置从右向左滑动,比如 -
item.screenPos=["320%","220%","120%","34%","-80%","-180%","-280%","-380%"];
当此图像到达位置 34% 时,它在屏幕上可见。
我想要另一个带有 id #strip
的图像(不滑动并且固定在屏幕中心),在图像上方旋转 90 度(带有 id #ellipse
) 到达位置 34%。
目前我正在使用这个-
<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。
最佳答案
您需要使用视差库,或定义一个在视差动画前进时触发的事件。例如,假设您的视差动画将由滚动位置控制:
// 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
与每个值的键匹配。但我相信您可以自己尝试一下。
关于javascript - 根据其他图像的位置将图像旋转 90 度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24712826/