Background animation section

Sections documentation

Background animation section

Lorem 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.

Variants

Animation Parallax

Installation

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

Usage

<div class="section-bg-animation header-animation box-middle-container" style="background-image:url('http://www.framework-y.com/images/thumb-large.png'); height:400px;">
    <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">
        <div class="box-middle">
            <h1 class="text-xl">ANIMATION BACKGROUND SECTION</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>
<script>
    $(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 });
    });
</script>
<div class="section-bg-animation header-animation white" style="background-image:url('http://www.framework-y.com/images/thumb-large.png'); height:550px;">
    <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="text-xl">ANIMATION BACKGROUND SECTION</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>   
<script>
    $(document).ready(function () {
        $('#anima-layer-a2').pan({ fps: 30, speed: 0.7, dir: 'left', depth: 30 });
        $('#anima-layer-b2').pan({ fps: 30, speed: 1.2, dir: 'left', depth: 70 });
    });
</script>                 

Main settings

Name Type Description
Initialization Mixed 1 ) Add classes section-bg-animation header-animation to target object and set the background image style.
2 ) Insert animation objects <div id="your-id" class="anima fog-1"></div> into target object, you can insert multiple animation objects but with different IDs.
3 ) To add a content over the animation insert <div class="container content"> ... </div> into target object.
4 ) Add script

<script>
    $(document).ready(function () {
        $('#your-id').pan({ fps: 30, speed: 0.7, dir: 'left', depth: 30 });
        $('#your-id-2').pan({ fps: 30, speed: 1.2, dir: 'left', depth: 70 });
        //other animation objects
    });
</script>
                                    
Change speed value as you prefer.
Animations image CSS class You can choose two types of animation images:
Name Description Example
Clouds Two different cloud images, used on example two <div id="your-id" class="anima clouds-1"></div>
<div id="your-id-2" class="anima clouds-2"></div>
Fog Two different fog images, used on example one <div id="your-id" class="anima fog-1"></div>
<div id="your-id-2" class="anima fog-2"></div>
Animations image position CSS class To change animation image position you must edit the classes belove of file HTWF/style.css, edit only second value 30px and 160px:

.header-animation .clouds-1 {
    background: rgba(0, 0, 0, 0) url(images/assets/clouds_1.png) 100px 30px repeat-x;
}
.header-animation .clouds-2 {
    background: rgba(0, 0, 0, 0) url(images/assets/clouds_2.png) 200px 160px repeat-x;
}
.header-animation .fog-1 {
    background: rgba(0, 0, 0, 0) url(images/assets/fog_1.png) 200px 30px repeat-x;
}
.header-animation .fog-2 {
    background: rgba(0, 0, 0, 0) url(images/assets/fog_1.png) 200px 160px repeat-x;
}
                                    
Overlay image HTML To add a image overlay, like example two, insert <img class="overlay" src="image-overlay.png" /> into target object. You can set the position with these classes:
Class name Description Example
bottom Bottom position <img class="overlay bottom" src="../../images/title-animation-overlay.png" />
center Center position <img class="overlay center" src="../../images/title-animation-overlay.png" />
bottom center Bottom and center position <img class="overlay bottom center" src="../../images/title-animation-overlay.png" />
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