Question

我已经实现了n Parallax Scrolling效果，并且没有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);
        }

    }
}

Answer 1

除了Mozilla Firefox，所有浏览器都不能顺利滚动。这是使用Parallax时的常见缺陷。
优化图片会有很大帮助。它需要花费数小时才能加载，并且它们具有更高的质量。（我的意思是谁使用的是4.950px×3.300px的屏幕，即使是全高清屏幕也会很大。）

视差滚动更平滑

1 个答案: