如何在航点功能内的滚动上设置动画? [英] How do I animate on scroll inside a waypoint function?

问题描述

当用户向下滚动时，我的图像出现在屏幕的左侧和右侧.

I have images that appear from the left and right of the screen as the user scrolls down.

使用divPosition = $('div').offset().top;获取包含元素的位置，我从scrollValue = $(document).scrollTop();中减去该值，并将该值应用于绝对定位的图像上的左侧位置.

Using divPosition = $('div').offset().top; to get the position of the containing element I subtract the value from scrollValue = $(document).scrollTop(); and apply the value to position left on an absolutely positioned image.

包含div的偏移量是在刷新和调整大小时计算的.在不调整窗口大小的情况下，x=scrollValue - divPosition随刷新时间的变化而变化，具体取决于页面滚动的距离.我希望它是一致的.是否有更好的方法来使这种类型的动画正常工作.

The offset of the containing div is calculated on refresh and resize. Without resizing the window the x=scrollValue - divPosition varies on refresh depending how far the page is scrolled. I want it to be consistent. Is there a better way of getting this type of animation to work.

例如，是否可以使用垂直滚动作为带有航路点的x值来触发动画?

For example is it possible to trigger the animation using the vertical scroll as the x value with waypoints?

    window.onresize=function(){
        divPosition = $('div').offset().top;
    };

    $(document).scroll(function(){
        scrollValue = $(document).scrollTop();
        x = scrollValue - divPosition;
    }

这是该网站的链接.当我发现问题的原因时，我将在此问题中发布代码的相关部分.

Here is a link to the site. As an when I discover the cause of the problems I will post the relevant section of code in this question.

http://www.otherdewi.com/gg.html

推荐答案

最终解决了问题.

1. 清理了我的代码，添加了clearfix，以确保每个部分的高度都在正确报告.

2. 包装在Waypoint中滚动显示的动画功能

1. Cleaned up my code adding clearfix to ensure the height of each section was reporting correctly.

2. Wrapped the funcitons animated on scroll inside Waypoint

$('#about').waypoint(function(direction){
    $(document).scroll(function(){...});
});

我添加了window.onresize函数来重新计算相关容器上的位置，以说明内容的回流.

I added a window.onresize function to recalculate the position on the relevant container to account for the reflow of content.

window.onresize = function(){
    tourPosition=$tours.offset().top;
    winH = window.innerHeight;
};

要获得一个值，以在滚动时从左右移动一个元素.我计算过 文档的滚动位置+窗口高度-包含元素的位置.

To get a value to animate an elements from the left and right on scroll. I calculated scrollposition of the document + window height - position of the containing element.

scrollPos = $(this).scrollTop();
var posX = scrollPos - tourPosition + winH;

然后在posX中添加了一个偏移量.

An offset was then added posX.

$('pic1').css({'left':posX-600});

$('pic2').css({'right':posX-800}); $('pic3').css({'left':posX-1200});

$('pic2').css({'right':posX-800}); $('pic3').css({'left':posX-1200});

这篇关于如何在航点功能内的滚动上设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！