materialize-css/jade/page-contents/parallax_content.html

Builds Materialize distribution packages

<div class="container">
  <div class="row">

    <div class="col s12 m9 l10">

      <!--  Parallax Section  -->
      <div id="introduction" class="scrollspy section">
        <h4>Introduction</h4>
        <p class="caption">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling. Check out the demo to get a better idea of it.</p>
        <a href="parallax-demo.html" target="_blank" class="btn-large waves-effect waves-light">Open Demo</a>
      </div>



      <div id="structure" class="scrollspy section">
        <h4>Parallax HTML Structure</h4>
        <pre><code class="language-markup">
    &lt;div class="parallax-container">
      &lt;div class="parallax">&lt;img src="images/parallax1.jpg">&lt;/div>
    &lt;/div>
        </code></pre>
      </div>



      <div id="initialization" class="scrollspy section">
        <h4>Initialization</h4>
        <pre><code class="language-javascript">
    $(document).ready(function(){
      $('.parallax').parallax();
    });
        </code></pre>
      </div>



      <div id="customization" class="scrollspy section">
        <h4>Parallax Customization</h4>
        <p>The parallax container height is what defines how much of the image can be seen. This is set to a default of 500px. You can add your own style to override this.</p>
        <pre><code class="language-css">
    .parallax-container {
      height: "your height here";
    }
        </code></pre>
      </div>

    </div>


    <!-- Table of Contents -->
    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#introduction">Introduction</a></li>
            <li><a href="#structure">Structure</a></li>
            <li><a href="#initialization">Intialization</a></li>
            <li><a href="#customization">Customization</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>