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

View demo Download source

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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.

View all contributions by

Website: http://tympanus.net/

Related Articles

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 leanirng CSS now.

Feedback 120

Comments are closed.
  1. 1

    Hello!

    This is GREAT , but there is a problem with it on iPad in landscape view. The website canvas on the right is not visible.

    How can I fix this?

  2. 4

    Hello,
    This is really awesome but it doesn’t work on Safari 8.0.8.
    Can you fix that ?
    Thank you

    • 5

      You can fix this by changing the position to absolute for the following class;

      .perspective.modalview {
      position: fixed;
      -webkit-perspective: 1500px;
      perspective: 1500px;
      }

      to

      .perspective.modalview {
      position: absolute;
      -webkit-perspective: 1500px;
      perspective: 1500px;
      }

  3. 7

    Hi there,
    your work is absolutely great, but I find it really hard to try it without any documentation. can anybody please tell me how to use this plugin correctly.

    peace

  4. 8

    Awesome!
    Thanks, but I have a problem. I want to have this menu on my main page, as a secondary navigation menu if you know what i mean.

    you see, I have a really simple html code for my blog, the #page is supposed to be the container and the and the wrapper should be the background or something like that.
    But every time I try to declare one of’em as container or wrapper in every single way I know, it’ll become a total mess!

    would you please help me with that? I love this menu, since I can’t have it, it’s driving me crazy:D
    You can find the whole code here:

    http://www.4shared.com/document/1-Z1Wwzvce/code.html

    thank you in advance.

  5. 9

    This looks great! I’m very new to this website, I’m just having the difficulty of incorporating this code into any of my projects. I don’t know where to start and not to familiar with GitHub either. Is this any tutorials on showing me how to use these codes or could some simply explain to me how to do it. Thank you very much!

  6. 10

    This is brilliant! Very attractive effects! Do you think this is possible on a WordPress website?

  7. 13

    Thank you! It’s simply brilliant design. I was searching something for Artistic website and come to know about this concept. Now, I believe design will have more space because of flying elements.

  8. 17

    Mary Lou thanks, its looks Great!
    It’s opensource?
    Can i use it for a template that I am going to sell?

  9. 18

    This Move Left is unfortunately BROKEN with the latest update on Firefox Android version 45.0.1. The screen does not shift all the way to the left. It works fine on everything else.

  10. 19

    Hi,
    Has anyone tested this on IE8? Has anyone got issues after fixing addEventListener and addElementsByClassName bugs. Because I am having problem with the slide transitioning to left. Please tell me if anyone has resolved issues on IE 8 and how. I am a newbe and here is my link that i’m working on. Works well on Chrome, Firefox, but got issues on IE 8.
    If anyone has resolved it please do reply.
    Thanks.

Comments are closed.