Extension Parallax

Parallax Extension

• Required HTML structure
• Applying the background
• Options
  • Parallax Effect Options

Required HTML structure

In order to use the parallax effect within sections and slides a new element will have to be added with the class fp-bg. It should be an empty div placed as the first child of the section or slide. Like the following:

<div class="fp-bg"></div>

This would be the element to which you'll have to apply the background instead of to the section or slides it belongs to.

For example:

<div class="section" id="section1">
    <div class="fp-bg"></div>
    Slide 1.1
</div>
<div class="section" id="section2">
    <div class="slide" id="slide2-1">
        <div class="fp-bg"></div>
        Slide 2.1
    </div>
    <div class="slide" id="slide2-2">
        <div class="fp-bg"></div>
        Slide 2.2
    </div>
</div>

This structure can be see in the source code of the the parallax demo page.

If for any reason you really don't want to add a new element in your layout, you can set the option property within parallaxOptions to background in order to apply the effect to the current section or slide background. As explained in Parallax Effect Options I only recommend to do this if it is really necessary, as performance will not be the same as when using the fp-bg elements.

Applying the background

The background should be applied to the fp-bg element in the same way you would apply it to a section or slide. You can use CSS or inline stylying.

For example:

#section1 .fp-bg{
    background-image: url('imgs/parallax/bg3.jpg');
    background-size: cover;
    background-position: center 80%;
}

Options

Option	Description
parallax	(default false). Extension of fullPage.js. Defines whether or not to use the parallax backgrounds effects on sections / slides.
parallaxOptions:	(default: { type: 'reveal', percentage: 62, property: 'translate'}). Allows to configure the parameters for the parallax backgrounds effect when using the option parallax:true.

Parallax Effect Options

Description of the configurable options available within the option parallaxOptions:

parallaxOptions	Description
type	(default reveal) It can be set to cover or reveal. It allows us to choose if we want the currect section to be above or below the destination one. So if we choose cover, the next section or slide will appear covering a portion of the current one. Choosing reveal will just invert the effect and covers a bit of the destination one while revealing it.
percentage	(default 62) provides us a way to define the percentage of the parallax effect in relation to the viewport. Having a smaller value will have a smaller parallax effect, and having 100, which is the maximum will show completely static backgrounds.
property	Allows us to define if we want to apply the parallax effect to the fp-bg element or if we just want to apply it to the section's or slides's background property. I would recommend to use the default value for this option.

|

Note that using the fp-bg element provides a much better performance as it makes use of translate3d hardware acceleration. The option is there for those who, for any particular reason, do not want to add the extra fp-bg element in each section or slide or just can not modify the HTML markup.