Material Inspired Expanding Card with jQuery CSS3 - Download Material Inspired Expanding Card with jQuery and CSS3

Download Material Inspired Expanding Card with jQuery and CSS3

By Posted on

This time I will share jQuery Plugin and tutorial about Material Inspired Expanding Card with jQuery and CSS3, hope it will help you in programming stack.

Material Inspired Expanding Card with jQuery CSS3 - Download Material Inspired Expanding Card with jQuery and CSS3
File Size: 2.28 KB
Views Total: 3582
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download



A Material Design inspired morphing card concept which uses several CSS3 properties and a little jQuery to transform an action button into a content panel when toggled.

How to use it:

1. Add the action button and content panel into a container element as displayed below.

view source
01 <div class="container">
02   <span class="button">
03     +
04   </span>
05   <div class="content">
06     <div class="head">
07       <h1>Title</h1>
08     </div>
09     <div class="body">
10      Main content here
11     </div>
12   </div>
13 </div>

2. The main CSS / CSS3 styles.

view source
01 .button {
02   cursor: pointer;
03   width: 60px;
04   height: 60px;
05   display: inline-block;
06   font-size: 30px;
07   line-height: 60px;
08   -webkit-transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
09   transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
10 }
11  
12 .container {
13   position: absolute;
14   margin: auto;
15   left: 0;
16   right: 0;
17   top: 5vh;
18   background-color: #03A9F4;
19   border-radius: 50%;
20   width: 60px;
21   max-width: 60px;
22   height: 60px;
23   text-align: center;
24   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
25   overflow: hidden;
26   -webkit-transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
27   transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
28 }
29  
30 .content {
31   -webkit-transform: translateY(100%);
32   -ms-transform: translateY(100%);
33   transform: translateY(100%);
34   width: 100%;
35   height: 100%;
36   opacity: 0;
37   text-align: left;
38   -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s;
39   transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s;
40 }
41  
42 .content .head { padding: 0 0 20px 0; }
43  
44 .content .body {
45   color: #000;
46   color: rgba(0, 0, 0, 0.87);
47   background-color: #FFF;
48   width: 100%;
49   height: 100%;
50   padding: 10px 0;
51   box-sizing: border-box;
52 }

3. The core CSS / CSS3 styles for the morphing effect.

view source
01 .button.expand {
02   -webkit-transform: rotate(585deg);
03   -ms-transform: rotate(585deg);
04   transform: rotate(585deg);
05   -webkit-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
06   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
07 }
08  
09 .container.expand {
10   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
11   border-radius: 0;
12   width: 80%;
source : jqueryscript.net

Related posts: