Animation title

Lorem Ipsum is simply dummy text of the printing

Variants

Animation Parallax

Installation

<script src='../../../HTWF/scripts/jquery.spritely.min.js'></script>
<script src='../HTWF/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 });
});
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>
    <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