我没有运气使用stellar.js。下面,我已经在HTML中包含了我试图以与我的网页其余部分不同的速度滚动的div,以便为其提供视差效果。 HTML之后也是stellar.js中涉及的CSS以及JavaScript和jQuery。
<div data-stellar-background-ratio="0.5" id="faq1">
<div class="container-fluid anchor" id="faq">
<div class="row">
<h1>FAQ</h1>
<h2 class="learn-more">Learn More</h2>
<div class="modal-button">
<!-- Large modal button -->
<button class="btn btn-primary" data-target=".bd-example-modal-lg" data-toggle="modal" type="button">Resume/CV</button> <!-- Large modal -->
<div aria-hidden="true" aria-labelledby="myLargeModalLabel" class="modal fade bd-example-modal-lg" data-keyboard="false" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Resume</h4>
</div>
<div class="modal-body">
<embed id="resume" src="pdf/resume.pdf">
</div>
</div>
</div>
</div>
</div>
</div>
接下来是所涉及代码的CSS。
#faq1 {
background-image: url("../img/question.jpg");
background-attachment: fixed;
color: black;
height: auto;
width: 100%;};
最后,链接到该页面的JavaScript文件包含我在整个页面中涉及的所有其他JavaScript,但包括:
$.stellar();
我一直在jquery.stellar.min.js使用https://github.com/markdalgleish/stellar.js中的代码。
我一直在阅读说明并使用各种配置来使代码正常工作但它不起作用。如果有人可以帮我这个或者让我知道如果我做错了,我会很感激。