How to

Build full browser screen designs with fullPage.js

Use fullPage.js to create full browser sized section designs to your single web page layout.

screen-shot-2016-11-15-at-17-56-49

Single page websites have been growing in momentum for the past five years and often designers want each section of their site to fill the entire browser window. This can be a tricky feat to accomplish but thanks to fullPage.js it’s become incredibly simple.

The kinds of pages that fit into this kind of site well, are the pages that have very little text and are really trying to impress the user with imagery. If there’s too much text then there’s a chance that at some point the text will require scrolling and that defeats the object of each section filling the browser. Sites such as Apple use this kind of effect well when they are showing off their iPhone and trying to show off the product with good clean photography. In the tutorial we are going to focus on showing off as many features that can be achieved with fullPage.js for you.

The first screen will use a static, fixed header bar, which will be present on all the screens, this is a useful feature as branding. The first screen will have full background video with text and image over the top, while the second screen will make use of a carousel. All the navigation is handled by fullPage.js so there’s less for us. The final pages will use custom animation of different elements on the screen.


Get the full code for this tutorial now


1. Starting up

Open the entire start project in a code editor such as Brackets and inside the body tag of index.html add the code shown here. The header is going to be a static header that is fixed in place, it therefore goes outside of the ‘fullpage’ div tag. All other content for each section will go in there.

<div id="header">
<div id="hwrap"><img src="img/rocket.png" />
<h2>Rocket Fitness App</h2>
&nbsp;

</div>
</div>
&nbsp;
<div id="fullpage">
<div id="staticImg">
<div class="imgsContainer"><img id="fitbit" src="img/fitbit.png" alt="iphone" /></div>
&nbsp;

</div>
&lt;!— all other html content goes here &gt;

</div>

2. The first page

Now the code here will develop the first page. This will have a full screen video looping in the background. You can download the video at http://www.openfootage.net/?cat=17. Use Miro Video converter to make MP4 and WebM versions of the video. Over this is the heading and logo image.

<div id="&quot;section1”" class="section"><video id="myVideo" autoplay="autoplay" loop="loop" muted="" width="300" height="150">
<source src="img/sky.mp4" type="video/mp4" />
<source src="img/sky.webm" type="video/webm" />
</video>
<div class="layer"><img src="img/rocket.png" />
<h1>Watch Your Fitness Take Off</h1>
<h2>with Rocket Fitness</h2>
</div>
</div>

3. Adding CSS

Now open the ‘page.css’ file in the CSS folder. You will see that there is already some CSS written for certain elements. The CSS code being added here though, is setting up the styling for the first page section that was added in the last step. This code can be added anywhere in the CSS document.

#section1 {
padding: 40px 0;}
#section1 h1, #section1 h2{
color: #ffbc80;}

4. Sizing the Video

Now the video is set to fill the entire size of the first section of the page. This will not be stretched but just fill the size of the browser screen. The fullPage.js library will take care of making the section fit the browser and so this video will fit that section.

#myVideo {
position: absolute;
right: 0; bottom: 0; top: 0; left: 0;
width: 100%; height: 100%;
background-size: 100% 100%;
background-color: black;
background-position: center center;
background-size: contain;
object-fit: cover;
z-index: 3;}

5. Positioning the text

Over the top of the video the text and logo image will be positioned in the layer class. The overflow is set to be hidden in case the browser tries to render the video if it overhangs the size of the browser screen. Save these files and you will see the first section in the browser.

#section1 .layer {
position: absolute;
z-index: 4;
width: 100%;
left: 0;
top: 28%;}
#section1 {
overflow: hidden;}

6. Adding section 2

Move back into the HTML page and add the code here before the closing div tag of the ‘fullpage’ id. This second screen will contain horizontal scrolling slides like a carousel with the navigation being automatically set up by the fullpage.js library. Each slide has a heading and we’ll add an image in the CSS.

<div id="&quot;section2”" class="section">
<div id="slide1" class="slide active">
<h1>Personal Training</h1>
</div>
<div id="slide2" class="slide">
<h1>Monitor Your Progress</h1>
</div>
<div id="slide3" class="slide">
<h1>Set Your Targets</h1>
</div>
</div>

7. Setting up the slides

Moving back into the CSS, this adds the background size to cover the full size of the browser for the images. The heading is given a little drop shadow just to make sure it’s visible regardless of what part of the image the text overlaid on.

#section2 {
background-size: cover;}
#section2 h1{
color: #fff617;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);}
.slide {
background-size: cover;
padding: 6% 0 0 0;}

8. Adding the images

Now the slide backgrounds are added for each of the slides. Save both HTML and CSS then refresh the page in your browser to see the updates. The slides move horizontally so that we have browsing in two different directions, with the rest of the page working vertically.

#slide1 {
background-image: url(../img/slide1.jpg);}
#slide2 {
background-image: url(../img/slide2.jpg);}
#slide3 {
background-image: url(../img/slide3.jpg);}

9. Creating the third page

In the HTML add the third section to create the third page. As previously add this before the final div tag of the id “fullPage”. Here there are several images and text being displayed on the page. Add your own text to this or some placeholder text to the document.

<div id="&quot;section3”" class="section moveDown">
<div class="wrap">
<div class="imgsContainer"><img id="winphone" src="img/test2.png" alt="iphone" />
<img id="iphone-angle" src="img/test.png" alt="iphone" width="650" />
<img id="nexus" src="img/nexus.png" alt="iphone" /></div>
<div class="box">
<h2>Platform Power</h2>
Text content.
</div>
</div>
</div>

