How to Create a Dynamic Website in 30 Minutes with fullpage.js
A Guest Post By: Raji Ayinla
When you first set out to build a website, either for a client or for your personal use, there’s an itch to do everything on your own. We sometimes forget that part of being a good developer isn’t only being able to cook up performant code, it’s knowing the tools we have at hand so that the wheel doesn’t have to keep being reinvented. Getting acquainted with an ever-growing list of tools is just part of the job.
With that said, meet fullpage.js, a JavaScript library that makes building a satisfying user experience a breeze. Of course, this library isn’t a one size fits all. The perfect use case is for media or brand focused websites that have high-quality images to show off. If your project fits this case, or you just want to build a slick interface for the heck of it, stick around. I’m going to show you how effortless website-building with fullpage.js is.
In order to get the most out of this library, you should learn how to bootstrap your HTML, CSS, and JavaScript files with what I call fullpage code.
Let’s begin by bootstrapping our index.html
First we’ll add some much needed script and link tags into the <head> tag. You can avoid this step with npm install fullpage.js
Once you have those links ready, we can start learning some of the main scaffolds. You can choose to have vertical scrolling by sectioning your website. Your “section” divs should always be wrapped by a “fullpage” div.
You can also allow for some sliding action:
It’s good practice to wrap slides with a .section div even if you only wish to have a single slider in your web app. At this point we’ve gone through the basic setup for a fullpage app.
If you want to integrate a footer within .fullpage , write:
<div class= ‘section fp-auto-height’></div>
You can also have both footer and navbar hanging outside of the .fullpagewrapper. Have fun playing around with your options.
After you’re satisfied with your layout, move over to your CSS file and apply a CSS reset. Without the reset, you’re sections aren’t going to take up the full page(get it?).
This is a good time to familiarize yourself with fullpage.css, because you may want to tweak some of the default styles to suit the design needs of your project. Here’s the link to all of the selectors: click me
Let’s initialize the app
Finally, calling $(‘#fullpage’).fullpage(); within a$(document).ready(function{}) is all you need to do to achieve full functionality.
The end result will look something like what you see below, minus the menu, of course. More on that later.
Let’s customize this bad boy/girl
One of the most powerful aspects of this library is its easy customization. It offers a wide range of options that can be broken down into four sections: Navigation, Scrolling, Accessibility, Design, and Events.
Navigation
menu: '#menu',
lockAnchors: false,
anchors:['page1', 'page2','page3','page4'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'], showActiveTooltip: false,
slidesNavigation: false,
slidesNavPosition: 'bottom'Simply setting navigation to true gives you a beautiful visual menu right out of the box.
If you want to change the color/size/position of the menu, dive into fullpage.css and pull out the .fp-nav related selectors. You can start overwriting some of the properties without a hassle. Remember to mark your styles as !important to override the default styles.
If you loath the built-in nav, you can build the classic navigation with the following HTML:
The menu should be placed outside of the fullpage wrapper for absolute positioning over all the sections. Also, the href values should be equivalent to the anchors: and the id should match the value of the menu key:
menu: #menu,
anchors:['page1', 'page2','page3','page4'],Lastly, the slides navigation and navigation position are self-explanatory.
Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,The scrolling is also rather easy to tinker around with, but the major blow here is that a great number of features (which are not listed here) are hidden behind a paywall. From among them, parallax and continuous horizontal (carousel)scrolling are two of the most egregious omissions. Without continuous horizontal scrolling, after reaching the last slider, you’re forced to go back in reverse, which makes for awkward navigation. loopHorizontal at least automates the task of backtracking to the original slide.
There are workarounds, but having to create your own slider almost defeats the purpose of using this library. Almost.
If you really need a carousel, I’ll show you a nice little hack later on so stick around.
Design and Accessibility
controlArrows: true,
verticalCentered: true,
sectionsColor : [‘#ccc’, ‘#fff’],
paddingTop: ‘3em’,
paddingBottom: ‘10px’,
fixedElements: ‘#header, .footer’,keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
The most noteworthy option here the ability to set controlArrows to false. 1) because they’re pretty ugly and 2) because we get to take advantage of the methods and events.
Methods and Events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){}, afterResize: function(){}, afterResponsive: function(isResponsive){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}There are a ton of useful methods. Check out the full list of methods here. What I’m going to hone in on are the $.fn.fullpage.moveSlideRight(); and $.fn.fullpage.moveSlideLeft(); These two methods are all you need to initiate the sliding animation after you call onclick event listeners on your custom arrows.
CSSing Images
You’re going to want to take advantage of the onscreen real estate by linking high quality images, I bet. Well, if you want seamless integration, you should add an id to every slide you make and set set a background property to every one of them in CSS.
This will allow you to overlap text and other elements that are unique to each slide.
Bonus: Hacking Continuous Scroll
Alright. As promised, I’ll show you how to implement continuous scroll.
In order to allow for continuous scroll, we’ll be using Slick. I’m not going to go in-depth, I’ll only show you how to marry it with fullpage.js. Check out the Slick docs here.
This is going to get a little dirty here, so follow along.
First, disable your fullpage control arrows by setting controlArrows: to false.
Second, add slick.min.js before the closing body tag.
...
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
</body>Third, add arrows to sections that contain carousels.
<div class=’slick-prev’>
</div>
<div class=’slick-next’>
</div>Third, in your js file, initialize slick and set variableHeight to true. For good measure, set the arrow keys to their corresponding selectors.
Important: slick should be initialized after fullpage
$(‘.fp-slidesContainer’).slick({
//we need to set fullpage-style width and height later
variableHeight: true,
nextArrow: '.slick-next',
prevArrow: '.slick-prev'})
Fourth, we need to add event listeners for our buttons. There’s nothing magical going on here. We’re just using Slick’s functions to move the carousel forward and back.
$(‘.slick-next’).on(‘click’, function(e){
$(‘.fp-slidesContainer’).slick(‘slickNext’);
})$(‘.slick-prev’).on(‘click’, function(){
$(‘.fp-slidesContainer’).slick(‘slickPrev’);
})
Finally, we can work on some CSS. You can design your arrows however you want to design them. Or you can just use images rather than CSSing geometric shapes. Whatever floats your boat.
After you’ve styled the arrows, the last problem to resolve is the width and height issue. To fix that, we have to target a selector called .slick-slide. Feel free to adjust the width and height to your liking.
.slick-slide {
height: 100px;
width: 11% !important;
}And that’s that. You now have continuous sliding action. You’ll also notice that you get the mouse drag for free as well. Actually, there are a ton of cool effects that you should explore.
If you’re also dying for some parallax, you should check out the Parallax.js built by Wagerfield and Guglierie.
I hope you enjoyed this guest post! This article was written by Raji Ayinla exclusively for CodeBurst.io
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
