I was looking over the .net award nominees this week and stumbled across the flipboard.com website. I loved the scrolling navigation so much I just had to open up visual studio and try and recreate it myself. You can see a demo hereThe main thing flipboard do differently is to have the logo and logo background elements move at different animation speeds from each other and the main content. This effect is is similar to Parallex scrolling and gives the website more interest, depth and flair. I’ve documented the main steps to recreate my demo below:Step 1
First we need to make reference to the JQuery Library as we are going to use it alot. So add the following into the head of your document <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" language="javascript"
type="text/javascript"></script> Step 2
Next we will want to add our HTML to the page this HTML will hold all of the layers and links that we will need to get the example running. The logo div holds our logo image, the image I have used, like the flipboard example has a slight transparency so that we can see the background triangle shine through. The background triangle moves at a slightly different speed to the logo and so needs it’s own <div>.By wrapping all the contentItems in a contentwrapper it will make it easier to scroll the contentItems into view using JQuery. I have added the nav layer and placed 4 links into it so that the user can navigate between the different contentItems.Lastly I have added a button on the right of the screen so that the user can navigate the contentItems one at a time. <body>
<div id="logo">
</div>
<div id="triangle">
</div>
<div id="contentWrapper">
<div class="contentItem" id="content1">
<div id="contentPicture1">
</div>Read more: thebeebs
First we need to make reference to the JQuery Library as we are going to use it alot. So add the following into the head of your document <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" language="javascript"
type="text/javascript"></script> Step 2
Next we will want to add our HTML to the page this HTML will hold all of the layers and links that we will need to get the example running. The logo div holds our logo image, the image I have used, like the flipboard example has a slight transparency so that we can see the background triangle shine through. The background triangle moves at a slightly different speed to the logo and so needs it’s own <div>.By wrapping all the contentItems in a contentwrapper it will make it easier to scroll the contentItems into view using JQuery. I have added the nav layer and placed 4 links into it so that the user can navigate between the different contentItems.Lastly I have added a button on the right of the screen so that the user can navigate the contentItems one at a time. <body>
<div id="logo">
</div>
<div id="triangle">
</div>
<div id="contentWrapper">
<div class="contentItem" id="content1">
<div id="contentPicture1">
</div>Read more: thebeebs
Posts
0 comments:
Post a Comment