Perspective Page View Navigation

Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects.

Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. The approach reflects some practices in app design where “views” are shown with animations. We’ve experimented a bit and we’ve come up with a small set of effects that take the page and move it in 3D to reveal a navigation (or some other content if you like). What’s nice about this is that we literally put the site into perspective, allowing for an interesting view on the content and the navigation possibilities.

Please note that this is highly experimental, so let us know if you find any bugs or problems.

For the general effect to work, we need to wrap our page into a perspective wrapper. The main content container (that will get moved in 3D) and the navigation will be the two children immediate children of that wrapper:

<div id="perspective" class="perspective effect-airbnb">
	<div class="container">
		<div class="wrapper"><!-- wrapper needed for scroll -->
			<!-- ... -->
		</div><!-- wrapper -->
	</div><!-- /container -->
	<nav class="outer-nav left vertical">
		<!-- ... -->
	</nav>
</div><!-- /perspective -->

When we trigger the effect, we’ll need to change the position and overflow of the divisions to just show the current view. With a little trick we can hide the overflow but keep the scroll position by setting the “wrapper” top to the negative scrollTop value of the body.

Depending on which effect we have set as a class to the perspective wrapper, we’ll animate the container and the menu items once we click the trigger button. An example for an effect is the following, where we rotate and move the page to the left and make the navigation items appear consecutively with a slight delay on the right side:

/* Effect Move Left */
.effect-moveleft {
	background: #f4f3f1;
}

.effect-moveleft .container {
	transition: transform 0.4s;
	transform-origin: 50% 50%;
}

.effect-moveleft .container::after {
	background: rgba(255,255,255,0.6);
}

.effect-moveleft.animate .container {
	transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
}

/* Fallback */
.no-csstransforms3d .effect-moveleft.animate .container {
	left: -75%;
}

/* Navigation */
.effect-moveleft .outer-nav a {
	color: #e86a32;
	opacity: 0;
	transform: translateX(100px) translateZ(-1000px);
	transition: transform 0.4s, opacity 0.4s;
}

.effect-moveleft .outer-nav a:hover {
	color: #333;
}

.effect-moveleft.animate .outer-nav a {
	opacity: 1;
	transform: translateX(0) translateZ(0);
}

.effect-moveleft.animate .outer-nav a:nth-child(2) {
	transition-delay: 0.04s;
}

.effect-moveleft.animate .outer-nav a:nth-child(3) {
	transition-delay: 0.08s;
}

.effect-moveleft.animate .outer-nav a:nth-child(4) {
	transition-delay: 0.12s;
}

.effect-moveleft.animate .outer-nav a:nth-child(5) {
	transition-delay: 0.16s;
}

.effect-moveleft.animate .outer-nav a:nth-child(6) {
	transition-delay: 0.2s;
}

.effect-moveleft.animate .outer-nav a:nth-child(7) {
	transition-delay: 0.24s;
}

We also added some example media queries that show how to resize or reposition the menu for smaller screens.

There are two styles for the menus which is a horizontal and a vertical one. Depending on where we push away the page, we’ll be using one of the orientations together with a position class:

<nav class="outer-nav left vertical">
	<a href="#" class="icon-home">Home</a>
	<a href="#" class="icon-news">News</a>
	<a href="#" class="icon-image">Images</a>
	<a href="#" class="icon-upload">Uploads</a>
	<a href="#" class="icon-star">Favorites</a>
	<a href="#" class="icon-mail">Messages</a>
	<a href="#" class="icon-lock">Security</a>
</nav>

The icons used in the demo are from the Typicons set by Stephen Hutchings and they are licensed under the CC BY-SA 3.0 license.

Here is how all the effects look like when the menu is visible and the page is pushed away:

Airbnb Effect:

PerspectivePageViewNavigation01

Move Left:

PerspectivePageViewNavigation02

Rotate Left:

PerspectivePageViewNavigation03

Move Down:

PerspectivePageViewNavigation04

Rotate Top:

PerspectivePageViewNavigation05

Lay down:

PerspectivePageViewNavigation06

We hope you like the effects and find them inspiring!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 121

