intro page full width navigation featured
June 4, 2014 | 40 Feedbacks

Full Page Intro & Navigation

Today's resource is an intro page, focused around a full width background image and a bold animated menu. And, for browsers that support it, a nice iOS-like blurred effect behind the navigation.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Sometimes you want to impress your users, and a way to do so is by using high-res background images combined with nice typography. This approach is definitely a current UI trend. The idea behind this resource is a bit deeper though: I was playing with some simple animations we see on mobile apps, and trying to integrate them into a desktop experience.

CSS3 transitions and animations make this easy to achieve. A point worth discussing about is: should we think about merging some mobile and desktop UX experiences, or should we treat them as two separate things? Food for thoughts.

Creating the structure

We used the <main> element to wrap the visible content. The navigation is outside the <main>, because it will slide in from the top. We needed to separate the 2 elements for the whole animation to work. The .cd-shadow-layer div is used to create a subtle shadow on top of the <main> element when it scales down, to make the 3D effect more realistic.

The .cd-blurred-bg will be used to create the blurred image layer. More about this in the “Adding style” section.

Adding style

To realize the animation, we used CSS3 Transformations combined with CSS3 Transitions, applied to 2 elements – <main> and <nav>. The translate and scale properties let us move the navigation and simulate the 3d movement of the main content (yes, you could have played with translateZ to achieve the same effect). Transitions, like butter (cit. Dan Cederholm), let properties values to smoothly switch from status A to status B.

About the blur effect: we created a clone of the <section> element, with the same background image. In order to apply the blur effect we needed to mask part of the content though. After some researches, I found this article on Codrops about how the clip property works. Only problem was: we don’t know the offset value from the top, it depends by the device. Yes, we needed our pal jQuery to pass the values to the clip property. More on this in the next section.

Note that in order to have a full page content, regardless the viewport size, we had to set height: 100% for both <html> and <body>.

Events handling

We didn’t do a lot in jQuery. The only thing worth noting is the function to set the clip property of the .cd-blurred-bg element.

 

Changelog