10. Styling this section

Switch over to the ‘page.css’ file now and start to add the code for styling this third section of content. Here the positioning of the image and image container is added. The ‘moveUp’ and ‘moveDown’ is actually switched in and out with javascript in the ‘main.js’ file.

#section3 img {
position: absolute;}
#section3.moveUp .imgsContainer {
top: 50%;}
#section3.moveDown .imgsContainer, #staticImg .imgsContainer {
top: 90%;}

11. Image containers

Here the code moves on to placing the image containers in the third and fourth section in specific places. The image of the fitbit is also positioned as that is the staticImg that is referred to here. The fitbit image was added in the first step of the tutorial.

#section3 .imgsContainer, #staticImg .imgsContainer, #section4 .imgsContainer {
position: absolute;
z-index: 1;
left: 50%;
display: block;
margin-top: -288px;
margin-left: -636px;
width: 0; height: 0;
transition: all 1.2s ease-in-out;}

12. Fine tuning of positions

When section 3 comes into the viewport of the browser the ‘active’ class is added to it so that it then the image can take a new position as shown here. The box in this section is the text box and it’s placed around the images shown on the screen as part of the design for this area.

.#section3.active .imgsContainer {
top: 50%;}
#section3 .box {
top: 28%;
left: 42%;
position: absolute;
width: 582px;}

13. Positioning device images

The images of the devices in this section are all laid out to place them in the right spot. Here you can see all of the elements are placed in just the right spot with their positioning in the left or top positions. These images are all located inside the image container.

#iphone-angle {left: -160px;}
#winphone {top: -144px;}
#nexus {top: 320px; left: 448px;}
#fitbit {top: -100px; left: 106px;
position: absolute;}

14. Up and down

The move down and move up classes are added with javascript and here you can see that the content moves up and down on the y axis. It’s given a translation in 3D as this is offloaded to the GPU so will always appear much smoother on the screen as animation.

#staticImg.moveDown {-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);}
#staticImg.moveUp {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);}

15. Animation time

Here the static image is placed exactly on the screen and it is given a transition time of 0.7s. Look in the final folder to see all of the browser prefixes to the transition code which is not shown here for brevity. This will place it in exactly the right spot to be displayed on the screen when it starts, then the new position will make it move.

#staticImg {
display: block;
position: absolute;
z-index: 200;
top: 200%; left: 0;
width: 100%;
min-width: 980px;
height: 100%;
transition: all 0.7s ease-out;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;}

16. Final animations

By adding new top positions for various elements within the static image div these will be moved when the ‘moveDown’ class is added dynamically. Save the page and you will see the movement in the browser as you navigate to the third section of the page.

#staticImg.moveDown .imgsContainer {top: 50%;}
#staticImg.moveDown img {top: 155px;}
#staticImg.active .imgsContainer {top: 50%;}
#staticImg.active img {top: 487px;}

17. Fourth page section

Back into the HTML now to add the fourth section to the one page site. This follows the same principles as seen when previously adding the HTML content in that all of the sections are wrapped in the div with the id of “fullPage”. Save the page and switch over into the CSS again.

<div id="&quot;section4”" class="section moveDown">
<div class="wrap">
<div class="box">
<h2>All your accessories</h2>
Text content.
</div>
</div>
<div class="imgsContainer"><img src="img/watches.png" alt="watches" /></div>
</div>

18. Fourth CSS

The CSS layout is defined now for the fourth section. This only has one image so there is much less to style up. Here the image and the text box are styled so that they appear on the screen. Save the page and you will see the fitbit image from the previous page animate down onto this section of the screen in the browser window.

#section4 .imgsContainer {top: 50%;}
#section4 img {top: 155px; left: 455px;
position: absolute;}
#section4 .box, #section5 .box {
text-align: center;
margin: 20% 0 0 0;}

19. Final Section

Back in the HTML the last section is added which will place three images for logo’s at the bottom of the page and a little text to go with that. Save the page and that completes all the code for the website in the ‘index.html’ page. Switch back over to the ‘page.css’ now.

<div id="&quot;section5”" class="section">
<div class="wrap">
<div class="imgsContainer"><img id="fblogo" src="img/fitbit_logo.png" alt="iphone" />
<img id="applogo" src="img/app_store.png" alt="iphone" />
<img id="playlogo" src="img/play_store.png" alt="iphone" /></div>
<div class="box">
<h2>Get it now!</h2>
Text content.
</div>
</div>
</div>

20. Position section five

The final part of the code is being added now to position the fifth block of the page in place. This is just positioning the images to the correct position and these will also be animated when the page comes into view into the browser window.

#section5 img {
position: absolute;
left: 0px; top: 0px;}
#section5 .imgsContainer {
display: block;
position: absolute;
z-index: 1;
top: 20%; left: 20%;
width: 800px;
height: 696px;}

21. Three logos

The three logo’s are given different z-index’s and they are positioned so they initially appear on top of one another but there is already some CSS which moves these when this section of the page becomes active. Save the page and view the final results in your browser.

#fblogo {z-index: 10;}
#applogo {z-index: 12;}
#playlogo {z-index: 11;
left: 140px;}
×