The creativity is endless! A set of web page sidebar transition animations [with source code download]_html/css_WEB-ITnose

Today we want to share with you another set of transition effects. This time, we’ll look at how to implement a transition animation for the sidebar, like the one we already use in our multi-level rollout menu. The idea is to show some of the hidden sidebar with a subtle transition animation, and so does the rest of the content. Often sidebars slide in, pushing other content aside. There are many subtle and peculiar effects that can be added to this process, and today’s article can give you some inspiration.

Warm reminder: To ensure the best results, please browse in modern browsers such as IE10, Chrome, Firefox and Safari.

Download Now Online Demo

Because we want to be able to show everything on one page effect, so the results of our examples are very specific. But in general, we need sidebar elements inside or outside the Push container, depending on whether we want the sidebar to be displayed above or below the Push container. Therefore, there are two HTML structures. The first implementation code is as follows:

<div id="st-container" class="st-container">    <!-- content push wrapper -->    <div class="st-pusher">        <nav class="st-menu st-effect-1" id="menu-1">            <!-- sidebar content -->        </nav>        <div class="st-content"><!-- this is the wrapper for the content -->            <div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->                <!-- the content -->            </div><!-- /st-content-inner -->        </div><!-- /st-content -->    </div><!-- /st-pusher --></div><!-- /st-container -->

　Or the following structure:

<div id="st-container" class="st-container">    <nav class="st-menu st-effect-1" id="menu-1">        <!-- sidebar content -->    </nav>    <!-- content push wrapper -->    <div class="st-pusher">        <div class="st-content"><!-- this is the wrapper for the content -->            <div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->                <!-- the content -->            </div><!-- /st-content-inner -->        </div><!-- /st-content -->    </div><!-- /st-pusher --></div><!-- /st-container -->

The CSS code for effect seven is as follows. We add the perspective value to the main container, and then we rotate the Push container and menu with a 3D effect:

.st-effect-7.st-container {    perspective: 1500px;    perspective-origin: 0% 50%;} .st-effect-7 .st-pusher {    transform-style: preserve-3d;} .st-effect-7.st-menu-open .st-pusher {    transform: translate3d(300px, 0, 0);} .st-effect-7.st-menu {    transform: translate3d(-100%, 0, 0) rotateY(-90deg);    transform-origin: 100% 50%;    transform-style: preserve-3d;} .st-effect-7.st-menu-open .st-effect-7.st-menu {    visibility: visible;    transform: translate3d(-100%, 0, 0) rotateY(0deg);}

Note that we are using the visibility property here because in our demo There are multiple sidebars in . If you just have a sidebar, you won't have to set the visibility property from hidden to visible.

In addition, some browsers do not support transitions on pseudo elements (which we use to implement masks), so you may see a quick flicker in these browsers (such as some mobile browsers). Also, IE10 does not support the transform-style: preserve-3d effect, which will destroy nested 3D transformation elements. So there are some examples where you won't be able to see those effects correctly.

We hope this collection gives you some inspiration to create some nice effects. Hope you will like it!

Download Now Online Demo