当前位置: 首页 > 面试题库 >

带有滚动的Jquery / Javascript不透明度动画

梅玉堂
2023-03-14
问题内容

我已经实现了[waypoints][1]插件,当对象的像素高于100px时,该对象就会褪色。[使用offet属性],但希望基本上控制对象的不透明度并使动画可见,如上面的示例

我已经搜寻了全部-这是我的最后选择。任何帮助是极大的赞赏。


问题答案:

我在这里复制粘贴基本代码

    var fadeStart=100 // 100px scroll or less will equiv to 1 opacity
    ,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity
    ,fading = $('#fading')
;

$(window).bind('scroll', function(){
    var offset = $(document).scrollTop()
        ,opacity=0
    ;
    if( offset<=fadeStart ){
        opacity=1;
    }else if( offset<=fadeUntil ){
        opacity=1-offset/fadeUntil;
    }
    fading.css('opacity',opacity).html(opacity);
});


 类似资料:
  • 问题内容: CSS3动画出现问题。 仅当我删除的更改时,此代码才有效。 我想在悬停后立即更改显示,但不透明度应使用过渡进行更改。 问题答案: 我改变了一点,但结果很漂亮。 谢谢大家

  • 问题内容: 我有这个HTML结构: 我想在主体部分(#body)中包含三个部分而不会溢出。因此,我需要在中间部分使用滚动条。 我尝试了这个CSS: 和这个: 但是它们都不起作用。 我在JSFiddle上做了一个例子。 我可以仅使用CSS和HTML来做到这一点吗?我宁愿避免使用Javascript。 问题答案: Flexbox是一种现代替代方案,可让您无需固定高度或JavaScript即可执行此操作

  • 问题内容: 我使用一个名为custom.css的辅助填充来覆盖引导程序代码,我想知道如何创建仅在网站访问者不在页面顶部时才激活的代码。 到目前为止,我使用引导程序提供的默认代码创建了一个透明的导航栏。我唯一要做的就是将其设置为执行:`background-color: 当我在页面顶部时,导航栏是透明的,但是当我向下滚动时,它变得不透明。 问题答案: 好的,您需要以下代码来实现此效果:(我将使用jQ

  • 我使用了一个名为custom的辅助填充。css覆盖引导代码,我想知道如何创建一个只有当我的网站的访问者不在页面顶部时才激活的代码。 到目前为止,我使用bootstrap提供的默认代码创建了一个透明的导航栏。我唯一要做的就是将其设置为在访问者向下滚动时执行:。 例子:https://www.lyft.com/ 当我在页面顶部时,导航栏是透明的,但当我向下滚动时,它会变得不透明。

  • 本文向大家介绍flutter FadeTransition实现透明度渐变动画,包括了flutter FadeTransition实现透明度渐变动画的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了flutter实现透明度渐变动画的具体代码,供大家参考,具体内容如下 flutter 动画状态监听器 AnimationController AnimationController 的常用操作