Pagepiling.js with React web app

Full page snap scroll in your react app

It is clear that jQuery is not the thing of the future and is continuously becoming outdated. But it still exists with some of its awesome plugins, one of such being pagepiling.js, which allows us to have full page parallax scrolling in our site with multiple options for modification. In this tutorial, we will see how to use this plugin within your React app.

Refer to my GitHub repository for this post.

Getting Started

Skip this section if you already know how to initialize React app with create-react-app command.

1. Open the desired folder where you want to have your React App.
2. Open terminal and write the following command (you can name your directory as you wish, here the name of the directory is pagepiling): npx create-react-app pagepiling
3. This will create a directory with name pagepiling which will have the file structure for the react app.
4. Go to the directory created, by cd pagepiling command in the terminal:
5. Run the script npm start and you will see the default page provided by the create-react-app served in your localhost.

Moving Ahead

1. As pagepiling.js is a jQuery plugin, first install the npm package of jQuery into your project by running following command in the terminal: npm install jquery
2. Head to the src folder in your app and paste the following files (with the same name). I have somewhat modified these files from the original files in the GitHub repo of pagepiling.js to avoid any errors and warning in our react app.

• jquery.pagepiling.css and
• jquery.pagepiling.js (with the same name) from the links.

3. Delete the App.css file in the src folder and clean the index.css file. We will be using index.css to contain all of our custom CSS. Also delete the content of App.js ; we will be writing it ourselves.

Writing the App.js

1. Write the following import statements required:

import React, {Component} from 'react';
import $ from 'jquery';
import './jquery.pagepiling';
import './jquery.pagepiling.css';
import './index.css';

2. We will use the React class to create our component. Create the class component and export it as default as follows:

class App extends Component {
  componentDidMount(){
    }
  render() {
    return (
      <div>
      </div>
    )
  }
}
export default App;

3. Write the required HTML structure in the return function of the class as follows:

<div id="pagepiling">
    <div class="section sec1">Section one</div>
    <div class="section sec2">Section two</div>
    <div class="section sec3">Section three</div>
    <div class="section sec4">Section four</div>
</div>

Individual classname is added to each section to style them later.

4. Initialize the pagepiling.js plugin by writing the following code inside the componentDidMount() life cycle:

componentDidMount(){
    $(document).ready(function() {
        $('#pagepiling').pagepiling();
    });
}

5. You can modify the plugin functionality referring to the official Github repo. I have applied the navigation bullets to the right as follows (change the tooltips as you would like to show while hovering the nav bullets):

componentDidMount(){
    $(document).ready(function() {
        $('#pagepiling').pagepiling({
            navigation: {
                'textColor': '#fff',
                'bulletsColor': '#fff',
                'position': 'right',
                'tooltips': ['sec1', 'sec2','sec3', 'sec4']
            }
        })
    })
}

In the end, App.js should look like this:

Styling

We will write our custom CSS in our index.css file. I have given different background images to the sections and some styling of the writing in the sections as follows:

* {
  margin: 0;
  padding: 0;
}
#pagepiling {
  text-align: center;
}
#pagepiling .section {
  color: white;
  font-size: 5em;
  text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
#pp-nav li .active span,
.pp-slidesNav .active span {
  background: rgb(255, 255, 255) !important; /*To change the active navigation bullets inner color*/
}
.sec1 {
  background: url("https://images.pexels.com/photos/1439227/pexels-photo-1439227.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");
  background-size: cover;
}
.sec2 {
  background: url("https://images.pexels.com/photos/54300/pexels-photo-54300.jpeg?cs=srgb&dl=pexels-nita-54300.jpg&fm=jpg");
  background-size: cover;
}
.sec3 {
  background: url("https://images.pexels.com/photos/97494/pexels-photo-97494.jpeg?cs=srgb&dl=pexels-francesco-ungaro-97494.jpg&fm=jpg");
  background-size: cover;
}
.sec4 {
  background: url("https://images.pexels.com/photos/822474/pexels-photo-822474.jpeg?cs=srgb&dl=pexels-bianca-marolla-822474.jpg&fm=jpg");
  background-size: cover;
}

Hurray that’s all; you can examine the piling effect of this plugin in your browser. Feel free to modify as per your requirements and liking.