The video used in the project is available under a Creative Commons license so it’s free to use and openfootage.net is a great resource for your projects.
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 class="section moveDown" id="section4”> <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 de �ined 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 �itbit 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’ #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 o�loaded 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 �inal folder to see all of the browser pre�ixes 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
With fullPage.js it’s very easy to detect what section of the page is leaving the browser viewport and what section has just rendered in. The whole initialization of fullPage.js can be seen in the �ile ‘main.js’ in the JS folder of the project. Reading the code here will give some obvious clues as to what is going on. Centering the page vertically, background colours, navigation are all de�ined here. There are two sections that might seem more confusing
though. The �irst is the ‘afterLoad’ function. This detects that a new section has been loaded in the browser window so this is a great place to detect new content on the screen, in fact you can see that the video is made to start playing if the section is section 1. The second function named ‘onLeave’ tells you which section is leaving the viewport, this is useful as animation can be started before the new content has hit the screen so that there is �luid motion.
Tutorials
Build full browser screen designs
page. Switch back over to the ‘page.css’ now. <div class="section" id="section5”> <div class="wrap">
<div class="imgsContainer">
<img src="img/fitbit_logo.png" alt="iphone" id="fblogo" />
<img src="img/app_store.png" alt="iphone" id="applogo" />
<img src="img/play_store.png" alt="iphone" id="playlogo" /> </div>
<div class="box">
<h2>Get it now!</h2> Text content. </div> </div> </div>
</div>
20
.Position section �ive
The �inal part of the code is being added now to position the �ifth 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 �inal results in your browser.
#fblogo {z-index: 10;} #applogo {z-index: 12;} #playlogo {z-index: 11; left: 140px;}
53