将stellar.js用于视差图像

时间:2018-01-01 22:01:52

标签: javascript html css parallax stellar.js

我没有运气使用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">&times;</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中的代码。

我一直在阅读说明并使用各种配置来使代码正常工作但它不起作用。如果有人可以帮我这个或者让我知道如果我做错了,我会很感激。

0 个答案:

没有答案