Fullpage

Fullpage template and plugin documentation

  1. Home
  2. Templates
  3. Fullpage

Fullpage general settings

Examples

Live example Fullpage template

Installation

<link rel="stylesheet" href='../HTWF/scripts/jquery.fullPage.css'>        
<script src='../HTWF/scripts/jquery.fullPage.min.js'></script>

Usage

<body>
    <header>
        ...
    </header>
    <nav class="fullpage-varrow">
        <div class="arrow down"><span>GO DOWN</span><i class="fa fa-angle-down"></i></div>
        <div class="arrow up"><i class="fa fa-angle-up"></i><span>GO UP</span></div>
    </nav>
    <nav id="fullpage-menu" class="fullpage-menu menu-dots">
        <ul>
            <li><a></a></li>
            <li><a></a></li>
        </ul>
    </nav>
    <div id="fullpage-main">
        <div class="section overlay-container">
             <div class="container content">
                 ...
             </div>
        </div>
        <div class="section overlay-container">
             <div class="container content">
                 ...
             </div>
        </div>
    </div>
    <footer>
    ...
    </footer>
</body>

<div id="fullpage-main" data-options="verticalCentered:false">
    <div class="section overlay-container">
         <div class="container content box-middle">
             ...
         </div>
    </div>
</div> 

<div id="fullpage-main" data-options="verticalCentered:false">
    <div class="section overlay-container">
        <div class="container content box-middle">
            <div class="row vertical-row">
                <div class="col-md-8">
                    ...
                </div>
                <div class="col-md-4">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

Main settings

Name Type Description
HTML initialization HTML Initialization require ID id="fullpage-main". No others settings are required.
Javascript initialization Javascript You can initialize the Fullpage via Javascript by remove ID id="fullpage-main" and with this function: 
$(document).ready(function () {
    $("#my-id").fullpage();
});
Settings HTML Most of settings can be passed through data-options attribute data-options="option:value,option:value, ...".
Example 
<div id="fullpage-main" data-options="verticalCentered:false">
    ...
</div>
Full options here.
Arrows top - bottom HTML To add top and bottom arrows insert below code just before fullpage-main container, if you not want arrows remove this code. Arrows animation require animation component. <link rel="stylesheet" href='../HTWF/css/animations.css'> 
<nav class="fullpage-varrow">
    <div class="arrow down"><span>GO DOWN</span><i class="fa fa-angle-down"></i></div>
    <div class="arrow up"><i class="fa fa-angle-up"></i><span>GO UP</span></div>
</nav>
You can use 3 icons family sets: Font Awesome, Icon Mind Solid, Icons Mind Line. Click the buttons below for the complete icons lists.
Font Awesome icons list Icons Mind icons list
To change a icon replace the class fa fa-icon-name with the choosen icon class.
Arrows top - bottom position HTML To set right position add class right to arrows container, for left position use class left. Example: <nav class="fullpage-varrow right"> ... </nav>.
Arrows style HTML To set white circle style for vertical arrows, add class varrow-circle to arrows container. Example: <nav class="fullpage-varrow varrow-circle"> ... </nav>.
To set white circle style for horizontal arrows, add class arrow-circle to arrows container. Example: <nav class="fullpage-arrow arrow-circle"> ... </nav>.
Animations HTML To start a animation on the visible section add attribute data-fullpage-anima="animation-name". All features of animation component continue to work.
Plugin dependency

This feature require Animations component (../HTWF/css/animations.css)

Animations documentation here
Centered section HTML You can center a section in two ways:
1 ) With the default centering, you not need to do nothing, but default centering have some limitation.
2 ) With the Framework Y centering, it auto calculate correct height by subtract fixed menus height and it center only contents into container with class box-middle. To use this feature you must add attribute data-options="verticalCentered:false" to fullpage-main object and add class box-middle to container object of section.
Example:

<div id="fullpage-main">
    <div class="section overlay-container">
        <div class="container content box-middle">
            ...
        </div>
    </div>
    ...
</div>
Centered section HTML To set a full centering, also into a section, use the row vertical centered component. Row vertical centered component documentation here
Center adjustment HTML If the contents are not perfectly centered to the screen you can adjust it by add attirbute data-offset="123" to fullpage container. Ex. <div id="fullpage-main" data-offset="60"> ... <div>.
Horizontal arrows adjustment HTML If the right \ left arrows are not perfectly centered to the screen you can adjust its by add attirbute data-horizonal-arrow-offset="123" to fullpage container. Ex. <div id="fullpage-main" data-horizonal-arrow-offset="-30"> ... <div>.
Mobile fullpage HTML By default fullpage is converted into a class one page website on mobile. To mainatin the fullPage mode also on mobile use the option data-options="mobileMode:fullpage".

