How to integrate fullPage.js with Bricks

This tutorial provides the JavaScript and CSS codes that can be pasted in order to integrate the JS library fullPage.js inside Bricks Builder.

The HTML Structure

fullPage.js requires a specific DOM structure in order to work. it needs:

  • a wrapper. We are going to use the <main> element of our site.
  • the inner sliding sections need to be direct children of the wrapper. We will use section elements as our sliding sections (available from version 1.5).
  • the horizontal slides need to be direct children of the sliding section. So we will use container elements for our horizontal slides.

Here is the final structure of our example:

We also need to assign a class slide to each horizontal slide:

Enqueue the fullPage.js files

The first thing to do is to download the dist files from here: https://github.com/alvarotrigo/fullPage.js/tree/master/dist and download the following files:

  • fullpage.min.js
  • fullpage.min.css

Once downloaded, make sure to upload these files inside your child theme. To keep things organized, we uploaded them in the following directories of our child theme:

  • /js/fullpage/fullpage.min.js
  • /css/fullpage/fullpage.min.css

We also need to create a script.js file inside our /js/ directory where we’ll add our init code.

Now it’s time to enqueue your files. Open the functions.php file or your child theme and enqueue yours files like this:

add_action( 'fullpagejs_enqueue_scripts', function() {
	// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
	if ( ! bricks_is_builder_main() ) {

        // Fullpage
        wp_enqueue_script( 'fullpage', get_stylesheet_directory_uri() . '/js/fullpage/fullpage.min.js', array(), '4.0.9' );
        wp_enqueue_style( 'fullpage', get_stylesheet_directory_uri() . '/css/fullpage/fullpage.min.css', '4.0.9' );

        // Init
        wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/script.js', array('fullpage'), filemtime( get_stylesheet_directory() . '/js/script.js' ) );
	}
} );

Pay attention that, right now, we are initializing the script on every page of our site. That’s probably not what you are looking for, but that’s out of the scope of this tutorial. Here is a good discussion about conditional enqueue if you are willing to dig more into it.

Add some CSS

From our tests, we will require to add a few rows of CSS in order to make it looks good on frontend and avoid flash of unstyled content. Copy/paste the following CSS to the style.css file of your child theme:

body #brx-content {
    display: block;
    min-height: 100vh;
}
body.bricks-is-frontend #brx-content > section {
    opacity: 0;
    transition: 300ms opacity ease;
} 
body.bricks-is-frontend #brx-content > section.fp-section {
    opacity: 1;
}

Initialize the script

The final step is to initialize the fullPage.js script.

Copy/paste the following code inside the script.js file you created earlier:

window.addEventListener('load', () => {
    if (!document.body.classList.contains('bricks-is-frontend') ){
    return;
    }

    // Fullpage
    new fullpage('#brx-content', {
        //options here
        autoScrolling:true,
        sectionSelector: '#brx-content > section',
        slideSelector: '#brx-content > section .slide',
        fixedElements: '#brx-header, #brx-footer',
    });
});

There are a lot more options you can add, just refer to the official documentation.

Final result

If everything worked as expected, here is what you should see on the frontend:

Conclusion

Before adding fullPage.js to your website, make sure to read their terms & conditions carefully and – if it applies to your project – purchase a valid license. Happy sliding!

Instant access to 390+ Bricks code tutorials with BricksLabs Pro

5 comments

  • Grzegorz

    Seems to not be working now - at least heder and footer are hidden.

  • Philipp Stakenborg

    Hello Maxime,

    thank you for this tutorial. I am planning to try this in 2 month. I wonder if it is possible to use fullpage.js just for a CPT and not for a whole website? I am thinking about something like a Fullpage.js Laoyut builder where the client can easily add new "scrollstory" pages (probably with metabox).

    Should I put this in the tutorial request, cause it might be vaulable for other users as well? 🙂

    Greetings
    Philipp

    • A

      Yes, it is possible.

      Is the objective to show individual posts of the CPT as sections with each section having the post's featured image as background and title and excerpt overlayed on the center? and is this, on the CPT archive page?

  • Lukáš Jakab

    Hello Maxime, I am currently playing with fullPage and I wonder if it is doable with WP Codebox?

Leave a Reply to Philipp Stakenborg (Cancel Reply)