Bootstrap Snippet Add to cart effect 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'>
<div id="wrapper">
<div class="cart-icon-top">
</div>
<div class="cart-icon-bottom">
</div>
<div id="checkout">
    CHECKOUT
</div>
<div id="info">
    <p class="i1">Add to cart interaction prototype by Virgil Pana</p>
<p>    Follow me on <a href="https://dribbble.com/virgilpana" style="color:#ea4c89" target="_blank">Dribbble</a> | <a style="color:#2aa9e0" href="https://twitter.com/virgil_pana" target="_blank">Twitter</a></p>
</div>
<div id="header">   
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">BRANDS</a></li>
        <li><a href="">DESIGNERS</a></li>
        <li><a href="">CONTACT</a></li>                                              
    </ul>       
</div>
<div id="sidebar">
    <h3>CART</h3>
    <div id="cart">
        <span class="empty">No items in cart.</span>       
    </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 {
    font-family: "Open Sans", sans-serif; 
    overflow:hidden;    
}
#wrapper{
    overflow: hidden;
    height: 1153px;
    width: 1643px;
    background:#fff;
}
#header{
    height:92px; 
    background:#fff url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/header-icons.png") 1448px -2px no-repeat;
    border-bottom:1px solid #eee;
}
#header ul{padding:33px 0 0 45px;}
#header li{
    list-style:none;
    float:left;
    margin-right:30px;  
}
#header li a{
    font-weight:700;
    color:#333;
    font-size:14px; 
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:1px;
}
#headerli a:hover{
    color:#000;
    cursor:pointer;
}
#grid-selector{
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(){
    
    $(".largeGrid").click(function(){                                           
    $(this).find('a').addClass('active');
    $('.smallGrid a').removeClass('active');
    
    $('.product').addClass('large').each(function(){                                            
        });                     
        setTimeout(function(){
            $('.info-large').show();    
        }, 200);
        setTimeout(function(){
            $('.view_gallery').trigger("click");    
        }, 400);                                
        
        return false;               
    });
    
    $(".smallGrid").click(function(){               
    $(this).find('a').addClass('active');
    $('.largeGrid a').removeClass('active');
    
        $('div.product').removeClass('large');
        $(".make3D").removeClass('animate');    
    $('.info-large').fadeOut("fast");
        setTimeout(function(){                              
                $('div.flip-back').trigger("click");
        }, 400);
        return false;
    });     
    
    $(".smallGrid").click(function(){
        $('.product').removeClass('large');         
        return false;
    });
  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Add to cart effect"
Bootstrap 3.3.0 Snippet by Sagar Joshi

Related: See More

Questions / Comments:

"Add to cart effect" Bootstrap 3.3.0 Snippet by Sagar Joshi

Related: See More

Questions / Comments:

"Add to cart effect"
Bootstrap 3.3.0 Snippet by Sagar Joshi