Stellar.js不工作

Question

我试图使用Stellar.js创建一个包含两个图像标记元素的简单视差，但它不起作用。我试过几种不同的配置。我现在拥有的实际上是Stellar.js创建者自己的教程脚本的副本粘贴(应用于我自己的html和css元素)。

我定义了以像素为单位的图像大小，将它们设置为绝对和相对位置，添加了数据-恒星背景比属性，声明了jQuery的所有脚本，并且到处寻找解决方案，但没有任何效果。我是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
});

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

我知道有很多事情我可以与Stellar.js进行切换，但我的理解是，对于一个简单的效果来说，这是我所需要的。

我在这里错过了什么？

Answer 1

看起来，您希望在图像标记上使用属性data-stellar-ratio而不是data-stellar-background-ratio。

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

示例: div {背景图像:url(“/img/croes.png”)；}

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

为了使重点更清楚，您可以将这两个属性应用于任何具有背景图像的元素，以创建一些额外的酷效果。

一般来说，图像将只与data-stellar-ratio标记一起使用。这方面的一个实际例外是，如果您要将这两个属性应用于半透明图像，并在其下面显示自己的辅助背景图像。