我已经实现了 n 个视差滚动效果,并且在没有 n 个框架或插件的情况下实现了灵 active 。
我的代码真的很简单,我只需检查我在哪个部分,然后让背景变慢。但为什么这这么糟糕,因为如果我快速滚动它看起来很糟糕并且四处乱逛......
图片已加载。
这是我页面底部的实时示例。
我的代码示例:
$( window ).scroll(function() {
var schonGescrollt = $(window).scrollTop();
//Wich Section
if(schonGescrollt>=0){
//The Background slow Scroll
var scrollLangsam = schonGescrollt*0.4;
//The White Boxes wich scroll normal
var scrollNormal = schonGescrollt*0.6;
$('#PARALLAX_bild1').css('margin-top', scrollLangsam);
//The Picture scroll a little bit with the White box until the Picture is visbible
if(schonGescrollt<=(heightProzent*125)){
$('#PARALLAX_infoBox1').css('margin-top', -scrollNormal);
if(scrollNormal<=(heightProzent*27)){
$('#PARALLAX_bild2').css('margin-top', -scrollNormal);
}
}
}
最佳答案
- 除 Mozilla Firefox 外,所有浏览器都无法流畅滚动。这是使用视差时的一个常见缺陷。
- 优化您的图片会有很大帮助。他们需要几个小时才能加载,而且他们的质量比需要的要高得多。 (我的意思是谁在使用 4.950px × 3.300px 的屏幕,即使是全高清,它们也太大了。)
关于jquery - 视差滚动更平滑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23384999/