Sections

Examples

Image Parallax Slider Single slider Video Single video

Usage

<div id="fullpage-main">
    ...
    <div class="section overlay-container" style="background-image:url('http://www.framework-y.com/images/thumb-hd.png');">
        <div class="container content box-middle">
            ...
        </div>
    </div>
    ...
</div> 

<div id="fullpage-main" data-options="scrollBar:true">
    ...
    <div class="section overlay-container" data-parallax="scroll" data-position="top" data-image-src="http://www.framework-y.com/images/thumb-hd.png" data-natural-height="1080" data-natural-width="1920" data-bleed="0">
        <div class="container content box-middle">
            ...
        </div>
    </div>
    ...
</div>  

<div id="fullpage-main">
    ...
    <div class="section overlay-container">
      <div class="background-page">
            <div class="flexslider slider" data-options="directionNav:false,animation:fade">
                <ul class="slides">
                    <li>
                        <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-hd.png')"></div>
                    </li>
                    <li>
                        <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-hd.png')"></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container content box-middle">
            ...
        </div>
    </div>
    ...
</div>  

<div class="background-page overlay-container">
    <div class="flexslider slider" data-options="directionNav:false,animation:fade,slideshowSpeed:5000">
        <ul class="slides">
            <li>
                <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-hd.png')"></div>
            </li>
            <li>
                <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-hd.png')"></div>
            </li>
        </ul>
    </div>
</div>
<div id="fullpage-main">
    <div class="section overlay-container">
        <div class="container content box-middle">
            ...
        </div>
    </div>
    <div class="section overlay-container">
        <div class="container content box-middle">
            ...
        </div>
    </div>
</div>  

<div id="fullpage-main">
    <div class="section overlay-container">
        <div class="background-page" style="background-image:url(video-poster.jpg)">
            <video loop poster="video-poster.jpg">
                <source src="video.mp4" type="video/mp4">
            </video>
        </div>
        <div class="container content box-middle">
            ...
        </div>
    </div>
    <div class="section overlay-container">
        <div class="background-page">
            <div data-video-youtube="NA6fPQTd22M"></div>
        </div>
        <div class="container content box-middle">
            ...
        </div>
    </div>
</div>  

<div class="background-page overlay-container" style="background-image:url(video-poster.jpg)">
    <video autoplay="autoplay" loop="loop" poster="video-poster.jpg" class="background-fullscreen">
        <source src="video.mp4" type="video/mp4">
    </video>
</div>
<div id="fullpage-main">
    <div class="section overlay-container">
        <div class="container content box-middle">
            ...
        </div>
    </div>
    <div class="section overlay-container">
        <div class="container content box-middle">
            ...
        </div>
    </div>
</div>  

<div id="fullpage-main">
    <div class="section overlay-container">
        <div class="container content box-middle">
            ...
        </div>
    </div>
    <footer class="section footer-base fp-auto-height">
        <div class="container content box-middle">
            ...
        </div>
    </div>
</div>

Main settings

Name Type Description
Image section CSS style Add style style="background-image:url('image.jpg');" to section object.
Isolated images background HTML If you need to add single images as background add its to <div class="background-page"> ... </div>. Add these classes for set the image position:
CSS class Description Example
bg-right Right position <img class="bg-right" src="image.png" />
bg-left Left position <img class="bg-left" src="image.png" />
bg-bottom Bottom position <img class="bg-bottom" src="image.png" />
bg-top Top position <img class="bg-top" src="image.png" />
bg-center Horizontal center position <img class="bg-center" src="image.png" />
bg-middle Vertical middle position <img class="bg-middle" src="image.png" />
Example: 

<div class="section overlay-container">
    <div class="background-page" data-fullpage-anima="fade-right" data-timeline="desc">
        <img class="bg-right bg-middle anima" src="image.png" style="margin-top: -250px;" />
        <img class="bg-right bg-middle anima" src="image.png" style="margin-top: -50px;" />
        <img class="bg-left bg-bottom anima anima-fade-left" src="image.jpg" />
    </div>
    <div class="container content text-center box-middle">
        ...
    </div>
</div>
Top area HTML To add top area into a section add HTML code like example: 
<div class="section">
   <div class="top-area">
        <div class="container">
            ...       
        </div>
    </div>
    <div class="container content text-center box-middle">
        ...
    </div>
</div>
Bottom area HTML To add bottom area into a section add HTML code like example: 
<div class="section">
    <div class="container content text-center box-middle">
        ...
    </div>
    <div class="bottom-area">
        <div class="container">
            ...       
        </div>
    </div>
