Creative Unlimited! A set of Web page sidebar transition animation "with source download"

Source: Internet
Author: User

Today we would like to share with you another set of transition effects. This time, we'll explore how to implement the transition animations for the sidebar, as we've already used in the multi-level rollout menu. Our idea is to show some hidden sidebar in a subtle transition animation, and the rest of the content is. Usually the sidebar slides in and pushes the rest of the content aside. This process can add a lot of subtle and exotic effects, and today this article will give you some inspiration.

Tips: For the best results, browse through modern browsers such as ie10+, Chrome, Firefox, and Safari.

Download the online demo now

Because we want to be able to show all the effects on a single page, the results of our example are very specific. But in general, we need sidebar elements inside or outside the push container, depending on whether we want to show the sidebar on top of the push container or below. So, there are two kinds of HTML structure, the first implementation of the code is as follows:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <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 pivot value to the main container, and then we rotate the Push container and the menu with the effect:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 .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 property here because there are multiple sidebars in our demo. 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 the transition (transitions) of pseudo-elements (which we use to implement masks), so you may see a quick flicker in these browsers (for example, some mobile browsers). Also, IE10 does not support the transform-style:preserve-3d effect, which destroys nested 3D transformation elements. So there are some examples where you will not be able to see those effects correctly.

We hope this collection gives you some inspiration and creates some good results. Hope you will like it!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.