滚动时为值设置动画

Posted

技术标签:

【中文标题】滚动时为值设置动画【英文标题】:Animate Values while scrolling 【发布时间】:2013-06-15 06:09:18 【问题描述】:

我正在开发一个简单的单页网站。您可以通过单击固定导航内的链接进行导航。这个固定导航应该像这里看到的那样工作:http://www.teehanlax.com/story/medium/

像 Tehann / Lax 一样(固定导航,仅在您向上滚动时显示并在您向下滚动时消失)我可能可以自己完成。但我想稍微修改一下这个例子,所以它就像在这个网站上看到的那样工作: http://nzopera.com/2013/don-giovanni

在此示例中,导航的工作方式与 Tehann / Lax 网站上的类似,但有所不同。它不仅会动画,还会出现/消失,还会对您的滚动做出反应。我认为最好看看我在这里写下的最后一页,以了解我的意图。我怎样才能达到这样的效果?我知道如何检测您是向上还是向下滚动,请参阅我当前的代码。但我完全不确定是否根据您的滚动位置制作动画。

提前感谢您的帮助。

请检查我对这篇文章的回答,我试图更详细地描述我需要什么。

编辑:这是我目前得到的,但这只是普通的 jQuery 动画

$(function()
    var
        scrollTop = 0,
        lastScrollTop = 0, 
        delta = 50;

    $(window).scroll(function(event)
        scrollTop = $(this).scrollTop();

        if(Math.abs(lastScrollTop - scrollTop) <= delta)
            return;

        if (scrollTop > lastScrollTop)
            if($(".header").hasClass("header--active")) $(".header").removeClass("header--active").animate( top : -84 );
         else 
            if(!$(".header").hasClass("header--active")) $(".header").addClass("header--active").animate( top : 0 );
        
        lastScrollTop = scrollTop;
    );
);

【问题讨论】:

prinzhorn.github.io/skrollr 谢谢,但是这个插件对我的例子有用吗?据我所见,您必须为滚动动画使用数据属性,但我需要在 JS 中动态地执行此操作:向下滑动导航(显示),向上滚动时......我基本上需要的是一个 JS 函数来制作动画值,因此类似于: function linearMovement(startValue, endValue, time/distance in px);因此,要在 200px 中将 CSS 值从 0 设置为 80,jQuery 代码看起来像 $("element").css("width", linearMovement(0, 80, 200));是否存在这样的事情,或者这可能与 jQuery / JS 有关吗? 【参考方案1】:

因为你已经标记了 jQuery,你可以在用户滚动的事件上显示文本

类似:

$(window).scroll(function(e)
  //do stuff here 
 ); 

如果您想让它出现在某个点,例如您链接的网站上的导航,只需创建一个标志,如下例所示:

$(window).scroll(function() 
var ypos = window.pageYOffset;
var scroll_pos = 200;             

if(ypos > scroll_pos) 
    //do stuff here

);

更多详情请看这里:http://api.jquery.com/scroll/

【讨论】:

我知道并且我知道如何检测您是向上还是向下滚动。我不想在滚动时显示文本,但我想在向上滚动和隐藏时显示固定导航,当我再次向下滚动时。只需在此页面nzopera.com/2013/don-giovanni 上向下滚动一点,然后向上滚动。您会注意到导航动画。这只是基本的东西,但我不确定如何使用固定导航创建该效果,您可以在上面的示例链接中看到。 谢谢,但我想我没有详细描述我需要什么。我试图在我对第一篇文章的回答中多解释一点。我正在寻找您在我的示例链接中看到的向上/向下滑动效果。它不只是 jQuery slideUp 和 SlideDown,而是对您的滚动做出反应。因此我需要一个函数来为值设置动画(参见我对第一篇文章的回答)。

以上是关于滚动时为值设置动画的主要内容,如果未能解决你的问题,请参考以下文章

UICollectionVIew:在滚动时为单元格设置动画

UICollectionVIew:在视图滚动时为单元格设置动画

javascript [在页面滚动上设置动画粘贴CTA]这将在滚动时为点击元素设置动画,并在用户点击时将其关闭。 #javascript #css #sitewre

javascript [在页面滚动上设置动画粘贴CTA]这将在滚动时为点击元素设置动画,并在用户点击时将其关闭。 #javascript #css #sitewre

到达 HTML 文件中的某个点时为数字和文本设置动画

如何动画调整滚动上较小的徽标图像?