Home > Features > Dev Depot: Fullpage.js, Full Pages Are a Scroll Away • Bookmark   • Newsletters   • Register Search Options


Dev Depot: Fullpage.js, Full Pages Are a Scroll Away

Dev Depot: Fullpage.js, Full Pages Are a Scroll Away

June 19, 2014
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 150 votes. Results based on votes submitted by members of XBIZ.net social network.

" 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. "

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.

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 class=”section”>Screen 3</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.


WIA Profile: Mia Saldarriaga

Each month, industry news media organization XBIZ spotlights the career accomplishments and outstanding contributions of Women in Adult. WIA profiles offer an intimate look at the professional lives of... More »

Profile: CAM4 Pushes Boundaries in Adult

CAM4 remains a leading live-streaming adult show platform in what has quickly become a very competitive field. Although CAM4 launched as a brand in 2007, the company behind it has been involved in the... More »

ExoClick’s Publishing Head Is Passionate About Job

ExoClick’s Ada LLlorca, who leads publishing efforts for the ad network, sure loves the adult webmaster space. And maybe that’s why she can honestly say she’s good friends with the company’s... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ World magazine, the industry's leading e-commerce trade publication, delivering in-depth coverage of the online, mobile and ancillary digital markets.



Nov 04 - Nov 06
Edison, New Jersey

2016 Inked Awards

Nov 05 - Nov 05
Edison, New Jersey

XBIZ 2017

Jan 09 - Jan 13
Hollywood, CA

XBIZ Awards 2017

Jan 12 - Jan 12
Los Angeles, CA
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!