"card shop & animation"
Bootstrap 4.1.1 Snippet by gurramanilkumar

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html 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/derekshirk/pen/dNLeZj?depth=everything&order=popularity&page=93&q=shop&show_forks=false" /> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@derek_shirk"> <meta name="twitter:creator" content="@derek_shirk"> <meta name="twitter:title" content="Footwear Commerce Card UI Experiment - Derek Shirk CodePen"> <meta name="twitter:description" content="An experiment with a footwear focused e-commerce card layout and UI."> <meta name="twitter:image" content="https://raw.githubusercontent.com/derekshirk/codepen-template-assets/master/img/shoes/twitter-large-card.png"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css'><link rel='stylesheet prefetch' href='https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css'> <style class="cp-pen-styles">@import url("//fonts.googleapis.com/css?family=Roboto:300,400,500,700,900"); </style></head><body> <div class="group group-three"> <div class="group--container"> <div class="group--title" data-aos="zoom-out-up" data-aos-offset="500"> <h2>Air Max Premium</h2> <div class="group--subtitle"> If the Shoe Fits Hover It. <!-- If the Shoe Fits Card UI Experiment --> </div> </div> <div class="card--style2 card--one" data-aos="fade-up"> <div class="shoe--info"> <span class="shoe--name"> NIKE AIR MAX PREMIUM </span> <span class="shoe--price"> $150 </span> </div> <div class="shoe"> <img src="https://bit.ly/2lTBReR" alt="nike air max premium red" /> </div> <div class="shoe--colors"> <ul class="colors"> <li data-color="#F5624D"></li> <li data-color="#CC231E" class="active-color" ></li> <li data-color="#34A65F"></li> </ul> </div> </div> <div class="card--style2 card--two" data-aos="fade-up"> <div class="shoe--info"> <span class="shoe--name"> NIKE AIR MAX ESSENTIAL </span> <span class="shoe--price"> $150 </span> </div> <div class="shoe"> <img src="https://bit.ly/2kRrQxP" alt="nike air max essential black" /> </div> <div class="shoe--colors"> <ul class="colors"> <li data-color="#F5624D"></li> <li data-color="#CC231E" class="active-color" ></li> <li data-color="#34A65F"></li> </ul> </div> </div> <div class="card--style2 card--three" data-aos="fade-up"> <div class="shoe--info"> <span class="shoe--name"> NIKE AIR MAX 90 </span> <span class="shoe--price"> $150 </span> </div> <div class="shoe"> <img src="https://bit.ly/2kRsdIN" alt="nike air max 90" /> </div> <div class="shoe--colors"> <ul class="colors"> <li data-color="#F5624D"></li> <li data-color="#CC231E" class="active-color" ></li> <li data-color="#34A65F"></li> </ul> </div> </div> <div class="shop-all"> <button class="button">shop collection</button> </div> </div> </div> <!-- Current 2nd Group --> <div class="group group-one"> <div class="group--container"> <div class="group--title" data-aos="fade-up"> <h2>Air Max Premium</h2> <div class="group--subtitle"> A sample card UI layout. </div> </div> <div class="card card--one"> <div class="shoe"> <img src="https://bit.ly/2lTBReR" alt="nike air max premium red" /> </div> <div class="shoe--colors"> <ul class="colors"> <li data-color="#F5624D"></li> <li data-color="#CC231E" class="active-color" ></li> <li data-color="#34A65F"></li> </ul> <button class="buy-btn">Add to Cart</button> </div> <div class="shoe--info"> <span class="shoe--name">NIKE AIR MAX PREMIUM</span> <span class="shoe--price"> $150 </span> </div> </div> <div class="card card--two" > <div class="shoe" > <img src="https://bit.ly/2kRrQxP" alt="nike air max essential black" /> </div> <div class="shoe--colors"> <ul class="colors"> <li data-color="#F5624D"></li> <li data-color="#CC231E" class="active-color" ></li> <li data-color="#34A65F"></li> </ul> <button class="buy-btn">Add to Cart</button> </div> <div class="shoe--info"> <span class="shoe--name">NIKE AIR MAX PREMIUM</span> <span class="shoe--price"> $150 </span> </div> </div> <div class="card" > <div class="shoe" > <img src="https://bit.ly/2kRsdIN" alt="nike air max 90 blue and black" /> </div> <div class="shoe--colors"> <ul class="colors"> <li data-color="#F5624D"></li> <li data-color="#CC231E" class="active-color" ></li> <li data-color="#34A65F"></li> </ul> <button class="buy-btn">Add to Cart</button> </div> <div class="shoe--info"> <span class="shoe--name">NIKE AIR MAX PREMIUM</span> <span class="shoe--price"> $150 </span> </div> </div> </div> </div> <div class="group group-two"> <div class="group--container"> <div class="group--title"> <h2>Air Max Premium</h2> <div class="group--subtitle"> A sample card UI layout. </div> </div> <div class="card card--one" data-aos="fade-right"> <div class="shoe"> <img src="https://bit.ly/2lTBReR" alt="nike air max premium red" /> </div> <div class="shoe--colors"> <ul class="colors"> <li data-color="#F5624D"></li> <li data-color="#CC231E" class="active-color" ></li> <li data-color="#34A65F"></li> </ul> <button class="buy-btn">Add to Cart</button> </div> <div class="shoe--info"> <span class="shoe--name">NIKE AIR MAX PREMIUM</span> <span class="shoe--price"> $150 </span> </div> </div> <div class="card card--two" data-aos="zoom-out"> <div class="shoe" > <img src="https://bit.ly/2kRrQxP" alt="nike air max premium red" /> </div> <div class="shoe--colors"> <ul class="colors"> <li data-color="#F5624D"></li> <li data-color="#CC231E" class="active-color" ></li> <li data-color="#34A65F"></li> </ul> <button class="buy-btn">Add to Cart</button> </div> <div class="shoe--info"> <span class="shoe--name">NIKE AIR MAX PREMIUM</span> <span class="shoe--price"> $150 </span> </div> </div> <div class="card" data-aos="fade-left"> <div class="shoe"> <img src="https://bit.ly/2kRsdIN" alt="nike air max 90" /> <div class="shoe--colors"> <ul class="colors"> <li data-color="#F5624D"></li> <li data-color="#CC231E" class="active-color" ></li> <li data-color="#34A65F"></li> </ul> <button class="buy-btn">Add to Cart</button> </div> <div class="shoe--info"> <span class="shoe--name">NIKE AIR MAX PREMIUM</span> <span class="shoe--price"> $150 </span> </div> </div> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script src='https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js'></script> <script >// Variables </script> </body></html>
html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } .color1, .colors > li:nth-child(1), .group-two { background-color: #d33f4b; } .color2, .colors > li:nth-child(2) { background-color: #545151; } .color3, .colors > li:nth-child(3) { background-color: #5695c3; } .color4, .colors > li:nth-child(4) { background-color: #0F8A5F; } .color5, .colors > li:nth-child(5) { background-color: #235E6F; } .shoe--name { font-family: "Roboto", sans-serif; font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .shoe--price { color: #949494; } .group { min-height: 760px; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-image: url(https://bit.ly/2lpu3Uh); background-blend-mode: multiply; } .group .group--container { max-width: 1200px; margin: 0 auto; padding: 0 0 60px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; } .group .group--title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; text-transform: uppercase; margin-bottom: 100px; } .group .group--title h1, .group .group--title h2, .group .group--title h3, .group .group--title h4 { font-family: "Roboto"; font-weight: 700; font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif; font-size: 32px; margin: 0 0 10px 0; } .group .group--title h1:before, .group .group--title h2:before, .group .group--title h3:before, .group .group--title h4:before { content: ''; display: block; border-top: 4px solid #232323; padding-top: 18px; width: 43%; margin: 0 auto; } .group .group--subtitle { font-weight: 400; font-family: "Roboto", sans-serif; color: #777; letter-spacing: 0.6px; } .card { width: 315px; height: 400px; background: #fff; margin: 0 15px; padding: 60px 33px 12px 33px; box-sizing: border-box; box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.04); border-radius: 2px; position: relative; display: block; } .card .shoe img { max-width: 100%; width: 250px; margin-bottom: 120px; position: relative; } .card .shoe--info { position: absolute; bottom: -70px; text-align: center; width: 100%; left: 0; } .card .shoe--info .shoe--name { margin-bottom: 8px; } .card .shoe--info .shoe--price { font-weight: 400; color: #757575; font-size: 14px; } .card .shoe--colors { padding: 23px 0 0 0; border-top: 1px solid #f4f4f5; bottom: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0; } .colors { margin: 0; padding: 0; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .colors > li { list-style: none; width: 20px; height: 20px; border-radius: 50%; display: inline-block; margin: 0 4px; box-sizing: border-box; cursor: pointer; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition: all ease 1s; transition: all ease 1s; } .colors > li:hover { -webkit-transform: scale(1.09); transform: scale(1.09); -webkit-transition: all ease 1s; transition: all ease 1s; } .buy-btn { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 14px; outline: 0; background-color: transparent; box-shadow: none; border: 2px solid #afafaf; text-transform: uppercase; padding: 8px 19px; display: flex; align-items: center; border-radius: 3px; font-weight: 400; font-family: "Roboto", sans-serif; color: #afafaf; } .card--style2 { width: 330px; height: 360px; padding: 0; position: relative; padding-bottom: 80px; box-sizing: border-box; } .card--style2 .shoe { padding-bottom: 50px; position: absolute; bottom: 0; will-change: transform; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .card--style2 .shoe:before { content: ""; display: block; background: #fff; height: 310px; width: 200px; position: absolute; bottom: 50px; left: 90px; } .card--style2 .shoe img { width: 100%; position: relative; } .card--style2 .shoe--info { position: relative; left: 24px; top: 60px; z-index: 20; will-change: transform; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform-origin: center center; transform-origin: center center; } .card--style2 .shoe--name:before { content: ""; padding-top: 13px; width: 190px; } .card--style2 .shoe--colors { position: absolute; left: 0; bottom: 0; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .card--style2 .shoe--colors .colors { width: auto; margin: 0 auto; position: relative; left: 10px; will-change: transform; opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); -webkit-transition: all 0.33s ease-in; transition: all 0.33s ease-in; -webkit-transition-delay: 0.153s; transition-delay: 0.153s; } .card--style2:hover .shoe--colors .colors { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.33s ease-out; transition: all 0.33s ease-out; -webkit-transition-delay: 0.253s; transition-delay: 0.253s; } .card--style2:hover .shoe { -webkit-transform: scale(1.06); transform: scale(1.06); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .card--style2:hover .shoe--info { -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .card--style2.card--one .shoe--name:before { border-top: 5px solid red; } .card--style2.card--two .shoe--name:before { border-top: 5px solid black; } .card--style2.card--three .shoe--name:before { border-top: 5px solid #5695c3; } .group-one { background-color: #eaeaea; background-image: none; } .group-one .group--title h1:before, .group-one .group--title h2:before, .group-one .group--title h3:before, .group-one .group--title h4:before { border-color: #d33f4b; } .group-two .group--title { color: rgba(250, 250, 250, 0.85); } .group-two .group--title h1:before, .group-two .group--title h2:before, .group-two .group--title h3:before, .group-two .group--title h4:before { border-color: rgba(250, 250, 250, 0.9); } .group-two .group--subtitle { color: rgba(250, 250, 250, 0.85); } .group-two .is--active { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transform-origin: center center; transform-origin: center center; } .group-two .shoe--info .shoe--name { color: #fff; } .group-two .shoe--info .shoe--price { color: #fff; } .group-three { background-image: none; background-color: #f4f4f4; } .group-three .shop-all { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 120px 0 0 0; } .group-three .shop-all .button { border: 3px solid #444; outline: 0; background-color: transparent; border-radius: 2px; padding: 9px 18px; font-size: 13px; font-family: "Roboto", sans-serif; font-weight: 700; text-transform: uppercase; -webkit-transition: all 0.23s ease; transition: all 0.23s ease; -webkit-transform: scale(1); transform: scale(1); } .group-three .shop-all .button:hover { background-color: #232323; color: #fff; -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transition: all 0.23s ease; transition: all 0.23s ease; }
var colorButton = $(".colors li"); colorButton.on("click", function(){ // console.log('clicked'); // Remove class from currently active button $(".colors > li").removeClass("active-color"); // Add class active to clicked button $(this).addClass("active-color"); // Get background color of clicked var newColor = $(this).attr("data-color"); // alert(newColor); // Change background of everything with class .bg-color $(".merry-christmas").css("background-color", newColor); // Change color of everything with class .text-color // $(".text-color").css("color", newColor); }); "use strict";!function(t){t.fn.tilt=function(s){var i=function(){this.ticking||(requestAnimationFrame(g.bind(this)),this.ticking=!0)},e=function(){t(this).on("mousemove",r),t(this).on("mouseenter",n),this.settings.reset&&t(this).on("mouseleave",l)},a=function(){var s=this;void 0!==this.timeout&&clearTimeout(this.timeout),t(this).css({transition:this.settings.speed+"ms "+this.settings.easing}),this.settings.glare&&this.glareElement.css({transition:"opacity "+this.settings.speed+"ms "+this.settings.easing}),this.timeout=setTimeout(function(){t(s).css({transition:""}),s.settings.glare&&s.glareElement.css({transition:""})},this.settings.speed)},n=function(s){this.ticking=!1,t(this).css({"will-change":"transform"}),a.call(this),t(this).trigger("tilt.mouseEnter")},h=function(s){return"undefined"==typeof s&&(s={pageX:t(this).offset().left+t(this).outerWidth()/2,pageY:t(this).offset().top+t(this).outerHeight()/2}),{x:s.pageX,y:s.pageY}},r=function(t){this.mousePositions=h(t),i.call(this)},l=function(){a.call(this),this.reset=!0,i.call(this),t(this).trigger("tilt.mouseLeave")},o=function(){var s=t(this).width(),i=t(this).height(),e=t(this).offset().left,a=t(this).offset().top,n=(this.mousePositions.x-e)/s,h=(this.mousePositions.y-a)/i,r=(this.settings.maxTilt/2-n*this.settings.maxTilt).toFixed(2),l=(h*this.settings.maxTilt-this.settings.maxTilt/2).toFixed(2),o=Math.atan2(this.mousePositions.x-(e+s/2),-(this.mousePositions.y-(a+i/2)))*(180/Math.PI);return{tiltX:r,tiltY:l,percentageX:100*n,percentageY:100*h,angle:o}},g=function(){return this.transforms=o.call(this),this.reset?(this.reset=!1,t(this).css("transform","perspective("+this.settings.perspective+"px) rotateX(0deg) rotateY(0deg)"),void(this.settings.glare&&(this.glareElement.css("transform","rotate(180deg) scale(1.75)"),this.glareElement.css("opacity",""+this.settings.maxGlare/4)))):(t(this).css("transform","perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:this.transforms.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:this.transforms.tiltX)+"deg) scale3d("+this.settings.scale+","+this.settings.scale+","+this.settings.scale+")"),this.settings.glare&&(this.glareElement.css("transform","rotate("+this.transforms.angle+"deg) scale(1.75)"),this.glareElement.css("opacity",""+this.transforms.percentageY*this.settings.maxGlare/100)),t(this).trigger("change",[this.transforms]),void(this.ticking=!1))},c=function(){if(!this.settings.glarePrerender){t(this).append('<div class="js-tilt-glare"><div class="js-tilt-glare-inner"></div></div>'),this.glareElementWrapper=t(this).find(".js-tilt-glare"),this.glareElement=t(this).find(".js-tilt-glare-inner");var s={position:"absolute",top:"0",left:"0",width:"100%",height:"100%"};this.glareElementWrapper.css(s).css({overflow:"hidden"}),this.glareElement.css(s).css({"background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",opacity:""+this.settings.maxGlare/2,transform:"rotate(180deg) scale(1.75)"})}};return t.fn.tilt.destroy=function(){t(this).each(function(){t(this).find(".js-tilt-glare").remove(),t(this).css({"will-change":"",transform:""}),t(this).off("mousemove mouseenter mouseleave")})},t.fn.tilt.getValues=function(){var s=[];return t(this).each(function(){this.mousePositions=h.call(this),s.push(o.call(this))}),s},t.fn.tilt.reset=function(){t(this).each(function(){var s=this;this.mousePositions=h.call(this),this.settings=t(this).data("settings"),l.call(this),setTimeout(function(){s.reset=!1},this.settings.transition)})},this.each(function(){var i=this;this.settings=t.extend({maxTilt:t(this).is("[data-tilt-max]")?t(this).data("tilt-max"):20,perspective:t(this).is("[data-tilt-perspective]")?t(this).data("tilt-perspective"):300,easing:t(this).is("[data-tilt-easing]")?t(this).data("tilt-easing"):"cubic-bezier(.03,.98,.52,.99)",scale:t(this).is("[data-tilt-scale]")?t(this).data("tilt-scale"):"1",speed:t(this).is("[data-tilt-speed]")?t(this).data("tilt-speed"):"400",transition:!t(this).is("[data-tilt-transition]")||t(this).data("tilt-transition"),axis:t(this).is("[data-tilt-axis]")?t(this).data("tilt-axis"):null,reset:!t(this).is("[data-tilt-reset]")||t(this).data("tilt-reset"),glare:!!t(this).is("[data-tilt-glare]")&&t(this).data("tilt-glare"),maxGlare:t(this).is("[data-tilt-maxglare]")?t(this).data("tilt-maxglare"):1},s),this.init=function(){t(i).data("settings",i.settings),i.settings.glare&&c.call(i),e.call(i)},this.init()})},t("[data-tilt]").tilt()}(jQuery); // $('.card').tilt({ // // axis: X // }); // }(jQuery); AOS.init({ duration: 1200, }) //# sourceURL=pen.js

Related: See More


Questions / Comments: