Section

Background animation parallax section

ANIMATION BACKGROUND
PARALLAX SECTION

L'orem ipsum dolor, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

ANIMATION BACKGROUND
PARALLAX SECTION

L'orem ipsum dolor, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Installation

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

Usage

<div class="section-bg-animation header-animation white box-middle-container" style="height:400px;" data-natural-height="486" data-natural-width="1366" data-parallax="scroll" data-image-src="../images/title-animation-background-2.jpg">
    <div id="anima-layer-a" class="anima-layer fog-1"></div>
    <div id="anima-layer-b" class="anima-layer fog-2"></div>
    <div class="container content overlay-content white text-center box-middle">
        <div class="box-middle">
            <h1 class="main-title text-xl"> ... </h1>
            <p>
                ...
            </p>
        </div>
    </div>
</div>
<div class="section-bg-animation header-animation white bg-gradient-container" style="height:550px;" data-natural-height="486" data-natural-width="1366" data-parallax="scroll" data-image-src="http://www.framework-y.com/images/thumb-large.png">
    <div id="anima-layer-a2" class="anima-layer clouds-1"></div>
    <div id="anima-layer-b2" class="anima-layer clouds-2"></div>
    <div class="bg-gradient"></div>
    <img class="overlay bottom center" src="http://www.framework-y.com/images/thumb.png" />
    <div class="container content">
        <div class="box-middle">
            <h1 class="main-title text-xl">ANIMATION BACKGROUND<br /> PARALLAXSECTION</h1>
            <p>
                L'orem ipsum dolor, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore<br />
                magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
            </p>
        </div>
    </div>
</div>                        

Main settings

Name Type Description
HTML initialization Mixed Add class parallax-window and attributes data-parallax="scroll" data-image-src="image.jpg" to target object.
Centered content CSS class Add class box-middle-container to section object and class overlay-content to content object.
Centered content is a feature of base components. Complete documentation here

Complete documentation and external resources


Background animation documentation

Background animation is part of background animation section. Complete documentation here

Parallax documentation

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