</div>
Footer area HTML To add a bottom section with partial height, perfect for footer, add a new section at bottom and add class fp-auto-height. Check example above for more details.
Image parallax section Mixed 1 ) Add attributes data-options="scrollBar:true" to fullpage-main object.
2 ) Add attributes data-parallax="scroll" data-position="top" data-image-src="image.jpg" data-natural-width="123" data-natural-height="123" data-bleed="0" to section object.
Plugin dependency

This feature require Parallax Plugin (../HTWF/scripts/parallax.min.js)

Parallax documentation here
Slider section HTML Insert slider code of examples above into section object, at the top, first row. Slider must use setting animation:fade.
Plugin dependency

This feature require Flex Slider Plugin (../../HTWF/scripts/flexslider/flexslider.css and ../../HTWF/scripts/flexslider/jquery.flexslider-min.js)

Slider documentation here
Slider single section HTML Insert slider code of examples outside the fullpage-main object, before it.
Video section HTML Insert video code of examples above into section object, at the top, first row. You can use also Youtube videos with this code:

<div class="background-page" style="background-image:url(video-poster.jpg)">
    <div data-video-youtube="NA6fPQTd22M" video-quality="hd"></div>
</div>
Video documentation

Video Youtube feature is part of background video section. Complete documentation here

On mobile the video is hidden and replaced by poster image.
Video single section HTML Insert video code of examples outside the fullpage-main object, before it.
Overlay pattern HTML You can add a overlay to every background like images, videos and sliders. Insert it into <div class="background-page"> ... </div> object, in first row.
Example:

<div class="background-page">
    <div class="bg-overlay line-45"></div>
    <div data-video-youtube="NA6fPQTd22M" video-quality="hd"></div>
</div>
Overlay pattern documentation

Overlay pattern is a feature of CSS and Javascript. Complete documentation here

Mobile background CSS class To set section images as background also on mobile add class background-mobile to section object.

Menus

Examples

Classic Icons with text Tooltip icons menu Dots menu

Usage

<div class="fixed-top">
    <div id="fullpage-menu" class="full-width-menu">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="nav over inner nav-center">
                        <li class="active"><a >Home</a></li>
                        <li><a>Our services</a></li>
                        <li><a>Portfolio</a></li>
                        <li><a>Testimonails</a></li>
                        <li><a>Contact us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div> 

<nav id="fullpage-menu" class="fullpage-menu">
    <ul>
        <li>
            <a><i class="fa fa-home"></i><span>Home</span></a><hr />
        </li>
        <li>
            <a><i class="fa fa-bolt"></i><span>Our services</span></a><hr />
        </li>
        <li>
            <a><i class="fa fa-coffee"></i><span>Portfolio</span></a><hr />
        </li>
        <li>
            <a><i class="fa fa-photo"></i><span>Gallery</span></a><hr />
        </li>
        <li>
            <a><i class="fa fa-comments-o"></i><span>Contact us</span></a><hr />
        </li>
    </ul>
</nav> 

<nav id="fullpage-menu" class="fullpage-menu">
    <ul>
        <li>
            <a data-toggle="tooltip" data-placement="left" title="Home"><i class="fa fa-home"></i></a><hr />
        </li>
        <li>
            <a data-toggle="tooltip" data-placement="left" title="Our services"><i class="fa fa-bolt"></i></a><hr />
        </li>
        <li>
            <a data-toggle="tooltip" data-placement="left" title="Portfolio"><i class="fa fa-coffee"></i></a><hr />
        </li>
        <li>
            <a data-toggle="tooltip" data-placement="left" title="Testimonials"><i class="fa fa-users"></i></a><hr />
        </li>
        <li>
            <a data-toggle="tooltip" data-placement="left" title="Contact us"><i class="fa fa-comments-o"></i></a><hr />
        </li>
    </ul>
</nav>  

<nav id="fullpage-menu" class="fullpage-menu menu-dots">
    <ul>
        <li><a data-toggle="tooltip" data-placement="left" title="Menu text"></a></li>
        <li><a data-toggle="tooltip" data-placement="left" title="Menu text"></a></li>
        <li><a></a></li>
        <li><a data-toggle="tooltip" data-placement="left" title="Menu text"></a></li>
        <li><a></a></li>
    </ul>
</nav> 

<div class="navbar navbar-inner">
    <div class="navbar-toggle"><i class="fa fa-bars"></i><span>Menu</span><i class="fa fa-angle-down"></i></div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav nav-center inner fullpage-inner-menu">
            <li class="current-active active"><a href="#">Fintech</a></li>
            <li><a href="#">Consulting</a></li>
            <li><a href="#">Management</a></li>
            <li><a href="#">Financial</a></li>
        </ul>
    </div>
