是的,视差效果可以在 Github 页面上使用。
您可能只是犯了一些编码错误/错误。
遵循的规则
1. </body></html>之后不能放任何东西
我看到的第一个错误是</body></html> 后面不能放任何东西。您的 layout file 包含以下内容:
</body>
</html>
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
应该是:
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
</body></html>
2。仅打开和关闭主体一次
您将内容嵌入到布局中。您的布局有一个正文打开和一个正文关闭标签......但是,您的内容也有一个正文打开和一个正文关闭标签。因此,您打开和关闭 HTML 文件的正文两次。在您的内容文件中删除它并设置好。在此文件中找到<body id="page-top"> 和</body> 和this file 并删除它们。
3.为(复杂的)HTML 和 JS 使用布局
第 184 行的代码 < 150 被错误地转义。这可能是因为您在 Markdown 文件中编写复杂的 HTML 和 JS。您可以通过在布局目录中的文件“home.html”中组合来自“index.md”和“default.html”的 HTML 来防止这种情况。然后,您的 index.md 文件应将“home”作为布局而不是“default”。这是错误:
SyntaxError: missing ) after conditionLazPap:184:34
4.仅在声明函数后调用函数
我知道当你使用 'defer' 时它会变得有点难以掌握,但经验法则是只有在你声明了一个函数之后才调用它。视差是在default.html 的第 71 行声明的函数:
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
但是您在第 38 行的同一文件的内容部分中调用了该函数。这不起作用,如果它起作用,那完全是由于 'defer' 语句。
5.使用基本网址
当您在 Github Pages 上托管时,您需要一个 basurl。对您的图像的引用是/images/HTML_5.png。因为你托管在 Github 页面上,所以你的 baseurl 应该是 /LazPap,所以你的 url 变成了 /LazPap/images/HTML_5.png。 More reading about baseurl...
更简单的解决方案...
您从以下代码的副本开始:https://blackrockdigital.github.io/startbootstrap-creative/。实现类似视差效果的最简单方法是在原始代码中添加 JUST ONE CSS 规则:
header.masthead {background-attachment: fixed;}
虽然这是我会使用的解决方案,但它可能不是您想要的,因为您特别提到了视差和 javascript 解决方案。