Material Inspired Morphing Overlay with jQuery and CSS3
File Size: | 121 KB |
---|---|
Views Total: | 4785 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A Material Design inspired morphing overlay that uses CSS3 transitions and a little jQuery magic to make an action button morph into a full-sized, closeable content overlay.
Basic usage:
1. Load the optional Font Awesome 4 for button icons.
<link rel="stylesheet" href="font-awesome.min.css">
2. Create an action button inside a specified container.
<div class="button-wrapper"> <div class="layer"></div> <button class="main-button fa fa-info"> </button> </div>
3. Add layered content into the overlay.
<div class="layered-content"> <button class="close-button fa fa-times"></button> <div class="content"> Content goes here </div> </div>
4. The core CSS / CSS3 styles for the morphing button / overlay.
.button-wrapper { width: 50px; height: 100%; position: absolute; bottom: 0; right: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; right: 20px; bottom: 20px; } button { width: 50px; height: 50px; border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4); z-index: 9; position: relative; } .main-button { background: #ff2670; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } .layer { position: absolute; left: 0; right: 0; bottom: 0; width: 50px; height: 50px; background: #ff2670; border-radius: 50%; z-index: -99; pointer-events: none; } .button-wrapper.clicked { -webkit-transform: rotate(90deg) translateY(-96px); -ms-transform: rotate(90deg) translateY(-96px); transform: rotate(90deg) translateY(-96px); right: 0; bottom: 0; -webkit-transition: .3s all ease .6s; transition: .3s all ease .6s; } .button-wrapper.clicked .main-button { opacity: 0; -webkit-transition: .3s all ease .3s; transition: .3s all ease .3s; } .button-wrapper.clicked .layer { -webkit-transform: scale(100); -ms-transform: scale(100); transform: scale(100); -webkit-transition: 2.25s all ease .9s; transition: 2.25s all ease .9s; } .layered-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; opacity: 0; } .layered-content.active { opacity: 1; } .close-button { background: white; position: absolute; right: 20px; top: 20px; color: #ff2670; } .layered-content.active .close-button { -webkit-animation: .5s bounceIn; animation: .5s bounceIn; }
5. The core jQuery script to toggle the CSS classes.
(function(){ 'use strict'; var $mainButton = $(".main-button"), $closeButton = $(".close-button"), $buttonWrapper = $(".button-wrapper"), $layer = $(".layered-content"); $mainButton.on("click", function(){ $buttonWrapper.addClass("clicked").delay(1500).queue(function(){ $layer.addClass("active"); }); }); $closeButton.on("click", function(){ $buttonWrapper.removeClass("clicked"); $layer.removeClass("active"); }); })();
This awesome jQuery plugin is developed by balapa. For more Advanced Usages, please check the demo page or visit the official website.