TITLE COMPONENT / ANIMATION

Lorem Ipsum is simply dummy text of the printing.

Installation

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

Usage

<div class="header-animation white" style="background-image:url('http://www.framework-y.com/images/thumb-wide.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 / ANIMATION</h1>
            <p>Lorem Ipsum is simply dummy text of the printing.</p>
        </div>
    </div>
</div>

Main settings

Name Type Description
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>
    ...
</body>

Background animation documentation

Title background animation is part of background animation section. Complete documentation here