Question

问题如下：背景在滚动时不会缓慢浮动，它们只是平滑地相互改变，但是没有像我在几个演示中看到的那样“深度效应”。

我通常会遵循这个例子 http://www.youtube.com/watch?v=NUsEGbSbMZ4。所以他所拥有的是一种带有文字的纯白色面板，它可以在方向盘图像上移动，但是车轮图像会略微移动。这正是我无法达到的目标。

有没有解决方案？

的index.php

<div class="slide" id="slide1" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
            </div>
            <div class="col-md-6"><h1></h1></div>
        </div>
    </div>
    <a class="button" href="" title=""></a>
</div>

custom.css

.slide {
    background-attachment: fixed;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    position: relative;
}
#slide1 {
    background-image: url(../img/slide1/green-grapes.jpg);
    background-size: cover;
}
#slide2 {
    background-image: url(../img/slide2/indian-market.jpg);
    background-size: cover;
}
#slide3 {
    background-image: url(../img/slide3/floating-market.jpg);
    background-size: cover;
}

main.js

$(function() {
    $.stellar({
        verticalScrolling: true,
        parallaxBackgrounds: true,
        responsive: true,
        scrollProperty: 'scroll',
        positionProperty: 'position'
    }).stellar('refresh');
});

Answer 1

好的，我想通过在关闭 body 标记之前通过放置以下脚本来初始化Stellar.js：

<script>
    $.stellar();
</script>

有人可以解释一下为什么main.js文件中的初始化（它在index.php底部链接）不起作用？

Stellar.js背景不在滚动上移动

1 个答案: