Background parallax image section

Sections documentation

  1. Home
  2. Sections
  3. Image parallax

Background image 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

Image Parallax

Installation

<script src='../../../HTWF/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 pattern-name"></div> as first item and replace pattern-name with the pattern you want. Overlay pattern is a feature of Javascript and CSS, complete documentation and patterns list 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

Documentation Plugin website