Image background title

Lorem Ipsum is simply dummy text of the printing

Variants

Background image Full screen Full screen parallax Parallax Parallax ken-burn

Installation

<script src='../HTWF/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.
White CSS Add class white to the container object to convert all colors to white. Use this feature for dark backgrounds.
Overlay pattern Mixed Add the code <div class="bg-overlay dotted"></div> into the title, as first row.
Overlay pattern is a feature of Javascript and CSS, complete documentation and patterns list here
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>