视差滚动更平滑答案

【问题标题】：Parallax Scrolling smoother视差滚动更平滑
【发布时间】：2014-04-30 09:55:05
【问题描述】：

我已经实现了 n 视差滚动效果，并且在没有框架或插件的情况下做到了灵活。

我的代码真的很简单，我只需检查我所在的部分，然后让背景变慢。但是为什么这会这么糟糕，因为如果我滚动到快它看起来很糟糕并且跌跌撞撞......

图片已加载。

这是我页面底部的实时示例。

我的代码示例：

$( 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);
        }

    }
}

【问题讨论】：

因为鼠标在窗口跳转像素块上滚动，所以图像每次都需要读取新的跳转。

标签： jquery html css parallax

【解决方案1】：

除了 Mozilla Firefox 之外，所有浏览器都不能流畅地滚动。这是使用 Parallax 时的常见缺陷。
优化图片会有很大帮助。他们需要几个小时才能加载，而且他们的质量比需要的要高得多。（我的意思是谁在使用 4.950px × 3.300px 的屏幕，即使是全高清，它们也会很大。）

【讨论】：