Jun 4, 2014
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • Pingback: Responsive Full Page Intro & Navigation | Design News()

  • Pingback: 画面全体が切り替わるダイナミックな演出のナビゲーションのアイディア 『Full Page Intro & Navigation』 | 9ineBB()

  • Jake

    Very cool, just thought I’d say well done with this project, it’s good to see this pop up. Found out about the site from a codrops article which does very similar things to this site.

    I hope you keep up the premium-free content!

  • Pingback: free instagram followers()

  • Antarik Mukherjee

    Sir your style of designing is just too good , so flat and minimal and just awesome ! You are a big inspiration for me ^_^

  • tabblack

    cool…

  • Marc Tannous

    Hello Sebastiano,

    How should I change the code in order to be able to add the bottom navigation bar to any page? For example a page full of text, that can scroll, and have the nav bar stickied on the bottom side?

    • Sebastiano Guerriero

      You could try by changing the navigation position from Absolute to Fixed, then put the content into a new , always with height: 100% and overflow-y: scroll. Not sure how the fixed header will react to the animation though (fixed elements don’t like transformations)

      • Marc Tannous

        That did not work unfortunantely but chabging the position to fixed as you said and removing overflow: hidden did the job. Thank you!
        When is the next code snippet getting uploaded?

  • Pingback: 2014年後半戦!WEBサイトデザインとサイト設計の最新トレンドはこれだ! | nijilog()

  • Vinothpandian Govindasamy

    How to add the sub menus..Its a pretty awesome menu…

    • http://codyhouse.co Claudia Romano

      Hi, glad you liked it! In order to add submenu, you should add an unordered list to the element inside the main menu. Hope this helps! :)

      • antoinette

        Hi Claudia,

        I’ve tried this but it doesn’t work. It butchers up the paddings and overlaps with the menu below it.
        Could you please kindly help me add two submenus under a menu that only expands when it is clicked? It would help me a real ton.

        • http://codyhouse.co Claudia Romano

          Hi Antoniette, the style for submenu items is missing. We’ll try to update or create a new nugget with subitems too! Cheers

          • antoinette

            Hi again Claudia,

            Thanks for the quick reply. Please, thanks! I really need to put this up now.

  • Savo

    Could you please be so kind and give me (us) some tips in order to make this amazing animated menu work on a single page website? What should I do to make it smooth scroll (down or up to desired #id from the menu) when I click on a desired link in the menu??? It would be super awesome if, after clicking on a menu and choosing for example ‘about’ link, menu closes and everything smoothly scrolls down to ‘about’ page on a single page website. Thanks a lot!!!

    • http://codyhouse.co Claudia Romano

      Hi Savo, glad you liked it! :)

      In order to do that, you should (e.g. for the about section) set the href=”#about” for the About link into the menu, and assign an id=”about” to the correspondent section in your single page website. Then you should add to the main.js file the following code:

      I haven’t tested it but that should work! ;)

      • Savo

        Hello Claudia,

        Thank you very much for your fast reply! Appreciate it a lot. I just tested everything and it works like a charm! It was amazing before and now it’s even better thanks to you. I wish I am better with JavaScript/JQuery but I am still learning a lot so your and Sebastiano’s tutorials here are of a great help to me and everybody else here. You people rock!

        Many thanks and have a great day!

        Savo

  • Pingback: 45+ Creative Menu With jQuery and CSS3 - ninodezign.com()

  • Olivier Soros

    Hello Sebastien, Thanks for this wonderfull piece of code. I would integer the menu on a site that should be compatible with IE8. Did you have ideas to make it compatible with IE 8 ?

    • http://www.dospuntocero.cl francisco arenas

      IE8 is not going to happen. look for the microsoft extension for their crappy browser… “zoom” and the impossible to use “MS Matrix filter”, maybe you could fake most of the code using jquery

  • Nate

    Beautiful Snippet. Im trying to make more than 5 items on the menu, but when ever I add another to the index file it displays wrong and on the page before you hit the menu. Any suggestions to add more items to the menu so it scrolls? Thanks

    • http://codyhouse.co Claudia Romano

      Hey Nate, thanks!:)
      If you add more items, you may need to change their height ( it’s 20% at the moment). Hope this helps!

  • Jaime

    Hi Sebastian,

    Great snippet! I manage to create a single page website using this and able to scroll down the content. I wonder how to make the header (.cd-header class) fixed on top when user scrolling down the content? Thanks. I look forward to your reply. :)

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi! You can check how we did in this resource:

      http://codyhouse.co/gem/content-filter/

      • Jaime

        Thanks for your prompt reply. Finally I managed to get it works!

  • Hugh Baldwin

    This is very, very cool. So clean. I wonder if there is any way to make the background into into a dynamic slideshow type thing? So rather than having a background url to a static .jpg you could point it to a css or flash based slideshow of images? or would the blurred menu not keep up and only work with a static file?

    Thanks!

    • http://codyhouse.co Claudia Romano

      Hi Hugh, glad you like it! To make it work, you should also update the .cd-blurred-bg background image (same image of the slideshow).

  • Uzo Omotayo

    I’m trying to link from one page to another but can’t seem to get it. Can you please be of help to me by telling me what and what not to do. Thanks

    • http://codyhouse.co Claudia Romano

      You need to insert the correct href for each anchor tag in the #main-nav.

  • meidanmonot

    Hello Sebastiano. First of all, great work! I’m having trouble to put second area with a different background. I copied that js file snippet from comments and i got it workin. If click from the navi “#about” itll close the menu overlay and goes to about section. However, if i then click from menu to intropage, everything works but it wont scroll to absolute top of the page, it leaves let says 100px from top, and leaves a bit from the about section to see. I just copy&paste the main section code right after the first main section, i know there are multiple same id’s, but whats wrong? could you help?

    Full Page Intro & Navigation

    Menu

    Full Page Intro & Navigation

    Menu

    Frontpage

    About

    Labs

    About

    Contact us

    Close

  • meidanmonot

    Hello Sebastiano, i did some small tweaks and now i have full web layout, thank you! amazing work!

    http://jukkasoininen.com/dev/fullscreen/

    • http://codyhouse.co/ Sebastiano Guerriero

      Looks really nice ;)

    • shanecooke

      Hi, the url above does not work. When I just visit your root url then a page loads.

  • Domenica

    Love this menu. I am trying to implement it on my blog, but the JS is not responding for some reason. Everything is linked so I am a little confused. http://blog.disegnasacchetta.net If you have a moment could you maybe help point me in the right direction. Thanks!

    • Jacques Cousteau

      Why don’t you go to stack overflow. These people were nice enough to put this together. If you don’t know how to code…it is not their job to do it for you.

      • Domenica

        I wasn’t asking for a handout. I know how to code, I’ve been using the debugger in chrome and it can’t read any issues. You need points to post at stack overflow. I was asking why maybe my JS wasn’t responding with my wordpress. If you weren’t going to be polite there is not need to comment on my post. Clearly it wasn’t meant for you to answer.

  • Jacques Cousteau

    Why do people feel like they can ask for extended support after trying to use these awesome demos? Entitlement 101. Learn how to code. It is very simple. If you don’t know what you are doing, surely don’t come back to the people who spent their time creating these free tutorials asking for help on how to code.

  • JeffreyJanusheske

    Is there a way to do these transitions between multiple pages?

  • Sahil Hingorani

    This menu is great but I just have one issue with it. How do we make it so that we can add more information and scroll through pages with it? At the moment, with this nav bar we can only have a single page without the ability to scroll. Does anyone know how to fix this issue?