Extension Parallax
Read Use of Extensions before using the parallax option.
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
propertywithinparallaxOptionstobackgroundin 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 thefp-bgelements.
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%;
}| Option | Description |
|---|---|
| parallax | (default false). Extension of fullPage.js. Defines whether or not to use the parallax backgrounds effects on sections / slides. Possible values are false, true, 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. |
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.
You can see them in action in the demo page
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');Enables the parallax effect. Useful if you need to enable it dynamically at a certain point.
fullpage_api.parallax.init();Turns off the parallax effect.
fullpage_api.parallax.destroy();