Today’s web designers have their work cut out for them in the battle to avoid having a cookie cutter property where a unique design that displays the way its designer intended — regardless of the platform the site is being viewed on — is the intended goal.
Unfortunately, this goal is complicated by the fact that many responsive site designs are far too similar in appearance to satisfy persnickety porn promoters and consumers.
Designed to be responsive for compatibility with desktops, laptops, tablets, phones and more, fullPage.js brings power and flexibility to webmaster’s tool boxes and can be the foundation of even the most advanced of websites.
The similarity in designs stems from the adoption of responsive coding frameworks, such as the popular Twitter Bootstrap — which although it provides a stable foundation for many websites, has resulted in the creation of countless thousands of lookalike sites.
What is needed is a different visual metaphor, but one that is still responsive to the user environment and which also projects a tech-forward feel.
According to its publisher, fullPage.js (www.alvarotrigo.com/fullPage/) is a jQuery plugin that allows users to easily create beautiful and responsive full screen scrolling websites, also known as “single page websites,” in the style popularized by Pinterest — and also provides the ability to add landscape oriented sliders inside sections of the site.
Designed to be responsive for compatibility with desktops, laptops, tablets, phones and more, fullPage.js brings power and flexibility to webmaster’s tool boxes and can be the foundation of even the most advanced of websites.
Using fullPage.js is easy and begins by including either the full or minimized version of the script, along with jQuery and the needed CSS, into the web page’s <head> section.
Webmasters may optionally include the jQuery UI library, to allow additional easing effects beyond the basic animations that are included in the jQuery library, such as linear and swing effects. For example, fullPage uses the easing effect “easeInQuart” by default, so pages also the need to include the jQuery UI library or the customized version which is included in the vendors’ folder (jquery.easings.min.js.).
Coding a web page for fullPage.js is simple and only requires the addition of a CSS class entitled “section” to the DIVs representing each screen-sized “page.” For example, the following HTML code will render a single long web page comprised of three shorter pages, each of which is addressable and can contain any content; including a horizontal slideshow scroller that provides great flexibility in its appearance — an especially handy feature for visually rich adult website applications.
<div id=”fullpage”>
<div class=”section”>Screen 1</div>
<div class=”section”>
<div class=”slide” data-anchor=”slide1”> Slide 1 </div>
<div class=”slide” dataanchor=”slide2”> Slide 2 </div>
<div class=”slide” data-anchor=”slide3”> Slide 3 </div>
</div>
<div class=”section”>Screen 3</div>
</div>
A variety of initialization options are available, controlling parameters such as the horizontal and vertical centering of page content, scrolling activators such as autoscroll, plus keyboard commands, navigation, padding and many other customizable site features.
FullPage is compatible with all modern browsers, as well as certain legacy browsers, such as Internet Explorer 8 and 9, Opera 12 and more. It works with CSS3 and without it, making fullPage.js ideal for serving most web browsers, both old and new.
Currently under active development, the publisher is soliciting suggestions for feature requests and coding style improvements, with a goal of making fullPage.js a great plugin that makes coder’s lives easier. Try it for yourself and see if it makes your life easier — and your clients and customers happier, because they now have a workable site that has a unique appearance with room for easy customization and growth.