Using stellar.js for Parallax images

226 Views Asked by At

I'm not having any luck using stellar.js. Below, I've included in HTML the div that I'm trying to have scroll at a separate speed than the rest of my webpage to give it the Parallax effect. After the HTML is also the CSS and the JavaScript and jQuery involved in the stellar.js.

<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>

Next is the CSS for the code involved.

#faq1 {
background-image: url("../img/question.jpg");
background-attachment: fixed;
color: black;
height: auto;
width: 100%;};

Finally, the JavaScript file that's linked to the page contains all of my other JavaScript involved with the whole page, but includes:

$.stellar();

I've been using the code in jquery.stellar.min.js on the https://github.com/markdalgleish/stellar.js.

I've been reading the directions and using all sorts of configurations to get the code to work but it just isn't working. If somebody could help me with this or let me know if I'm doing it completely wrong, I would appreciate it.

0

There are 0 best solutions below