TITLE COMPONENT / PARALLAX ANIMATION

Lorem Ipsum is simply dummy text of the printing.

Installation

<script src='../../scripts/jquery.spritely.min.js'></script>
<script src='../scripts/parallax.min.js'></script>

Usage

<div class="header-animation white" data-parallax="scroll" data-position="top" data-natural-height="486" data-natural-width="1366" data-image-src="http://www.framework-y.com/images/thumb-hd.png">
    <div id="anima-layer-a" class="anima-layer clouds-1"></div>
    <div id="anima-layer-b" class="anima-layer clouds-2"></div>
    <img class="overlay bottom center" width="123" src="../../images/title-animation-overlay.png" />
    <div class="container">
        <div class="title-base">
            <hr class="anima" />
            <h1>TITLE COMPONENT / PARALLAX ANIMATION</h1>
            <p>Lorem Ipsum is simply dummy text of the printing.</p>
        </div>
    </div>
</div>

Main settings

Name Type Description
Settings HTML Set attributes data-parallax="scroll" data-image-src="image.jpg" of title object.
Manual initialization Javascript
$(document).ready(function () {
    $('#anima-layer-1').pan({ fps: 30, speed: 0.7, dir: 'left', depth: 30 });
    $('#anima-layer-2').pan({ fps: 30, speed: 1.2, dir: 'left', depth: 70 });
});
Code location Information Insert the title code just belove header code. Example:
<body>
    <header> 
        ... 
    </header>
    <div class="header-animation">
        ...
    </div>
    <div class="section-empty">
        <div class="container content">
            ...
        </div>
    </div>
    <footer>
           ...
    </footer>
</body>

Title animation documentation

Title animation background parallax is part of title animation component. Complete documentation here

Background animation documentation

Background animation feature is part of background animation section. Complete documentation here

Parallax documentation

Parallax feature is part of background image parallax section. Complete documentation here