fullPage.js in Oxygen

This tutorial provides the steps to set up fullPage, a JavaScript library for fullscreen scrolling in Oxygen as per this (coming soon) demo page.

We are going to create four sections with fixed navigation at the top and dot circle navigation at the right.

Also, the second section is going to contain 3 horizontal slides.

Live Demo (coming soon)

Step 1

Install and activate my custom functionality plugin.

Upload fullpage.min.css to plugin’s assets/css directory using a FTP client.

Upload fullpage.min.js to plugin’s assets/js directory.

Inside plugin.php’s custom_enqueue_files(), add

wp_enqueue_style(
    'fullpage-css',
    plugin_dir_url( __FILE__ ) . 'assets/css/fullpage.min.css'
);

wp_enqueue_script(
    'fullpage',
    plugin_dir_url( __FILE__ ) . 'assets/js/fullpage.min.js',
    array( 'jquery' ),
    '3.0.0',
    true
);

You might want to place the above inside an if conditional to restrict these files to load only on specific pages/views of your site per your design needs.

Ex.:

if ( is_front_page() ) {
    wp_enqueue_style(
        'fullpage-css',
        plugin_dir_url( __FILE__ ) . 'assets/css/fullpage.min.css'
    );

    wp_enqueue_script(
        'fullpage',
        plugin_dir_url( __FILE__ ) . 'assets/js/fullpage.min.js',
        array( 'jquery' ),
        '3.0.0',
        true
    );
}

Step 2

Edit your Page/Post/Template in Oxygen.

Do not inherit from any other template like Main because we are not going to show the default sitewide header and footer and instead add a custom navigation with links to the in-page sections.

Here is an export of my entire demo page. To import this, copy all the code, click on +Shortcodes, paste, save/update and edit to personalize.

If you prefer to set this up manually, follow the below instructions.

Set up a structure like this:

Parent Div

Add a class of fullpage.

Each Section

Add a class of section.

With this class selected, set text color to #fff, set child elements to stack vertically and center horizontal item alignment.

In the Advanced > Layout, set items to be centered vertically as well.

Individual sections

Select the ID of each section and set it a unique background color.

#ff5f45
#0798ec
#fc6c7c
#fec401

Section 1

Inside Section 1 of the demo page, I’ve added a H1 heading, a H2 heading and a div that has 3 horizontal buttons.

Section 2 (the section that has slides)

I’ve placed 3 divs in this section and the content of each div forms the content of the slide.

Add a class of slide to each div.

Set horizontal and vertical center alignment.

Section 4

I’ve set this as the background image.

Background Size: manual
Background Repeat: no-repeat
Left: 50%
Top: 100%

Code Block

PHP & HTML:

<ul id="menu">
    <li data-menuanchor="section1" class="active"><a href="#section1">First section</a></li>
    <li data-menuanchor="section2"><a href="#section2">Second section</a></li>
    <li data-menuanchor="section3"><a href="#section3">Third section</a></li>
    <li data-menuanchor="section4"><a href="#section4">Fourth section</a></li>
</ul>

CSS:

#menu{
    position:fixed;
    top:0;
    left:0;
    height: 40px;
    z-index: 70;
    width: 100%;
    padding: 0;
    margin:0;
}
.admin-bar #menu{
  top: 32px;
}
#menu li {
    display:inline-block;
    margin: 10px;
    color: #000;
    background:#fff;
    background: rgba(255,255,255, 0.5);
    -webkit-border-radius: 10px;
            border-radius: 10px;
}
#menu li.active{
    background:#666;
    background: rgba(0,0,0, 0.5);
    color: #fff;
}
#menu li a{
    text-decoration:none;
    color: #000;
}
#menu li.active a:hover{
    color: #000;
}
#menu li:hover{
    background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
    padding: 9px 18px;
    display:block;
}
#menu li.active a{
    color: #fff;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    background: #fff;
}

.fp-controlArrow.fp-prev {
  left: 55px;
}

.fp-controlArrow.fp-next {
  right: 55px;
}

.fp-slide.fp-table {
  display: table;
}

@media only screen and (max-width: 600px) {

  .fp-controlArrow.fp-prev,
  .fp-controlArrow.fp-next {
    display: none;
  }

}

Javascript:

new fullpage('.fullpage', {
    anchors: ['section1', 'section2', 'section3', 'section4'],
    scrollingSpeed: 1000,
    navigation: true,
    slidesNavigation: true,
    menu: '#menu',
    responsiveHeight: 330
});

That’s it! This should be treated only as an example of implementing fullPage.js in Oxygen.

fullPage has several other options and paid addons that you can explore further if you are interested.