fullPage.js demo & solution

I've been seen a lot of websites built by fullPage.js,even the Apple's iphone official page. The javascript designed much mordern and concise ,which can be used everywhere especially with animation(but I don't talk about in this article).

The official gitHub from https://github.com/alvarotrigo/fullPage.js

The demo I made can be dowloaded from here

1.including the files in the head.

<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="vendors/jquery.easings.min.js"></script>


<!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>

This is how I organized my fold. 
C:\..\fullpage-coffee\style\main.css
C:\..\fullpage-coffee\js\main.js

2.HTML structure

 

Menu id is for anchor everypage in javascript.
menu: (default false) A selector can be used to specify the menu to link with the sections. This way the scrolling of the sections will activate the corresponding element in the menu using the class active. This won't generate a menu but will just add the active class to the element in the given menu with the corresponding anchor links. In order to link the elements of the menu with the sections, an HTML 5 data-tag (data-menuanchor) will be needed to use with the same anchor links as used within the sections.

Fullpage id is for the main content of page.I give it four section,which means four slides verticlly,having same class. Section2 is a gallary with six images,hovering with details. 

Section3 is a slider with four slides with navigation at the bottom and the control arrows. 
Section4 is a contact form and a footer intracting with users.

3.css styling

I import the font called Lobster from google fonts

Menu should be hide firstly,which I using display:none. And make sure it's on the top of the layer.

Section1 

Section2

Make sure every image is in the box menu-s,which can be overflow:hidden. When hovered,the images animate zoom-out. And the details slide out from the top.

Section3

Section4

Contact form is concise with name,email and message. I add a few animation like hovering border and changing background-color.

4.JS 

Anchor and menu are setting the clickable menu.

• anchors: (default []) Defines the anchor links (#example) to be shown on the URL for each section. Anchors value should be unique. The position of the anchors in the array will define to which sections the anchor is applied. (second position for second section and so on). Using anchors forward and backward navigation will also be possible through the browser. This option also allows users to bookmark a specific section or slide. Be careful! anchors can not have the same value as any ID element on the site (or NAME element for IE). Now anchors can be defined directly in the HTML structure by using the attribute data-anchor.

         Note: the menu element should be placed outside the fullpage wrapper in order to avoid problem when using css3:true. Otherwise it will be appended to the body by the plugin itself.

• navigation: (default false) If set to true, it will show a navigation bar made up of small circles.
• navigationPosition: (default none) It can be set to left or right and defines which position the navigation bar will be shown (if using one).
• loopBottom: (default false) Defines whether scrolling down in the last section should scroll to the first one or not.

• slidesNavigation: (default false) If set to true it will show a navigation bar made up of small circles for each landscape slider on the site.
• slidesNavPosition: (default bottom) Defines the position for the landscape navigation bar for sliders. Admits top andbottom as values. You may want to modify the CSS styles to determine the distance from the top or bottom as well as any other style such as color.

These are what I apply on the page, you can check other options here

Meanwhile, I add another click function.
When doubleclike the page,the menu come out,users set the display is block.
When clike the page or clike the menu link,users set the display is none.
It's an easy way to show uo menu with clear and concise navigation.


When I STUCK during coding?
1.menu hidden
First time when I want to hide the menu, the css style opacity is my first choice. But the menu ocuupied the position and mislead my fullpage organization.
I find out opacity hidden div though,still there.Such as visibility: hidden;

2.after setting border-radius, when hoveing or focusing,input text border so ugly?
Because it's used to be rectangular.   
ouutline:none helps a lot.

3.how to change the navigation dot color?

#fp-nav ul li a span, .fp-slidesNav ul li a span{
background:#fff    !important;
}