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

Feedback 88

  1. 1

    Hello, is there any known problem with Safari on Windows/OSX?

    Your official demo of this plugin and my adaption show this bug. Expecially click on “show menu” (all versions index to index6.html) in safari then the menu appears – but the perspective main content (what fades out a little bit) disappears. A click on the area where it should be – it appears, finish the animation and return to normal view.

    Is there any bugfix or solution for this Problem? Pretty works on all other browsers (Firefox, Chrome, iOS Safari). Just in Mac/Windows Safari this bug appears.

  2. 2

    update: the bug caused by a to large browser window (width). At smaller windows the plugin works pretty good. What can be a solution for this bug? Greetings

    • 4

      Hi Valerio,
      I’m using weebly to hosting and create my free websites and I love this effect.
      How can I apply it in weebly?
      Please help me guy!!

      I’m waitting for your answer soon,
      Regards

  3. 7

    This is great. I am new into the coding thing and actually, I am trying to create my own website. Maybe this question will be silly but how do I apply the codes for this template into wordpress? Where do I have to put it?

  4. 8

    Hi!

    When I click on the link in the menu, I would like the site scroll to appropriate place.
    I don’t want do redirect to another site, just to scroll to some #div_id inside the content.

    I made on the site and try:

    Nasze us?ugi

    But it doesn’t work.

    Any ideas?

  5. 10

    Hi Mary Lou

    First off all, AWESOME! This is so cool and I will diffently use it on my website! Good work!

    Is it possibly to make the showMenu to also close the animation? I have tried to figure it out, but cant seem to do that.

    Appriciate your work!

    Best regards
    Jesper

  6. 11

    Hi,
    this menu works on all other browsers and device. But don’t works on Windows Phone.
    Why? There are some problems with css3 ?

    Thanks a lot.

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>