Unlimited creativity! A set of webpage sidebar transition animations [download with source code]

Today, we want to share with you another set of transition effects. This time, we will explore how to implement transition animations on the sidebar, just as we have used them in multi-level launch menus. Our idea is to show some hidden sidebar with a tiny transition animation, and the rest of the content is also. Usually the sidebar slides in and pushes other content to one side. Many subtle and special effects can be added to this process, and today this article will give you some inspiration.

Tip:

 

Online Demo

Because we want to show all the results on a page, the results of our example are very specific. However, in general, we need to display the sidebar elements inside or outside the Push container, depending on whether we want to display the sidebar on or below the Push container. Therefore, there are two typesHTMLStructure. 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 -->

Effect 7CSSThe Code is as follows. We add the perspective value to the main container, and then rotate the Push container and menu in 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 use the visibility attribute here, because there are multiple sidebar in our demonstration. If you only have a sidebar, you do not have to set the visibility attribute from hidden to visible.

In addition, some browsers do not support the transition (transitions) of pseudo elements (which we use to implement masks), so you may see a rapid flash in these browsers (such as some mobile browsers ). Also, IE10 does not support transform-style: preserve-3d effects, which can damage nested 3D conversion elements. For some examples, you may not be able to see the results correctly.

We hope this collection will give you some inspiration to create some good results. Hope you like it!

 

 

Articles you may be interested in

• Share nine superb check boxes (Checkbox)
• It's really good! A group of dynamic pages to load animation Effects
• Codrops Tutorial: full-screen webpage transition effect based on CSS3
• Codrops Tutorial: exquisite mode window effect based on CSS3
• Zepto. js-a lightweight JavaScript library for modern browsers

 

Link to this article: unlimited creativity! Codrops

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

This article from [dream sky (http://www.cnblogs.com/lhb25 )]