Extension Parallax

Álvaro edited this page Jun 26, 2018 · 20 revisions

Read Use of Extensions before using the parallax option.

HTML

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 id="fullpage">
    <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>
</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 styling.

For example:

#section1 .fp-bg{
    background-image: url('imgs/alvaro-genious.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

You can see them in action in the demo page

Description of the configurable options available within the option parallaxOptions:

parallaxOptions Description
type (default reveal) Possible values are cover and reveal. Provides a way to choose if the current section/slide will be above or below the destination one. When usingcover, the next section or slide will appear covering a portion of the current one. Using reveal will just invert the effect and covers a bit of the destination one while revealing it.
percentage (default 62 ) provide 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 Possible values are translate and background. Defines if we want to apply the parallax effect to the fp-bg element or directly to the section's or slides's background property. It is recommended 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.

Methods

You can see them in action in the demo page

setOption(optionName, value)

Sets a value for a given option. optionName can be any of of the options available in parallaxOptions. (type, percentage or property).

//changing the value for the property `type`
fullpage_api.parallax.setOption('type', 'cover');

//changing the value for the property `percentage`
fullpage_api.parallax.setOption('percentage', '30');

init()

Enables the parallax effect. Useful if you need to enable it dynamically at a certain point.

fullpage_api.parallax.init();

destroy()

Turns off the parallax effect.

fullpage_api.parallax.destroy();
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.