Parallax content

Installation

  • Include JS
    <script src="TweenLite.min.js"></script>
    <script src="CSSPlugin.min.js"></script>
    <script src="jquery.min.js"></script>
    <script src="parallax_content.js"></script>
  • Set HTML
    <div class="parallax-title">
      Parallax title
    </div>
  • Call the plugin
    $(document).ready(function() {
      $('.parallax-title').parallaxContent();
    });

Demo

  • Basic usage
    $('.parallax-content-demo-1 .title').parallaxContent({
      shift: 20
    });
    
    $('.parallax-content-demo-1').parallaxContent({
      shift: -20,
      duration: 3
    });
    Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Settings from data attribute
    <div
      class="title"
      data-parallax-content='{"shift": 35}'>
      Lorem ipsum
    </div>
    <div
      class="desc"
      data-parallax-content='{"shift": 70, "duration": 3}'>
      Lorem ipsum dolor sit amet ....
    </div>
    $('.parallax-content-demo-2 .title').parallaxContent();
    $('.parallax-content-demo-2 .desc').parallaxContent();
    Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.