"shop card animation"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/elmahdim/pen/tEeDn?depth=everything&order=popularity&page=10&q=link&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <style class="cp-pen-styles">* { margin: 0; padding: 0; } body { background-color: #F2EEE9; font: normal 13px/1.5 Georgia, Serif; color: #333; } .wrapper { width: 705px; margin: 20px auto; padding: 20px; } h1 { display: inline-block; background-color: #333; color: #fff; font-size: 20px; font-weight: normal; text-transform: uppercase; padding: 4px 20px; float: left; } .clear { clear: both; } .items { display: block; margin: 20px 0; } .item { background-color: #fff; float: left; margin: 0 10px 10px 0; width: 205px; padding: 10px; height: 290px; } .item img { display: block; margin: auto; } h2 { font-size: 16px; display: block; border-bottom: 1px solid #ccc; margin: 0 0 10px 0; padding: 0 0 5px 0; } button { border: 1px solid #722A1B; padding: 4px 14px; background-color: #fff; color: #722A1B; text-transform: uppercase; float: right; margin: 5px 0; font-weight: bold; cursor: pointer; } span { float: right; } .shopping-cart { display: inline-block; background: url('http://cdn1.iconfinder.com/data/icons/jigsoar-icons/24/_cart.png') no-repeat 0 0; width: 24px; height: 24px; margin: 0 10px 0 0; }</style></head><body> <!-- wrapper --> <div class="wrapper"> <h1>Bike Stock</h1> <span><i class="shopping-cart"></i></span> <div class="clear"></div> <!-- items --> <div class="items"> <!-- single item --> <div class="item"> <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" /> <h2>Item 1</h2> <p>Price: <em>$449</em> </p> <button class="add-to-cart" type="button">Add to cart</button> </div> <!--/ single item --> <!-- single item --> <div class="item"> <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" /> <h2>Item 1</h2> <p>Price: <em>$449</em> </p> <button class="add-to-cart" type="button">Add to cart</button> </div> <!--/ single item --> <!-- single item --> <div class="item"> <img src="http://img1.exportersindia.com/product_images/bc-small/dir_55/1620613/cannondale-jekyll-1-2011-mountain-bike-309779.jpg" alt="item" /> <h2>Item 1</h2> <p>Price: <em>$449</em> </p> <button class="add-to-cart" type="button">Add to cart</button> </div> <!--/ single item --> </div> <!--/ items --> </div> <!--/ wrapper --> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script >/* Add to cart fly effect with jQuery. - May 05, 2013 (c) 2013 @ElmahdiMahmoud - fikra-masri.by license: https://www.opensource.org/licenses/mit-license.php */ $('.add-to-cart').on('click', function () { var cart = $('.shopping-cart'); var imgtodrag = $(this).parent('.item').find("img").eq(0); if (imgtodrag) { var imgclone = imgtodrag.clone() .offset({ top: imgtodrag.offset().top, left: imgtodrag.offset().left }) .css({ 'opacity': '0.5', 'position': 'absolute', 'height': '150px', 'width': '150px', 'z-index': '100' }) .appendTo($('body')) .animate({ 'top': cart.offset().top + 10, 'left': cart.offset().left + 10, 'width': 75, 'height': 75 }, 1000, 'easeInOutExpo'); setTimeout(function () { cart.effect("shake", { times: 2 }, 200); }, 1500); imgclone.animate({ 'width': 0, 'height': 0 }, function () { $(this).detach() }); } }); //# sourceURL=pen.js </script> </body></html>

Questions / Comments: