Android L Style Drawer/Folder Animations with jQuery and CSS3
File Size: | 2.84 KB |
---|---|
Views Total: | 2062 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Cool app drawer/folder animations based on jQuery and CSS3 transitions & transforms, as you seen on Android 5.0 Lollipop. Click the 'button' on the demo page you will see a content panel pops up with the cool Lollipop transitions.
How to use it:
1. Create a content panel that is hidden by default.
<div class="wrap"> <div class="content"> <h2>Title</h2> <p>Content</p> </div> </div>
2. Create a link to toggle the content panel.
<a href="#"></a>
3. The core CSS/CSS3 styles.
.wrap { position: absolute; overflow: hidden; top: 10%; right: 10%; bottom: 85px; left: 10%; padding: 20px 50px; display: block; border-radius: 4px; transform: translateY(20px); transition: all 0.5s; visibility: hidden; } .wrap .content { opacity: 0; } .wrap:before { position: absolute; width: 1px; height: 1px; background: white; content: ""; bottom: 10px; left: 50%; top: 95%; border-radius: 50px; color: #fff; border-radius: 50%; -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1); } .wrap.active { display: block; visibility: visible; box-shadow: 2px 3px 16px silver; transition: all 600ms; transform: translateY(0px); transition: all 0.5s; } .wrap.active:before { height: 2000px; width: 2000px; border-radius: 50%; top: 50%; left: 50%; margin-left: -1000px; margin-top: -1000px; display: block; -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1); } .wrap.active .content { position: relative; z-index: 1; opacity: 1; transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19); }
4. Load the necessary jQuery JavaScript library at the bottom of the document.
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
5. The JavaScript to reveal the hidden content panel with cool Lollipop transitions when you click on the toggle link.
$('a').on('click', function(){ $('.wrap, a').toggleClass('active'); return false; });
This awesome jQuery plugin is developed by jeffmccarthyesq. For more Advanced Usages, please check the demo page or visit the official website.