Animation title

Lorem Ipsum is simply dummy text of the printing

Variants

Animation Parallax

Installation

<script src='../../HTWF/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 });
});
White CSS Add class white to the container object to convert all colors to white. Use this feature for dark backgrounds.
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