Stellar.js背景不滚动

Stellar.js background not scrolling

本文关键字：滚动 背景 js Stellar      更新时间：2023-09-26

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

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

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

我做错了什么？

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

2。如果路径正确，请检查页面加载时是否运行了恒星的初始化，或者是否为正确的元素提供了"数据恒星背景比率"属性。如果你给数据恒星背景比"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>

在调整浏览器窗口大小之前，我的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');
}]);
相关文章：