Sections documentation
<script src='../../../HTWF/scripts/parallax.min.js'></script> <script src='../../../HTWF/scripts/jquery.spritely.min.js'></script>
<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>
| 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 |
Parallax effect is part of background image section. Complete documentation here