我试图实现一个“crt样”滚动小故障效果使用Javascript和CSS。我提出了下面的代码,它克隆内容并应用clip使其看起来像滚动,同时添加随机的水平偏移量。
function scanglitch() {
var e = $('#wrapper').clone().appendTo('#glitchcontainer');
var i = 0;
e.css({"clip": "rect(" + i + "px,3830px," + (i + 15) + "px,0px)"
我看到了一个类似的帖子,但我不能问它的后续问题。我不仅想要模拟橡皮筋效果,而且还可以滚动所有内容,即使内容比它的父内容大。我弄不明白,所以我想在这里寻求帮助。
我设置了一个jsfiddle:
enter code here
我希望它可以向下滚动到文本的底部,并有橡皮筋效果作为文本内容结束。正如您在我的jsfiddle示例中看到的,您不能像最后一个文本节点那样向下滚动到30以上。
耽误您时间,实在对不起!
我制作了一个包装,我在上制作了和苹果一样的动画效果。这基本上是一个视频,当我滚动视频播放一点一点。视频的位置是固定的,所以文本很好地滚动在它上面。但是,只有在特定划分的偏移量(文本显示)之间,文本才是可见的。
那部分运作得很好。现在我希望当用户滚动到视频的末尾,这样动画就完成了,视频效果包装器从一个固定的位置转到一个相对的位置。因此,该网站将滚动它的内容后,通常视频动画。
这就是我已经尝试过的一个例子:
//If video-animation ended: Make position of video-wrapper relative to continue scrolli