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.
PerspectiveNavigation

From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

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:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 121

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

  2. 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!

  3. 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…

  4. 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 🙂

  5. 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?

  6. 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 …

  7. 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

  8. 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!

  9. 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.

  10. 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