Bootstrap Snippet card animate info using HTML CSS jQuery

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css' />       
<a id="view-code" href="http://codepen.io/virgilpana/pen/gpPvgr" target="_blank">VIEW CODE</a>
     <div id="content">  
         <div id="tile1" class="tile">
         
         <div class="wrapper settings-form">
            <div class="header">
                Settings
                <div class="close">
                    <div class="cy"></div>
                    <div class="cx"></div>
                </div>
            </div>
            
            <form action="">
                <div>
                    <label>EVENT NAME</label>
                    <input type="text" value="Dribbble Meetup" />
                </div>
                
                <div class="short">
                    <label>START DATE</label>
                    <input type="text" value="12:30 JAN 2015" />
                </div>
                
                <div class="short">
                    <label>START DATE</label>
                    <input type="text" value="14:30 JAN 2015" />
                </div>
                
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
/*  Reset & General
---------------------------------------------------------------------- */
* { margin: 0px; padding: 0px; }
body {
    background: #ecf1f5;
    font:14px "Open Sans", sans-serif; 
    text-align:center;
}
#view-code{
  color:#89a2b5;    
  opacity:0.7;
  font-size:14px;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  position:absolute;top:480px;
  left:50%;margin-left:-38px;
  z-index:200;
}
#view-code:hover{color:#5aadef; opacity:1}
#content{
    width:740px;
    margin:150px auto 0;
    text-align:left;
}
.tile{  
    width:360px;
    height:285px;
    background:#fff;
    border-radius:5px;
    box-shadow:0px 2px 3px -1px rgba(151, 171, 187, 0.7);
    float:left;
    position:relative;
    overflow:hidden;
  transform-style: preserve-3d;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
$(document).ready(function(){
    $('#tile1 .settings').click(function(){         
        $('#tile1').addClass('animate');
        $('#tile1 div.settings-form').css('display', 'block').delay('40').animate({'opacity': 1});
        setTimeout(function(){
            $('#tile1 form div').css('display', 'block').animate({'opacity': 1, 'top':0}, 200); 
        }, 40);
        
        setTimeout(function(){
            $('#tile1 form button').css('display', 'block').animate({'opacity': 1, 'top':0}, 200);
            $('#tile1 .cx, #tile1 .cy').addClass('s1');
            setTimeout(function(){$('#tile1 .cx, #tile1 .cy').addClass('s2');}, 100);
            setTimeout(function(){$('#tile1 .cx, #tile1 .cy').addClass('s3');}, 200);   
        }, 100);        
        
    });     
    
    
    $('#tile1 .close').click(function(){            
        $('#tile1 .cx, #tile1 .cy').removeClass('s1 s2 s3');    
        
        $('#tile1 form button').animate({'opacity': 0, 'top':-20}, 120, function(){$(this).css('display', 'none')});        
        setTimeout(function(){
            $('#tile1 form div').animate({'opacity': 0, 'top':-20}, 120, function(){
                $(this).css('display', 'none')              
            }); 
            $('#tile1 div.settings-form').animate({'opacity':0}, 120, function(){$(this).hide();});           
      
            $('#tile1').removeClass('animate');
        }, 50);                             
            
    });
    var flipCard = $("#make-3D .tile");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"card animate info"
Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"card animate info" Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"card animate info"
Bootstrap 3.3.0 Snippet by evarevirus