Nowadays increasingly more websites are designed based mostly on the single-page method (often called single-page or one-page websites). On this article, we’ll discover methods to create such an expertise for a demo web site by making the most of fullPage.js.
Take a look at what we’re going to construct on this Codepen demo. Moreover, all of the information for this demo might be discovered on this Github repository.
What’s fullPage.js?
fullPage.js is a jQuery-based plugin which permits us to construct one-page scrolling web sites. Created by net developer Alvaro Trigo, as we’ll see within the upcoming sections, it comes with numerous completely different customization choices.
As well as, this plugin offers well-organized documentation with many hands-on examples.
Fortunately, it really works not solely in all trendy browsers, but in addition in some older examples like IE 8 and Opera 12.
Lastly, you may want to take a look on the WordPress model of it.
Getting Began with fullPage.js
To get began with fullPage, you must obtain and set up the next information in your challenge:
- The jQuery library (≥1.6.0)
- The
jquery.fullPage.cssCSS file - The
jquery.fullPage.jsJS file or its minified model (i.e.jquery.fullPage.min.js)
You’ll be able to seize a duplicate of these information by visiting the Github repo, by utilizing a package deal supervisor (e.g. Bower), or by loading the required property by means of a CDN (e.g. cdnjs). For this tutorial, we’ll select the final choice.
Place a hyperlink to the CSS file inside the <head> of your HTML doc:
1 |
<hyperlink href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css" rel="stylesheet"> |
…and the JS scripts earlier than the closing <physique> tag:
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> |
2 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script> |
Now, we’re able to dive deeper into the plugin!
Creating Fullpage Sections
First, now we have to specify the sections of our web site. To do that, we assign the part class to the goal parts and wrap them inside a container which has a novel identifier. Later, this identifier might be used to initialize an occasion of fullPage.
By default, the plugin considers the primary part to be the lively one. However, if we would like, we will change that habits by including the lively class to the specified part.
Right here’s the required HTML construction for our instance:
1 |
<div id="fullPage"> |
2 |
<part class="vertical-scrolling"> |
3 |
<h2>fullPage.js</h2> |
4 |
<h3>That is the primary part</h3> |
5 |
<div class="scroll-icon"> |
6 |
<p>Soar into the final slide</p> |
7 |
<a href="#fifthSection/1" class="icon-up-open-big"></a> |
8 |
</div>
|
9 |
</part>
|
10 |
<part class="vertical-scrolling"> |
11 |
<!-- content material right here -->
|
12 |
</part>
|
13 |
<part class="vertical-scrolling"> |
14 |
<!-- content material right here -->
|
15 |
</part>
|
16 |
<part class="vertical-scrolling"> |
17 |
<!-- content material right here -->
|
18 |
</part>
|
19 |
<part class="vertical-scrolling"> |
20 |
<!-- content material right here -->
|
21 |
</part>
|
22 |
</div>
|
Discover that each one sections share a typical class title (i.e. vertical-scrolling) which we’ve chosen to be completely different to the predefined one (i.e. part). That being the case, we have to inform the plugin about this alteration in the course of the initialization course of.
Creating Horizontal Slides
Every of those vertically stacked sections can optionally be a horizontal slider with a number of slides. To establish the slides, we apply the slides class to the goal parts and nest them inside the corresponding part.
Moreover, it’s necessary to say that, technically talking, the primary slide is the same as the dad or mum part. We’ll study this habits quickly sufficient!
Again to our instance, the code snippet beneath exhibits how we arrange two slides inside our fifth part:
1 |
<part class="vertical-scrolling"> |
2 |
<div class="horizontal-scrolling"> |
3 |
<h2>fullPage.js</h2> |
4 |
<h3>That is the fifth part and it accommodates the primary slide</h3> |
5 |
</div>
|
6 |
<div class="horizontal-scrolling"> |
7 |
<h2>fullPage.js</h2> |
8 |
<h3>That is the second slide</h3> |
9 |
<p class="finish">Thanks!</p> |
10 |
</div>
|
11 |
</part>
|
Once more, as you may see, we’ve given our slides a customized class title (i.e. horizontal-scrolling).
Controling the Website Look
We are able to management the looks of our sections and slides by making the most of the accessible configuration parameters. A kind of parameters is the sectionColor property that offers us a straightforward approach to outline the CSS background-color property for every part.
Furthermore, we will set our personal kinds in order to additional customise the pages. For instance, think about that we need to apply a full background picture to the second part. Right here’s how we might accomplish it:
1 |
part:nth-of-type(2) { |
2 |
background: url('https://unsplash.it/1910/1221?picture=626') no-repeat middle / cowl; |
3 |
}
|
Customizing the Navigation Choices
The plugin affords many built-in choices for transferring by means of sections and slides. A few of these choices are activated by default (e.g. mouse wheel and keyboard), whereas others are manually triggered by way of the configuration object (e.g. circle dots).
In our challenge, we need to add further navigation within the type of dots. As well as, we select to cover the left and proper arrows which usually seem on the slider. So, after enabling the dot navigation, we will change its look by overwriting the default kinds. Listed here are the brand new guidelines:
1 |
#fp-nav ul li a span, |
2 |
.fp-slidesNav ul li a span { |
3 |
background: white; |
4 |
width: 8px; |
5 |
top: 8px; |
6 |
margin: -4px 0 0 -4px; |
7 |
}
|
8 |
|
9 |
#fp-nav ul li a.lively span, |
10 |
.fp-slidesNav ul li a.lively span, |
11 |
#fp-nav ul li:hover a.lively span, |
12 |
.fp-slidesNav ul li:hover a.lively span { |
13 |
width: 16px; |
14 |
top: 16px; |
15 |
margin: -8px 0 0 -8px; |
16 |
background: clear; |
17 |
box-sizing: border-box; |
18 |
border: 1px strong #24221F; |
19 |
}
|
And beneath is a screenshot that demonstrates the adjustments we’ve made:
Please word that we embrace the foundations above in our customized stylesheet, therefore avoiding adjustments to the plugin’s CSS file.
Creating Hyperlinks to Sections and Slides
fullPage.js permits us to alter the URL of our web site as we scroll by means of the completely different sections. To take action, we use the anchors parameter. Extra particularly, this parameter is an array that holds the anchor hyperlinks which must be proven on the URL for every part. As an illustration, in our instance we specify the next anchor hyperlinks (which ought to be distinctive):
1 |
anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection'] |
That performed, after we go to the primary part, the location URL can have the #firstSection identifier on the finish, on the second the URL will finish in #secondSection and so forth.
In the identical means, the plugin additionally modifies the URL whereas we scroll by means of the slides. At this level although, now we have to recall that mainly the primary slide (which has an index of 0) is the associated dad or mum part. With that in thoughts, in our challenge after we are within the first slide of the fifth part, the URL will finish within the #fifthSection anchor hyperlink. Loading the second slide of the identical part will set off a URL that ends in #fifthSection/1 as a result of the second slide (which has an index of 1) is definitely our “first” slide.
It’s price mentioning that we will modify the anchors for our slides by including the data-anchor attribute to them with the specified anchor names (which must also be distinctive), similar to the next instance:
<div class="horizontal-scrolling" data-anchor="firstSlide"><!-- extra content material right here --></div>
Observe: To see the URLs altering as you scroll, take a look at the Debug View of our demo.
Linking Menus to Sections and Slides
To raised perceive how we will hyperlink a menu to the fullPage, let’s take a look at our mounted header. The screenshot beneath exhibits the way it seems:
And the HTML:
1 |
<div class="header-top clearfix"> |
2 |
<h1 class="l-left"> |
3 |
<a href="#firstSection">Your Brand</a> |
4 |
</h1>
|
5 |
<a class="l-right toggle-menu" href="#"> |
6 |
<i></i>
|
7 |
<i></i>
|
8 |
<i></i>
|
9 |
</a>
|
10 |
</div>
|
So long as the hamburger menu icon is triggered, the principle menu overlay seems:
Right here’s the code associated to this menu:
1 |
<nav class="cover"> |
2 |
<ul id="menu"> |
3 |
<li data-menuanchor="firstSection"> |
4 |
<a href="#firstSection" title="First Part">First Part</a> |
5 |
</li>
|
6 |
<li data-menuanchor="secondSection"> |
7 |
<a href="#secondSection" title="Second Part">Second Part</a> |
8 |
</li>
|
9 |
<!-- extra checklist objects right here -->
|
10 |
</ul>
|
11 |
</nav>
|
So, to let fullPage know concerning the menu, now we have to register it by utilizing the menu configuration property. Subsequent we want to hyperlink the menu objects to the related sections. To do that, we add the data-menuanchor attribute to our objects with the respective hyperlinks because the values. So long as these values match, the plugin appends the lively class (as we scroll) to the corresponding menu merchandise.
Observe that the plugin doesn’t but append the lively class to the slides. To repair this, we will use both jQuery (finest answer) or CSS. In our instance, we resolve this downside by including the next CSS rule:
1 |
physique.fp-viewing-fifthSection-1 #menu li:last-child a { |
2 |
background: #453659; |
3 |
}
|
See the end result beneath:
In precise reality, we didn’t add the lively class to the second slide. By making the most of the completely different physique courses that the plugin appends to every part and slide, we merely give this merchandise the kinds of the lively class.
Observe: We gained’t focus any additional on how this menu works as a result of it’s past the scope of this tutorial.
Firing Callbacks for Sections
The afterLoad callback is fired as soon as a bit is loaded and the onLeave callback as soon as a person leaves it.
In our challenge, we cover the vertical dot navigation when the fifth part is loaded:
Right here’s how we obtain it:
1 |
afterLoad: operate(anchorLink, index) { |
2 |
if (index == 5) { |
3 |
$('#fp-nav').cover(); |
4 |
}
|
5 |
}
|
6 |
|
7 |
onLeave: operate(index, nextIndex, course) { |
8 |
if(index == 5) { |
9 |
$('#fp-nav').present(); |
10 |
}
|
11 |
}
|
Firing Callbacks for Slides
The afterSlideLoad callback is triggered when a slide is loaded and the onSlideLeave callback when the person leaves it.
In our case, we give attention to the second slide to carry out numerous completely different actions. As an illustration, as soon as the slide is loaded we disable the likelihood for scrolling up. As well as, we modify the background-color property of this slide in addition to the looks of the weather that belong to it.
A part of the code we use is proven beneath:
1 |
afterSlideLoad: operate( anchorLink, index, slideAnchor, slideIndex) { |
2 |
if(anchorLink == 'fifthSection' && slideIndex == 1) { |
3 |
$.fn.fullpage.setAllowScrolling(false, 'up'); |
4 |
$(this).css('background', '#374140'); |
5 |
$(this).discover('h2').css('shade', 'white'); |
6 |
$(this).discover('h3').css('shade', 'white'); |
7 |
$(this).discover('p').css({ |
8 |
'shade': '#DC3522', |
9 |
'opacity': 1, |
10 |
'remodel': 'translateY(0)' |
11 |
});
|
12 |
}
|
13 |
}
|
14 |
|
15 |
onSlideLeave: operate( anchorLink, index, slideIndex, course) { |
16 |
if(anchorLink == 'fifthSection' && slideIndex == 1) { |
17 |
$.fn.fullpage.setAllowScrolling(true, 'up'); |
18 |
}
|
19 |
}
|
Initializing the Plugin
That is the final required step so as to set off the performance of fullPage. Right here, we cross as a part of the configuration object all our customizations. Take a look at the related code snippet beneath:
1 |
$('#fullpage').fullpage({ |
2 |
sectionSelector: '.vertical-scrolling', |
3 |
slideSelector: '.horizontal-scrolling', |
4 |
controlArrows: false |
5 |
// extra choices right here
|
6 |
});
|
Conclusion
On this tutorial, we loved a fast tour of the fullPage.js jQuery plugin and discovered methods to construct a responsive full-page scrolling web site. It’s necessary to know that this sort of web site isn’t appropriate for all of the instances. In addition to their enticing design, they’ve many restrictions and their maintainability might be tough, particularly for dynamic websites. Plus, this format may cause issues with website positioning.
Subsequent Steps
When you’d like to make use of the demo web site as the premise for experimenting with the plugin, I recommend the next challenges:
- Incorporate the superb animate.css library into the challenge and attempt to create scroll-based animations.
- Use your jQuery information to allow the
livelyclass to the second slide (see Linking Menu to Sections and Slides part).
Lastly, you probably have any expertise with one-page websites be happy to share your ideas with us within the feedback beneath!
