"card shop"
Bootstrap 3.0.0 Snippet by evarevirus

<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 ----------> <div class="layout"> <section class="inner"> <ul class="grid"> <li class="grid-tile"> <div class="item"> <div class="item-img" style="background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: auto auto; background-size: 150%; background-position: center 30%;"></div> <div class="item-pnl"> <div class="pnl-wrapper"> <div class="pnl-description"> <span class="pnl-label">Product Name</span> <span class="pnl-price">$100,00</span> </div> <div class="pnl-favorites"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span> </div> </div> <div class="pnl-tocart"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span> </div> </div> </div> </div> </div> </li> <li class="grid-tile"> <div class="item"> <div class="item-img" style="background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/110390_A2_Pixel_Worktop_Saver.jpg'); background-size: auto auto; background-size: 150% 150%;"></div> <div class="item-pnl"> <div class="pnl-wrapper"> <div class="pnl-description"> <span class="pnl-label">Product Name</span> <span class="pnl-price">$100,00</span> </div> <div class="pnl-favorites"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span> </div> </div> <div class="pnl-tocart"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span> </div> </div> </div> </div> </div> </li> <li class="grid-tile"> <div class="item"> <div class="item-img" style="background-color: #ffff00; background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: contain;"></div> <div class="item-pnl"> <div class="pnl-wrapper"> <div class="pnl-description"> <span class="pnl-label">Product Name</span> <span class="pnl-price">$100,00</span> </div> <div class="pnl-favorites"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span> </div> </div> <div class="pnl-tocart"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span> </div> </div> </div> </div> </div> </li> <li class="grid-tile"> <div class="item"> <div class="item-img" style="background-color: #EEEEEE; background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: 50% 50%;"></div> <div class="item-pnl"> <div class="pnl-wrapper"> <div class="pnl-description"> <span class="pnl-label">Product Name</span> <span class="pnl-price">$100,00</span> </div> <div class="pnl-favorites"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span> </div> </div> <div class="pnl-tocart"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span> </div> </div> </div> </div> </div> </li> <li class="grid-tile"> <div class="item"> <div class="item-img" style="background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: cover;"></div> <div class="item-pnl"> <div class="pnl-wrapper"> <div class="pnl-description"> <span class="pnl-label">Product Name</span> <span class="pnl-price">$100,00</span> </div> <div class="pnl-favorites"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span> </div> </div> <div class="pnl-tocart"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span> </div> </div> </div> </div> </div> </li> <li class="grid-tile"> <div class="item"> <div class="item-img" style="background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: cover;"></div> <div class="item-pnl"> <div class="pnl-wrapper"> <div class="pnl-description"> <span class="pnl-label">Product Name</span> <span class="pnl-price">$100,00</span> </div> <div class="pnl-favorites"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span> </div> </div> <div class="pnl-tocart"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span> </div> </div> </div> </div> </div> </li> <li class="grid-tile"> <div class="item"> <div class="item-img" style="background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: cover;"></div> <div class="item-pnl"> <div class="pnl-wrapper"> <div class="pnl-description"> <span class="pnl-label">Product Name</span> <span class="pnl-price">$100,00</span> </div> <div class="pnl-favorites"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span> </div> </div> <div class="pnl-tocart"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span> </div> </div> </div> </div> </div> </li> <li class="grid-tile"> <div class="item"> <div class="item-img" style="background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: cover;"></div> <div class="item-pnl"> <div class="pnl-wrapper"> <div class="pnl-description"> <span class="pnl-label">Product Name</span> <span class="pnl-price">$100,00</span> </div> <div class="pnl-favorites"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span> </div> </div> <div class="pnl-tocart"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span> </div> </div> </div> </div> </div> </li> <li class="grid-tile"> <div class="item"> <div class="item-img" style="background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: cover;"></div> <div class="item-pnl"> <div class="pnl-wrapper"> <div class="pnl-description"> <span class="pnl-label">Product Name</span> <span class="pnl-price">$100,00</span> </div> <div class="pnl-favorites"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span> </div> </div> <div class="pnl-tocart"> <div class="pnl-ic-wrapper"> <span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span> </div> </div> </div> </div> </div> </li> </ul> </section> </div>
* { margin: 0; padding: 0 } body { background-color: #f9f9f9; } .layout { width: 100%; height: 100%; position: relative; font-family: 'Arimo', sans-serif; font-size: 16px; line-height: 1.5em; font-weight: 400; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .inner { max-width: 100%; padding: 0 0.5em; padding-top: 0.5em; transition: all 0.3s; } .grid { margin: 0 0 0 -0.5em; list-style-type: none; transition: all 0.3s } .grid:before, .grid:after { content: " "; display: table } .grid:after { clear: both } .grid-tile { width: 100%; position: relative; float: left; padding: 0 0 0.5em 0.5em; box-sizing: border-box; transition: all 0.3s; } .item { width: 100%; position: relative; overflow: hidden; background-color: #fff; border-radius: 15px; border: 2px solid #eee; box-sizing: border-box; } .item-img { width: 100%; padding-bottom: 115%; background-repeat: no-repeat; background-position: center; background-size: cover; } .item-img:hover { cursor: -webkit-grab; cursor: -moz-grab; } .item-img:active { cursor: -webkit-grabbing; cursor: -moz-grabbing; } .item-pnl { /*position: relative;*/ width: 100%; } .pnl-wrapper { width: 100%; height: 60px; display: table; } .pnl-wrapper > div { display: table-cell; vertical-align: middle; } .pnl-description { position: relative; padding: 0; padding-left: 0.5em; } .pnl-label { color: #424346; line-height: 16px; max-height: 2.6em; font-size: 0.75em; overflow: hidden; display: block; } .pnl-price { line-height: 16px; color: #111; font-weight: 700; font-size: 0.75em; display: block; /*margin-top: 0.125em;*/ } .pnl-ic-wrapper { width: 32px; height: 32px; line-height: 0; position: relative; margin: 0 auto; transform: scale(0.5); } .pnl-ic-wrapper svg { fill: none; stroke-width: 2.0; stroke-linecap: round; stroke-miterlimit: 4; stroke-location: outside; } .pnl-ic { display: inline-block; vertical-align: middle; width: 100%; height: 100%; } .pnl-favorites svg { stroke: #a1a8ad; } .pnl-favorites { width: 32px; cursor: pointer; position: relative; } .pnl-tocart svg { stroke: #a1a8ad; } .pnl-tocart { width: 32px; cursor: pointer; position: relative; } @media screen and (min-width: 320px) { .pnl-wrapper { height: 70px } .pnl-label, .pnl-price { font-size: 1em; line-height: 20px; } .pnl-favorites, .pnl-tocart { width: 56px } .pnl-ic-wrapper { transform: scale(0.75) } .pnl-description { padding-left: 1.0em } } @media screen and (min-width: 360px) { .inner { padding: 0 1.0em; padding-top: 1.0em } .grid { margin: 0 0 0 -1.0em } .grid-tile { padding: 0 0 1.0em 1.0em } .pnl-description { padding-left: 1.5em } .pnl-wrapper { height: 70px } } /* PORTRAIT MOBILE MODE */ @media screen and (min-width: 480px) { .inner { padding: 0 0.5em; padding-top: 0.5em } .grid { margin: 0 0 0 -0.5em } .grid-tile { padding: 0 0 0.5em 0.5em } .grid-tile { width: 50% } .pnl-wrapper { height: 60px } .pnl-description { padding-left: 0.5em } .pnl-label, .pnl-price { font-size: 0.75em; line-height: 18px; } .pnl-ic-wrapper { transform: scale(0.5) } .pnl-favorites, .pnl-tocart { width: 40px } } /* LANDSCAPE MOBILE MODE (~416px) */ @media (max-height: 26em) { .pnl-wrapper { height: 48px } .grid-tile { width: 33.3333% } .pnl-label { font-size: 0.7em; line-height: 14px; } .pnl-price { font-size: 0.7em; line-height: 14px; } .pnl-favorites { position: absolute; width: 40px; height: 40px; top:0; right: 0 } .pnl-ic-wrapper { transform: scale(0.5) } } @media screen and (min-width: 600px) { .inner { padding: 0 1.0em; padding-top: 1.0em } .grid { margin: 0 0 0 -1.0em } .grid-tile { padding: 0 0 1.0em 1.0em } .pnl-wrapper { height: 70px } .pnl-label, .pnl-price { font-size: 1em; line-height: 20px; } .pnl-favorites, .pnl-tocart { width: 56px } .pnl-ic-wrapper { transform: scale(0.75) } .pnl-description { padding-left: 1.0em } } @media screen and (min-width: 768px) { .inner { padding: 0 1.5em; padding-top: 1.5em } .grid { margin: 0 0 0 -1.5em } .grid-tile { padding: 0 0 1.5em 1.5em } } @media screen and (min-width: 912px) { } @media screen and (min-width: 1024px) { .grid-tile { width: 33.3333% } } @media screen and (min-width: 1300px) { .pnl-description { padding-left: 1.5em } } @media screen and (min-width: 1440px) { .inner { width: 1400px; margin: 0 auto } }
//============== function createHeartIc(el) { var el = el, span = el.querySelector('span'), svg = span.querySelector('svg'), opacityCurve = mojs.easing.path('M0,0 C0,87 27,100 40,100 L40,0 L100,0'), scaleCurve = mojs.easing.path('M0,0c0,80,39.2,100,39.2,100L40-100c0,0-0.7,106,60,106'), burst = new mojs.Burst({ parent: el, duration: 1200, delay: 200, shape: 'circle', fill: '#E87171', x: '50%', y: '50%', opacity: {1:0}, childOptions: { radius: {6:0}, type: 'line', stroke: '#E87171', strokeWidth: 2 }, radius: {0:32}, count: 7, //isSwirl: true, isRunLess: true, easing: mojs.easing.bezier(0.1, 1, 0.3, 1) }), heart = new Animocon(el, { tweens : [ /* // ring animation new mojs.Transit({ parent: el11, duration: 1000, delay: 100, type: 'circle', radius: {0: 95}, fill: 'transparent', stroke: '#C0C1C3', strokeWidth: {50:0}, opacity: 0.4, x: '50%', y: '50%', isRunLess: true, easing: mojs.easing.bezier(0, 1, 0.5, 1) }), // ring animation new mojs.Transit({ parent: el11, duration: 1800, delay: 300, type: 'circle', radius: {0: 80}, fill: 'transparent', stroke: '#C0C1C3', strokeWidth: {40:0}, opacity: 0.2, x: '50%', y: '50%', isRunLess: true, easing: mojs.easing.bezier(0, 1, 0.5, 1) }), */ // icon scale animation burst, new mojs.Tween({ duration : 800, easing: mojs.easing.ease.out, onUpdate: function(progress) { var opacityProgress = opacityCurve(progress); span.style.opacity = opacityProgress; var scaleProgress = scaleCurve(progress); span.style.WebkitTransform = span.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)'; var colorProgress = opacityCurve(progress); svg.style.fill = colorProgress >= 1 ? '#E87171' : 'none'; svg.style.stroke = colorProgress >= 1 ? '#E87171' : '#a1a8ad'; } }) ], onUnCheck : function() { svg.style.fill = 'none'; svg.style.stroke = '#a1a8ad'; } }); return heart; } function createCartIc(el) { var el = el, span = el.querySelector('span'), svg = span.querySelector('svg'), body = svg.getElementsByTagName("path")[0], opacityCurve = mojs.easing.path('M0,0 C0,87 27,100 40,100 L40,0 L100,0'), scaleCurve = mojs.easing.path('M0,0c0,80,39.2,100,39.2,100L40-100c0,0-0.7,106,60,106'), burst = new mojs.Burst({ parent: el, duration: 1200, delay: 200, shape: 'circle', fill: '#111111', x: '50%', y: '50%', opacity: {1:0}, childOptions: { radius: {6:2}, type: 'line', stroke: '#111111', strokeWidth: 2 }, radius: {0:36}, angle: 45, count: 4, //isSwirl: true, isRunLess: true, easing: mojs.easing.bezier(0.1, 1, 0.3, 1) }), heart = new Animocon(el, { tweens : [ /* // ring animation new mojs.Transit({ parent: el11, duration: 1000, delay: 100, type: 'circle', radius: {0: 95}, fill: 'transparent', stroke: '#C0C1C3', strokeWidth: {50:0}, opacity: 0.4, x: '50%', y: '50%', isRunLess: true, easing: mojs.easing.bezier(0, 1, 0.5, 1) }), // ring animation new mojs.Transit({ parent: el11, duration: 1800, delay: 300, type: 'circle', radius: {0: 80}, fill: 'transparent', stroke: '#C0C1C3', strokeWidth: {40:0}, opacity: 0.2, x: '50%', y: '50%', isRunLess: true, easing: mojs.easing.bezier(0, 1, 0.5, 1) }), */ // icon scale animation burst, new mojs.Tween({ duration : 800, easing: mojs.easing.ease.out, onUpdate: function(progress) { var opacityProgress = opacityCurve(progress); span.style.opacity = opacityProgress; var scaleProgress = scaleCurve(progress); span.style.WebkitTransform = span.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)'; var colorProgress = opacityCurve(progress); body.style.fill = colorProgress >= 1 ? '#111111' : 'none'; svg.style.stroke = colorProgress >= 1 ? '#111111' : '#a1a8ad'; } }) ], onUnCheck : function() { body.style.fill = 'none'; svg.style.stroke = '#a1a8ad'; } }); return heart; } var hearts = document.getElementsByClassName('pnl-favorites'), carts = document.getElementsByClassName('pnl-tocart'); for (var i=0;i<hearts.length;i++) { createHeartIc(hearts[i].querySelector('div')); createCartIc(carts[i].querySelector('div')); }

Related: See More


Questions / Comments: