TITLE COMPONENT / IMAGE PARALLAX KEN-BURN

Lorem Ipsum is simply dummy text of the printing.

Installation

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

Usage

<div class="header-title white ken-burn" data-parallax="scroll" data-position="top" data-natural-height="550" data-natural-width="1366" data-image-src="http://www.framework-y.com/images/thumb-large.png">
    <div class="container">
        <div class="title-base">
            <hr class="anima" />
            <h1>TITLE COMPONENT / IMAGE PARALLAX KEN-BURN</h1>
            <p>Lorem Ipsum is simply dummy text of the printing.</p>
        </div>
    </div>
</div>

Main settings

Name Type Description
Ken burn animations CSS class Add class ken-burn to title object. Example: <div class="header-title ken-burn" data-parallax="scroll" data-position="top" data-image-src="image.jpg" data-natural-width="123" data-natural-height="123"> ... </div>.

You can use 3 built-in ken burn animations:
Class name Description
ken-burn Zoom in animation with bottom right translation.
ken-burn-out Zoom out animation with bottom right translation.
ken-burn-center Centered zoom in animation.
Settings HTML Set attributes data-parallax="scroll" data-image-src="image.jpg" of title object.
Code location Information Insert the title code just belove header code. Example:
<body>
    <header> 
        ... 
    </header>
    <div class="header-title ken-burn">
        ...
    </div>
    <div class="section-empty">
        <div class="container content">
            ...
        </div>
    </div>
    <footer>
           ...
    </footer>
</body>

Title image documentation

Title image parallax is part of Title image. Complete documentation here

Parallax documentation

Parallax feature is part of Background image parallax. Complete documentation here

Background image documentation

Title image is part of Background image section. Complete documentation here