jquery - 视差滚动更平滑

标签 jquery html css parallax

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

我的代码真的很简单,我只需检查我在哪个部分,然后让背景变慢。但为什么这这么糟糕,因为如果我快速滚动它看起来很糟糕并且四处乱逛......

图片已加载。

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

http://ingroups.de/home.php

我的代码示例:

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

    }
}

最佳答案

  1. 除 Mozilla Firefox 外,所有浏览器都无法流畅滚动。这是使用视差时的一个常见缺陷。
  2. 优化您的图片会有很大帮助。他们需要几个小时才能加载,而且他们的质量比需要的要高得多。 (我的意思是谁在使用 4.950px × 3.300px 的屏幕,即使是全高清,它们也太大了。)

关于jquery - 视差滚动更平滑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23384999/

相关文章:

javascript - Bootstrap 模态未正确关闭(模态中的模态)

jquery - 如何在页面加载时显示 jquery 弹出窗口?

javascript - jQuery 迭代另一个元素中的元素

html - 在悬停时将文本颜色转换为 bg 的颜色

javascript - 如何让 AJAX 在 div 顶部加载页面

javascript - 如何在单击按钮时更改背景图像?

html - 并排、居中和响应式制作两个 vimeo 视频

css - Bootstrap 导航栏固定在右侧

html - 滚动到达特定点时进行 Angular 检测

html - 具有不同高度列的 Bootstrap 网格