Question

我正在尝试使用Stellar.js脚本来应用视差效果。

以下是Mark Dalgleish网站的官方示例 http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html

即使我从示例中复制并粘贴源代码，它们也不会对每个图像产生轻微的滚动效果，而是显示在固定位置。

我做错了什么？

Answer 1

1。如果甚至Demo代码都不起作用，请检查是否正确地给出了jquery或stellar.js路径。如果您有任何错误，可以在浏览器控制台中进行检查。如果控制台无法加载资源，控制台将打印它。

2。如果路径正确，请检查您是否运行了恒星的初始化，加载页面时，或者您是否提供了＆＃34; data-stellar-background-ratio＆＃34;正确元素的属性。如果你给＆＃39; 0＆＃39; 0对于数据 - 恒星背景比率，它不会滚动。请注意，它也不会在移动设备上工作。

3。如果您检查了上面的所有内容，但仍然无法正常工作，请尝试在元素的末尾插入脚本。有时它有帮助。像这样：

   <html>
    <head>
    <!-- Title, CSS, and other stuff -->
    </head>
    <body>
    <!-- Content here with right stellar attributes -- >
    ...

    <!-- At the end of body load the scripts, and run initialisation -->
       <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
       <script src="YOUR_PATH_TO_STELLAR/jquery.stellar.min.js" type="text/javascript"></script>

       <script type="text/javascript">
        $(window).stellar({
        scrollProperty: 'scroll',
        horizontalScrolling: false,
        positionProperty: 'position'
       });
       </script>

   </body>
   </html>

Answer 2

我的情况是stellar.js视差滚动不会初始化，直到我的浏览器窗口调整大小。我发现$.stellar('refresh');似乎解决了这个问题。（使用AngularJS）

angular.module('ForeverLeather').controller('HomeCtrl', ['$scope', function($scope) {

  $(window).stellar({
    horizontalScrolling: false,
    verticalOffset: 0,
    horizontalOffset: 0,
    responsive: true,
  }).stellar('refresh');

}]);

Stellar.js背景不滚动

2 个答案: