W ramach naszej witryny stosujemy pliki cookies zgodnie z Polityką Cookie. Zasady przechowywania lub dostępu plików cookie możesz zmienić w swojej przeglądarce.
X

mywebcases
.com



Blog

Geekowy blog o łamigłówkach, JavaScript i wszystkim, co ciekawe.

Slide your way through the content

Tech stuff - JavaScript -
napisał Jakub Caban

We (as WhyBlack company) have recently launched a brave new website. It was quite a fun to utilize new possibilities of HTML5 and CSS3 and see how it works in every corner situation I could imagine.

In this post I'd like to share part of underlying technology used on our site on the example of Portfolio (here). What we see here is nice content switching effect.

So let's begin!

First of all - we need to know structure of the site we are working on. In this particular case we have DIVs with "plane" class that act as content containers and switch on every arrow click. Basic style is not really interesting and looks like this:

.plane{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
 display: block;
}

So we see that it has absolute positioning and is set to fill its container.

Before going any further we must also ensure that there will be no horizontal scroll on our page no matter what:

body{
/* SNIP */
 overflow: hidden;
 overflow-y: auto;
/* SNIP */
}

Let's put aside AJAX loading and background fading for now. Then we shall prepare our animation.

First of all - our plane can be in 3 different states:

  1. currently active plane
  2. next plane
  3. plane that was recently switched out

In this particular example I use CSS 2D transformations to reflect end state of animation. Class "hidden" reflects plane that just went out and class "come" reflects one that is about to be shown. For the active plane we use no additional styling:

.effect3d-off.effect2d-on .plane.hidden{
 -moz-transform: translateY(-50%) translateX(-55%) rotate(-90deg) scale(0, 0);
 -webkit-transform: translateY(-50%) translateX(-55%) rotate(-90deg) scale(0, 0);
 -o-transform: translateY(-50%) translateX(-55%) rotate(-90deg) scale(0, 0);
 -ms-transform: translateY(-50%) translateX(-55%) rotate(-90deg) scale(0, 0);
 transform: translateY(-50%) translateX(-55%) rotate(-90deg) scale(0, 0);
}
.effect3d-off.effect2d-on .plane.come{
 -moz-transform: translateY(100%) translateX(55%) rotate(90deg) scale(0, 0);
 -webkit-transform: translateY(100%) translateX(55%) rotate(90deg) scale(0, 0);
 -o-transform: translateY(100%) translateX(55%) rotate(90deg) scale(0, 0);
 -ms-transform: translateY(100%) translateX(55%) rotate(90deg) scale(0, 0);
 transform: translateY(100%) translateX(55%) rotate(90deg) scale(0, 0);
}

So that when we take active plane, set its class to "plane hidden" and change other planes' class from "plane come" to simply "plane" - they switch.

Last thing we need to do is animation. And as you may have guessed - it's extremely easy. With no further explanation:

.effect2d-on .plane{
 -moz-transition: -moz-transform 1s, opacity 1s;
 -webkit-transition: -webkit-transform 1s, opacity 1s;
 -ms-transition: -ms-transform 1s, opacity 1s;
 -o-transition: -o-transform 1s, opacity 1s;
 transition: transform 1s, opacity 1s;
}

This code tells we want to animate any transform or opacity change with 1s of animation.

So putting it all together when we have HTML structure of many planes:

<div id="some_container">
 <div class="plane">[BODY]</div>
 <div class="plane come">[BODY]</div>
 <div class="plane come">[BODY]</div>
 ...
 <div class="plane come">[BODY]</div>
</div>

and we know what planes we want to switch we can use this simple JavaScript function:

function swithPlane(from, to){
 from.className = "plane hidden";
 to.className = "plane";
 setTimeout(function(){ //wait for transition to end
 from.style.transition = 'none'; //disable transition not to animate change from 'hidden' to 'come'
 //you shall change all prefixed values here - easy done with Modernizr
 from.className = "plane come";
 from.style.transition = ''; //again - all prefixed; switch back to CSS transition value
 }, 1000);
}

Turning off and on again transition may be done by simply putting 'none' from transition in .plane.come class - I prefered to keep it JS way to be consistent with other things happening on website.   If you'd like to use 3D transformations (as seen on our website when you press the "3D effects" button with a browser supporting it), you shall add some style and use different transformation syntax. I will not explain this, as it gets lengthy already. Bare code:

.csstransforms3d.effect3d-on body{
 -moz-perspective: 500px;
 -webkit-perspective: 500px;
 -o-perspective: 500px;
 -ms-perspective: 500px;
 perspective: 500px;
}
.csstransforms3d.effect3d-on .plane.hidden{
 -moz-transform: translateY(-50%) translateX(-55%) rotateX(90deg) rotateY(90deg) scale3d(0, 0, 0);
 -webkit-transform: translateY(-50%) translateX(-55%) rotateX(90deg) rotateY(90deg) scale3d(0, 0, 0);
 -ms-transform: translateY(-50%) translateX(-55%) rotateX(90deg) rotateY(90deg) scale3d(0, 0, 0);
 -o-transform: translateY(-50%) translateX(-55%) rotateX(90deg) rotateY(90deg) scale3d(0, 0, 0);
 transform: translateY(-50%) translateX(-55%) rotateX(90deg) rotateY(90deg) scale3d(0, 0, 0);
}
.csstransforms3d.effect3d-on .plane.come{
 -moz-transform: translateY(50%) translateX(55%) rotateX(-90deg) rotateY(-90deg) scale3d(0, 0, 0);
 -webkit-transform: translateY(50%) translateX(55%) rotateX(-90deg) rotateY(-90deg) scale3d(0, 0, 0);
 -ms-transform: translateY(50%) translateX(55%) rotateX(-90deg) rotateY(-90deg) scale3d(0, 0, 0);
 -o-transform: translateY(50%) translateX(55%) rotateX(-90deg) rotateY(-90deg) scale3d(0, 0, 0);
 transform: translateY(50%) translateX(55%) rotateX(-90deg) rotateY(-90deg) scale3d(0, 0, 0);
}

You are free to use those code snippets anyhow and anywhere and I'd be glad to hear your opinion about it. Also if you have any questions about it feel free to ask here or e-m@il me.

JavaScript
O JavaScripcie i jego dzikich meandrach, do których tylko najwytrwalsi tubylcy zapuszczają się. I to nigdy bez odzieży ochronnej i dzidy z trzema końcami.

Podobne artykuły:

Skomentuj: