TITLE COMPONENT / IMAGE PARALLAX

Lorem Ipsum is simply dummy text of the printing.

Installation

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

Usage

<div class="header-title white" 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</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" and data-image-src="image.jpg" data-natural-width="123" data-natural-height="123" of title object.
Code location Information Insert the title code just belove header code. Example:
<body>
    <header> 
        ... 
    </header>
    <div class="header-title">
        ...
    </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 component. Complete documentation here

Parallax documentation

Parallax feature is part of background image parallax section. Complete documentation here

Background image documentation

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