Sections documentation
<script src='../../HTWF/scripts/jquery.spritely.min.js'></script>
<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>
| 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:
|
||||||||||||
| 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:
|
||||||||||||
| 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 |