</div>

Main settings

Name Type Description
Setting new menu HTML You can set every <ul><li><a></a></li></ul> object as a fullpage menu. You need to add ID id="fullpage-menu" to container object. Menu links must not have attribute href. Menu is auto sync with the fullpage sections, by calculate items index.
Menu position CSS class Default menu position is right. You can set left position by add class left to menu object. Remove this class for right position.
Menu icons Mixed You can use 3 icons family sets: Font Awesome, Icon Mind Solid, Icons Mind Line. Click the buttons below for the complete icons lists.
Font Awesome icons list Icons Mind icons list
To change a icon replace the class fa fa-icon-name with the choosen icon class.
Menu anchors names HTML Default menu anchors are like section-1, section-2 .... To set custom anchor add attribute data-id="your-name" to section objects.
Ex. <div data-id="home" class="section"></div>
Menu classic HTML Menu classic is part of menu inner horizontal component. Complete documentation here
Menu tooltip HTML To show a tooltip text on item menu on mouse hover add attributes data-toggle="tooltip" data-placement="left" title="your text". Change data-placement="left" to data-placement="right" for left menu position.
Plugin dependency

This feature require Popovers and tooltip Plugin (../HTWF/scripts/bootstrap/js/bootstrap.popover.min.js)

Popovers and tooltip documentation here
Inner slides menus HTML You can add seconday menus to each section for navigate throw the slides of current section with code of example above. To positionate it on top or bottom insert it into a top-area or bottom-area container. To maintain the menu always visible inser it outside the <div class="slide"> ... </div> elements.
Top logo HTML You can add a logo to laterl menus by insert the code <div class="fp-menu-brand scroll-show"><img src="../images/restaurant/logo.png" /></div> into the fullpage menu.

Example: <nav id="fullpage-menu" class="fullpage-menu"><div class="fp-menu-brand scroll-show"><img src="../images/restaurant/logo.png" /></div><ul> ... </ul></div>.

Horizontal fullpage

Examples

Base Video Slider

Usage

<body>
    <header>
        ...
    </header>
    <nav class="fullpage-arrow">
        <table class="arrow left">
            <tr>
                <th><i class="fa fa-angle-left"></i></th>
                <th><span>BACK PAGE</span></th>
            </tr>
        </table>
        <table class="arrow right">
            <tr>
                <th><i class="fa fa-angle-right"></i></th>
                <th><span>NEXT PAGE</span></th>
            </tr>
        </table>
    </nav>
    <div class="fixed-top">
        <div id="fullpage-horizontal-menu" class="full-width-menu">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <ul class="nav over inner">
                            <li class="active"><a>Home</a></li>
                            <li><a>Our services</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="fullpage-main">
        <div class="section">
            <div class="slide overlay-container">
                <div class="container content text-center box-middle">
                    ...
                </div>
            </div>
            <div class="slide overlay-container">
                <div class="container content text-center box-middle">
                    ...
                </div>
            </div>
        </div>
    </div>
    <footer>
    ...
    </footer>
</body> 

<nav id="fullpage-horizontal-menu" class="fullpage-horizontal-menu menu-dots">
    <ul>
        <li class="active"><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
    </ul>
</nav>

Main settings

Name Type Description
Settings Information Horizontal fullpage is a single section object with multiple slides objects. You can use all features of vertical fullpage.
Setting new menu HTML You can set every <ul><li><a></a></li></ul> object as a fullpage menu. You only need to add ID id="fullpage-horizontal-menu" to container object. Menu links must not have attribute href. Menu nav must not use class navbar-nav. Menu is auto sync with the fullpage sections, by calculate items index.
Arrows right - left HTML To add right and left arrows insert below code just before fullpage-main container, if you not want arrows remove this code. Arrows animation require animation component. <link rel="stylesheet" href='../HTWF/css/animations.css'>
Example: 

<nav class="fullpage-arrow">
    <table class="arrow left">
        <tr>
            <th><i class="fa fa-angle-left"></i></th>
            <th><span>BACK PAGE</span></th>
        </tr>
    </table>
    <table class="arrow right">
        <tr>
            <th><i class="fa fa-angle-right"></i></th>
            <th><span>NEXT PAGE</span></th>
        </tr>
    </table>
</nav>


You can use 3 icons family sets: Font Awesome, Icon Mind Solid, Icons Mind Line. Click the buttons below for the complete icons lists.
Font Awesome icons list Icons Mind icons list
To change a icon replace the class fa fa-icon-name with the choosen icon class.

Complete documentation and external resources

Documentation Plugin website Github page