javascript - Stellar.js 不工作

Question

我正在尝试使用 Stellar.js 创建一个带有两个图像标签元素的简单视差，但它不起作用。我尝试了一些不同的配置。我现在拥有的实际上是 Stellar.js 创建者自己的教程脚本的复制粘贴(应用于我自己的 html 和 css 元素)。

我已经定义了以像素为单位的图像大小，将它们设置为绝对和相对定位，添加了 data-stellar-background-ratio 属性，声明了 jQuery 和 Stellar 的所有脚本，并到处寻找解决方案，但没有任何效果.我是 jQuery 的新手，但从我能找到的每个教程中，我都明白这应该很简单，但它拒绝做任何事情。这非常令人沮丧。

有人可以告诉我我做错了什么吗？我复制了以下代码片段:

<img src="images/header_Splash.png" width="886" height="478" alt="" id="headerSplash" data-stellar-background-ratio="1.25"/>

这是我尝试应用视差效果的图像之一。

 </footer>

    <script src="jquery.min.js"></script>
    <script src="jquery.stellar.min.js"></script>
    <script src="script.pre.js"></script>

这些是我的 html 底部的脚本链接，就在 </html> 之前.

$(function(){
$.stellar({
    horizontalScrolling: false,
    verticalOffset: 200
});

这是我从 Stellar.js 教程站点代码 http://markdalgleish.com/examples/mobileparallax/index.pre.html 复制的 script.pre.js 文件

我知道我可以使用 Stellar.js 切换很多东西，但我的理解是，对于一个简单的效果，这就是所需要的。

我在这里错过了什么？

Answer 1

看起来您想使用属性 data-stellar-ratio 而不是 data-stellar-background-ratio 在您的图片标签上。

data-stellar-background-ratio 应用于将背景图像样式应用于元素(例如 div)的元素。

例子: 分区{ 背景图像:url(“/img/circles.png”)；

在这种情况下，图像应被视为要滚动的元素，而不是背景图像。

要说明这一点，您可以将这两个属性应用于具有背景图像的任何 元素，以创建一些额外的炫酷效果。

一般来说，图像只会与 data-stellar-ratio 标签一起使用。一个实际的异常(exception)情况是，如果您要将这两个属性应用到一个半透明图像，其下方有自己的辅助背景图像。