Fatal编程技术网
  • javascript/
  • Javascript 实现简单视差：图像；“神经质”；在Firefox和Safari中

Javascript 实现简单视差：图像；“神经质”；在Firefox和Safari中

javascript html css

Javascript 实现简单视差：图像；“神经质”；在Firefox和Safari中,javascript,html,css,parallax,Javascript,Html,Css,Parallax,我有以下用例： 两个中间有图像的内容元素 图像应始终作为一个整体显示（与背景大小-属性的包含-值相关） 此行为在所有视口上都应相同，从而使图像按比例缩放（但始终完全可见） 滚动时，每个图像都应该正常滚动到顶部 一旦图像到达顶部，就会产生视差效果 您可以在这里看到我的实现： 它在Chrome上运行得非常好，滚动和视差看起来非常平滑。但是，当我在Firefox或Safari中测试页面时，图像表现为“跳跃”/“急促”（不确定这里的单词是什么；） 我不确定这是Firefox/Safari的问题，还是我

我有以下用例：

  • 两个中间有图像的内容元素
  • 图像应始终作为一个整体显示（与
    背景大小
    -属性的
    包含
    -值相关）
  • 此行为在所有视口上都应相同，从而使图像按比例缩放（但始终完全可见）
  • 滚动时，每个图像都应该正常滚动到顶部
  • 一旦图像到达顶部，就会产生视差效果
    • 您可以在这里看到我的实现：

    它在Chrome上运行得非常好，滚动和视差看起来非常平滑。但是，当我在Firefox或Safari中测试页面时，图像表现为“跳跃”/“急促”（不确定这里的单词是什么；）

    我不确定这是Firefox/Safari的问题，还是我的实现有问题，Chrome只是在内部弥补

    也许有人能给我指出正确的方向。：）

    您好，
    AvantiC

    与其设置每一帧的图像位置，不如尝试更改CSS，以便在用户滚动超过某一点时图像保持静止。

    嘿，想详细说明一下吗？我不知道如何在
    位置之外完成此操作：fixed
    …但这意味着将元素从文档流中删除，这将导致计算（无论它们是否在特定点上）从此点开始出错。@AvantiC基本上，当用户滚动到元素时，更改任何必要的CSS属性以获得相同的效果。使用z-index会有所帮助。