We're offering a free six-month trial of Hookline: Atmos - a plugin that adds a Gravity Forms element for Oxygen Builder. Get it today!

Using fullPage with Oxygen and Breakdance

Ahoy there!

In this tutorial, we’ll review how to use fullPage.js in Oxygen and Breakdance. I would like to preface this tutorial by saying that fullPage does have a commercial license. If you’re unsure whether or not you need it, you can read their documentation regarding licenses.

fullPage Structure

Regardless of whether or not you’re using Breakdance, Oxygen, or any other application, fullPage’s setup is very much the same. For example, you’ll need to include the CSS and JS for fullPage. This is typically done through HTML via the stylesheet and script tags. In both of our examples today, we’ll be using a CDN version of fullPage, but you can also include them locally.

Loading CDN Reources:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.js"></script>

This code will be added to a Code Block for each builder.

Next, we need to define the HTML structure. fullPage’s default HTML structure is the following:

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

This means that in both Oxygen and Breakdance, we’ll need to ensure we have this structure. There’s more complex structures and HTML you can add to fullPage, but we’re going to cover just a basic four-section structure in this tutorial.

After you’ve set up the structure, you need to initialize it. Since we’re using a basic setup in our end, the following JavaScript will be sufficient.

Initialize fullPage

window.addEventListener('load', function () {

new fullpage('.fullPage', {
 //options here
});

});

So with all that said, let’s get to the drydock and start building our components.

fullPage with Oxygen

We’re going to start with adding fullPage to Oxygen in this tutorial. We’ll start by adding a Section and adding the class fullPage to it. Then we’ll set the Section’s padding to 0 and the Container Width to full-page.

A screenshot showing how to visually set up Oxygen´s section

Next, we´ll need to add a Code Block element. Then add the link and script tags to the Code Block’s HTML tab and the initialization JavaScript to the JS tab.

An image showing how to set up the Code Block element in Oxygen.

Now, we need to create the different sections. We’ll start by creating one Div and adding a background image. Then we’ll add the class section to the Div and give the section class the following properties:

  • Width: 100%
  • Min-height:100vh
  • Display: flex
  • Flex Direction: column
  • Align Items: center
  • Justify content: center
A screenshot of some of the section class properties

Next, we’ll add a Heading element to the Div, add some text, and then add the class fp-heading. We’ll set some styles to the heading class, and that should be our first fullPage section.

Screenshot of the fp-heading class and its properties

Lastly, we’ll copy this Div three times and update the background image and Heading text accordingly.

Now, when we view the page on the front end, the fullPage.js should take effect, and we can easily scroll through the different sections.

That’s it for Oxygen – let’s head over to the Breakdance drydock.

fullPage with Breakdance

Using fullPage with Breakdance is very similar to Oxygen. The only difference is there is a bit of additional CSS we need to add to get everything to work correctly. To start, we’re going to add a Section to the page. We’ll set the Section to full width and the padding and margin to 0.

We’ll then add the class fullPage to the Section

Screenshot showing how the Breakdance section is set up

Next, we’ll add a Code Block element to the Section and add the link and script tags to the Code Block’s HTML tab and the initialization JavaScript to the JS tab. We’ll also add some custom CSS to the Code Block to target the fp-overflow class:

.fp-overflow {
  width:100%;
  min-height:100vh;
  display:inherit;
  align-items:inherit;
  justify-content:inherit!important;
}

The main thing we’re adding to this CSS is min-height:100vh and width:100%. This is needed for fullPage to work in Breakdance smoothly. Otherwise, there are some odd scrollbars that appear and hamper performance.

Screenshot showing the Breakdance Code Block set up for fullPage

Now, we can create the different sections for Breakdance. We’ll start by adding a Div element and add a background image. Next, we’ll add the class section to the Div and update the Section’s CSS to the following:

  • Display: flex
  • Flex Direction: column
  • Align Items: center
  • Justify Content: center
  • Width: 100%
  • Min Height: 100vh
Screenshot showing the modifications to the section class in Breakdance.

Next, we’ll add a Heading element to the Div, add some text, and then add the class fp-heading. We can add some styles to the class and then this would complete our first fullPage section.

A screenshot showing the styles applied to the fp-heading class in Breakdance.

Now, we can copy that Div three more times and update the background images and Heading text for each.

With all this complete, we can save Breakdance and view the page on the front end. We should then see fullPage working as expected.

That’s it for Breakdance!

Final Thoughts

This tutorial should help you get a basic understanding of using fullPage.js with both Breakdance and Oxygen. You can further modify fullPage to add different extensions or effects as needed.

We’ll also provide a link to the Oxygen Component and Breakdance Component so you can quickly copy these to your site as needed.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    © 2020-2024 Luxibay
    Name(Required)
    Please let us know what's on your mind. Have a question for us? Ask away.
    This field is for validation purposes and should be left unchanged.