Section

Background image parallax section

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

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

IMAGE 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>

Usage

<div class="section-bg-image parallax-window box-middle-container" style="height:600px;" data-natural-height="486" data-natural-width="1366" data-parallax="scroll" data-image-src="http://www.framework-y.com/images/thumb-large.png">
     ...
</div>
<div class="section-bg-image box-middle-container overlay-container parallax-window" style="height:600px;" data-natural-height="486" data-natural-width="1366" data-parallax="scroll" data-image-src="http://www.framework-y.com/images/thumb-large.png">
    <div class="bg-overlay transparent-dark"></div>
    <div class="container content overlay-content box-middle white text-center">
        <h1 class="main-title text-xl">IMAGE BACKGROUND PARALLAX <br />SECTION WITH OVERLAY</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>                        

Main settings

Name Type Description
HTML initialization Mixed Add class parallax-window and attributes data-parallax="scroll" data-image-src="image.jpg" data-natural-width="123" data-natural-height="123" 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
Overlay pattern Mixed 1 ) Add class overlay-container to target object and class overlay-content to content object.
2 ) Add object <div class="bg-overlay dotted"></div> into first row of target object.
Overlay pattern is a feature of base components. Complete documentation here
Parallax area Mixed To add parallax effect to a generic are add class layer-parallax to target object and set its height. Example: <div class="layer-parallax" style="height:300px;"> ... </div>.
Bleed HTML attribute The plugin add 70px of overflow on top\bottom of the image. To change this value use this attribute data-bleed="123".
Ken burn animations CSS class Add class ken-burn to title object. Example: <div class="header-title ken-burn" data-parallax="scroll" data-position="top" data-image-src="image.jpg" data-natural-width="123" data-natural-height="123"> ... </div>.

You can use 3 built-in ken burn animations:
Class name Description
ken-burn Zoom in animation with bottom right translation.
ken-burn-out Zoom out animation with bottom right translation.
ken-burn-center Centered zoom in animation.
Side images CSS class If your parallax image have only side images on right and left and on the center there is an empty space for the contents, you can maintain the empty content width also on small devices by add the class parallax-side to section object.

Complete documentation and external resources


Background image section documentation

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