Comments are closed.
  1. It looks amazing (by amazing I mean jaw on the floor spitting rainbows and unicorns) ! Thank you for another beautiful inspiration !

  2. This demo is quite impressive. How hard would it be to have the page just move to the background (centered), in some sort of zoom-out effect, that displays the navigation “on top” of it?

  3. I tried to look on the airbnb website to see the original effect but I couln’t find it, is it live?

  4. Awesome, it’s close to a feature I’ve often been looking for, but not only for mobile sites, to show a embeded video player like on the gantry framework website .

    See how the youtube video player, from the welcome page, sliding left the all page.

    http://www.gantry-framework.org/

    Thx !

    • hi,
      wendl Thank you for share your site . i see this site . it very helpful and awesome site .

  5. Is there a possibility of getting an animation when I click on one of the menu items to go that specific site ?

  6. I’ve been testing this for an internal app, and there are a few issues I can’t seem to fix.

    First, it is a scrollable element within a viewport. This means that on OS and browsers that have wide and always on scrollbars, there is dual scroll bar right next to each other. Confusing for the user and a real estate waster.

    Second, if you have a fixed nav bar in the scrollable element, it does not remain mixed in iOS 7.

    Other small bugs, but overall, it is a kickass concept!

  7. I found an error when load the index, the console of Chrome say:


    GET http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff 403 (Forbidden: header ‘Content-Type’ value denied) index.html:79
    GET http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff 403 (Forbidden: header ‘Content-Type’ value denied) index.html:79
    GET http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff 403 (Forbidden: header ‘Content-Type’ value denied) index.html:79

    then making some changes in the demo.css file, like coment the line nr 1 ” @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); “,
    or changin for some like ” @import url(fontsGoogleapisCom.css?family=Lato:300,400,700) “, and creating an fontsGoogleapisCom.css whit this code.


    @font-face {
    font-family: ‘Lato’;
    font-style: normal;
    font-weight: 300;
    src: local(‘Lato Light’), local(‘Lato-Light’) ) format(‘woff’);
    }
    @font-face {
    font-family: ‘Lato’;
    font-style: normal;
    font-weight: 400;
    src: local(‘Lato Regular’), local(‘Lato-Regular’) ) format(‘woff’);
    }
    @font-face {
    font-family: ‘Lato’;
    font-style: normal;
    font-weight: 700;
    src: local(‘Lato Bold’), local(‘Lato-Bold’)) format(‘woff’);
    }

    the error disable.

    Personaly i like just coment the line 1.

    that…

    Happy chrismas to all…

  8. I love this! But is there any way to create several ‘s e.g:
    <nav class="home outer-nav left vertical">
    <a href="#">about us</a>
    </nav>
    <nav class="contact outer-nav left vertical">
    <a href="#">email</a>
    </nav>
    <nav class="news outer-nav left vertical">
    <a href="#">email</a>
    </nav>
    triggered by this :
    <ul>
    <li id="showHome">Home</li>
    <li id="showContact">Contact</li>
    <li id="showNews">News</li>
    Happy new Year to all 🙂

  9. I really love this navigation effect. If i were to create this for browser that dont support css3 animations… how would I recreate this in Jquery?

  10. Good work but …
    if you try on iphone for example, and the container have some link, when you click to restore it, the link is fired …
    with preventdefault on event the page after restore have some problems to scroll …
    some solution … ?
    thanks.

    • You could use javascript to append an invisible layer over the main page, which gets pushed away with the page (make the layer stay on top of the page, so clicks have no effect on links). Then, also with javascript, remove the layer when the main page is being restored.

    • Starware thanks …
      but when i remove the dynamic layer the click action fire on links …
      have some example about ?
      help …

  11. Thank so much for this!

    I was so impressed with this I decided to use it on my own production site… You can see it in action over at freakyleaf.co.uk.

    The majority of the code remains unchanged; I made some adjustments for browsers without JS, and IE8 however (which had troubles firing the code) – for those, the menu defaults to a simple static bar above the main header…

    • i want to use it for poping new menu everytime i use navigation bar can u help?? i have my BE project

  12. It’d be great to see how the Javascript is involved here. The HTML and CSS is explained well, but I found myself confused over what role modernizr plays, and the two other JS files included.

    Could you enlighten me?
    Cheers!

  13. It is great to find a tutorial like this. It is something new. I am so impressed with the structure of the design. Keep on sharing. Thanks. I would like to use this with my current site.

  14. Awesome!

    But I wonder how this can work out on a 1-page website? I mean, when you click on a link when it is ‘open’, the content does scroll but the effect doesn’t close.

    Anyone an idea?

    • Hi!

      Did you find out, how to make an effect that site scroll to some place in the content of website?

      I’ve tried

      <nav class="outer-nav top horizontal"
      <a href=”div_id” rel=”nofollow”>testLinki</a>

      But it doesn’t work

  15. This is seriously awesome. I want to find a way to work this into some project somewhere down the line.

  16. The article doesn’t mention anything about javascript but I’m finding that you have to have the javascript file in order to operate correctly. Is this correct? Is there a way to do any of these effects without the javascript or is it dependent on both script files? I’ve tried going through it but this level of javascript is a little over my head.

    Thanks

  17. Fantastic design! It looks phenomenal. One question, how can I set this up so that when I push the home button (for example) I would get a reverse animation going back to the page; Just clicking on the actual page itself does. Thanks!

  18. I just noticed that when you open the menu and then get back to the original page by clicking the transformed image, the scroll bar disappears.

  19. Hi Mary,

    I’m a student enroll at UW, and currently, building my portfolio website (hope you don’t mind me using this jquery). First of all, just want to say this is awesome! Secondly, I was wondering for the Lay down effect, is it possible to have img and figcaption instead of text? So, I tried to do it, but it seems that it just become more horizontal. Are there a way to change the width of the outernav, so that I can fit some preview?