Extension Cards

Read Use of Extensions before using the cards option.

• Live demo
• Required HTML structure
• Applying the background
• Options
  • Cards Effect Options
• Methods

Required HTML structure

There's no change required on the default fullpage.js structure in order to use the cards extension.

However, if you want to make use of the options fadeContent or fadeBackgrounds then you'll need to use the classes fp-content and fp-bg respectively.

• Fading backgrounds: The wrapper with the class fp-bg will be the one with the background elements or the background image. This would be the element to which you'll have to apply the background instead of to the section or slides it belongs to. By default the fp-bg element will be a fullscreen element defined by internal CSS styles.

• Fading content: The wrapper or elements using the class fp-content will be the ones considered as content. There are not CSS styles associated with this element.

Here's an example of how the HTML structure looks when using both fp-bg and fp-content.

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

This structure can be see in the example file that comes with the purchase of the Cards extension.

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
cards type: mixed	(default false). Extension of fullPage.js. Possible values are true, false, sections or slides. Defines whether or not to use the cards effect on sections / slides.
cardsOptions: type: Object	(default: { perspective: 100, fadeContent: true, fadeBackground: true}). Allows to configure the parameters for the cards effect when using the option cards:true.

Cards Effect Options

You can see them in action in the demo page

Description of the configurable options available within the option cardsOptions:

cardsOptions	Description
perspective type: Number	(default 100) defines the perspective used by the cards effect. The lower this value is, the more pronounced the effect will be.
fadeContent type: Boolean	(default true ) defines whether or not to fade the element/s containing the class fp-content on the leaving section/slide when switching between sections/slides. The fading will take place before switching to another section/slide so it will fade to 0 opacity showing the background of the leaving section.
fadeBackground type: Boolean	(default true ) defines whether or not to fade the element/s containing the class fp-bg on the leaving section/slide when switching between sections/slides. The fading will take place before switching to another section/slide so it will fade to 0 opacity showing the background color of the leaving section.

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 cardsOptions. (perspective, fadeContent or fadeBackground).

//changing the value for the property `perspective`
fullpage_api.cards.setOption('perspective', 500);

//changing the value for the property `fadeContent`
fullpage_api.cards.setOption('fadeContent', false);

---

init()

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

fullpage_api.cards.init();

---

destroy()

Turns off the cards effect.

fullpage_api.cards.destroy();