Using FullPage.js to Spice Up Your Landing Page
With the modern web constantly demanding more visual interaction for its visitors to keep them engaged in the ever-evolving online landscape, new plugins and frameworks are being developed to aid in the creation of such experiences. Frameworks such as Twitter Bootstrap allow website builders to construct engaging web presences without having to start from scratch every time while other plugins provide the necessary resources for implementing interactive functionality such as parallax design.
A terrific framework that we have come across recently is fullPage.js, a Javascript library created by Alvaro Trigo that allows for full-page slides that transition on scroll and produce a fascinating storytelling effect for online visitors.
With fullPage.js, the website is constructed out of “sections” that take up the full browser window and transition to the next section as the user scrolls so that they can jump from slide to slide. The plugin dynamically adds and removes CSS classes based on scrolling which allows for transition effects and animations to occur as the visitor navigates through the page. In addition, various options for adding additional navigation elements and even horizontally-sliding panels are included. There are several other customizations that can be made using the framework as well and I encourage any website builder to delve into the documentation to learn more about what is possible.
A few of the reasons to use fullPage.js include:
- It's highly customizable and easy to use
- It provides an engaging experience with a storytelling format
- It works for both old and modern browsers
- It includes the capability of horizontal slide scrolling in addition to vertical scrolling
- It has robust online documentation
An example of our implementation of fullPage.js is the landing page for ZIP for Zazzle, and Unleashed product for improving the sales management and distribution process for Zazzle Makers. Have any questions about using this framework or about web development in general? Contact us today!