<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/theller5567/pen/wWvJjv?depth=everything&order=popularity&page=24&q=product&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>
<style class="cp-pen-styles">* {
box-sizing: border-box;
}
html, body {
font-size: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #1a1a1a;
width: 100%;
height: 100%;
box-sizxing: border-box;
font-family: 'Lato', Calibri, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
p.credit {
font-size: 12px;
position: fixed;
top: 0;
left: 0;
color: gray;
padding: 10px;
}
p.credit a {
color: #204faf;
}
.view {
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
}
.view header#header {
width: 90%;
max-width: 69em;
margin: 0 auto;
padding: 6em 1.875em 1.875em;
text-align: center;
color: #ffffff;
}
.view header#header h1 {
color: #e97b7a;
font-size: 3.125em;
font-weight: 400;
line-height: 1.3em;
margin: 0;
}
.view header#header h3 {
margin: 5px 0 0 0;
}
.action {
display: inline-block;
font-size: 1em;
white-space: nowrap;
padding: 0.85em 1.25em;
cursor: pointer;
border: none;
background: transparent;
text-align: center;
}
.action .invisible {
display: none;
}
.grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin: 0 auto;
padding: 4em 1em;
max-width: 1200px;
text-align: center;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.product {
position: relative;
display: inline-block;
vertical-align: top;
min-width: 16em;
margin: 0 1em 2.5em;
padding: 1.5em 1.5em 2em;
background: #24252A;
border-radius: 5px;
display: block;
-webkit-box-flex: 0;
-ms-flex: 0 0 16em;
flex: 0 0 16em;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.product .product-info {
color: #ffffff;
-webkit-perspective: 650px;
perspective: 650px;
}
.product .product-info h3 {
min-height: 46px;
}
.product .product-info .extra {
display: none;
}
.product .product-info .product-image {
-webkit-transform-style: preserve3d;
transform-style: preserve3d;
-webkit-transform: rotateY(0);
transform: rotateY(0);
opacity: 0.8;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.product .product-info span {
display: block;
}
.product .product-info button {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
margin-top: 1em;
background: #2C2D34;
color: #fff;
border-radius: 2px;
-webkit-transition: background 0.2s;
transition: background 0.2s;
}
.product label.compare {
position: absolute;
top: 10px;
right: 5px;
color: #ffffff;
cursor: default;
}
.product label.compare .check-hidden {
position: absolute;
z-index: 1;
opacity: 0;
cursor: pointer;
left: 18px;
}
.product label.compare .fa-check, .product label.compare input[type=checkbox]:checked ~ .fa-plus {
display: none;
}
.product label.compare input[type=checkbox]:checked ~ .fa-check {
display: block;
color: #5C5EDC;
}
.product.selected {
border: 1px solid #204faf;
}
.product:hover .product-info .product-image {
opacity: 1;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.compare-basket {
position: fixed;
padding: 0.75em;
width: 100%;
top: 0;
left: 0;
background-color: #2d2d2d;
z-index: 1000;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
text-align: right;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 1, 0.3, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.2, 1, 0.3, 1);
transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1);
transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}
.compare-basket .product-icon {
display: block;
vertical-align: middle;
background: #42444F;
width: 50px;
height: 50px;
padding: 5px;
margin: 0 3px;
border-radius: 2px;
position: relative;
}
.compare-basket .product-icon .fa {
cursor: pointer;
}
.compare-basket .product-icon .product-image {
display: block;
margin: 0 auto;
max-width: 100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.compare-basket .product-icon:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 4px;
z-index: -1;
box-shadow: -56px 0 #383942;
}
.compare-basket .product-icon button {
position: absolute;
overflow: hidden;
color: #ddd;
top: 0px;
right: 2px;
padding: 0;
font-size: 0.65em;
}
.compare-basket .product-icon button span {
font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: bold;
letter-spacing: 1px;
font-size: .813em;
vertical-align: middle;
display: inline-block;
}
.compare-basket .product-icon button span.invisible {
position: absolute;
top: 100%;
opacity: 0;
pointer-events: none;
}
.compare-basket .full {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: opacity 0.3s cubic-bezier(0.2, 1, 0.3, 1);
transition: opacity 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}
.compare-basket.basket-full .full {
color: #e97b7a;
opacity: 1;
}
.compare-basket.basket-full .product-icon .fa {
color: #e97b7a;
}
.compare-basket.basket-full .product-icon:after {
display: none;
}
.compare-basket.show {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.compare-basket button {
background: none;
}
.compare-basket button.action {
color: #000000;
background-color: #2C2D34;
background-color: #ACACAD;
border-radius: 2px;
-webkit-transition: background 0.2s;
transition: background 0.2s;
}
.compare-basket button.action span {
margin-left: 1em;
}
.compare-view {
position: fixed;
z-index: 100;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 0;
overflow: hidden;
top: 0;
left: 0;
z-index: 1001;
-webkit-transition: height 0s 0.4s;
transition: height 0s 0.4s;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
}
.compare-view:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.view-compare + .compare-view {
pointer-events: auto;
height: 100%;
-webkit-transition: none;
transition: none;
}
.view-compare + .compare-view .compare-item:nth-child(odd),
.view-compare + .compare-view .compare-item:nth-child(even) {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.compare-effect {
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 1s cubic-bezier(0.2, 1, 0.3, 1), -webkit-transform 1s cubic-bezier(0.2, 1, 0.3, 1);
transition: opacity 1s cubic-bezier(0.2, 1, 0.3, 1), -webkit-transform 1s cubic-bezier(0.2, 1, 0.3, 1);
transition: transform 1s cubic-bezier(0.2, 1, 0.3, 1), opacity 1s cubic-bezier(0.2, 1, 0.3, 1);
transition: transform 1s cubic-bezier(0.2, 1, 0.3, 1), opacity 1s cubic-bezier(0.2, 1, 0.3, 1), -webkit-transform 1s cubic-bezier(0.2, 1, 0.3, 1);
}
.compare-effect h3 {
color: #e97b7a;
font-size: 150%;
}
.compare-effect span {
color: #ffffff;
font-size: 150%;
}
.compare-effect .extra {
color: #e97b7a;
font-size: 100%;
display: block;
}
.compare-item:nth-child(odd) .compare-effect {
-webkit-transform: translate3d(0, -250px, 0);
transform: translate3d(0, -250px, 0);
}
.compare-item:nth-child(even) .compare-effect {
-webkit-transform: translate3d(0, 250px, 0);
transform: translate3d(0, 250px, 0);
}
.view-compare + .compare-view .compare-item:nth-child(odd) .compare-effect,
.view-compare + .compare-view .compare-item:nth-child(even) .compare-effect {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.compare-item {
height: 100%;
width: 50%;
background: #24252A;
text-align: center;
cursor: default;
padding: 2em 0;
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
}
.compare-item:nth-of-type(even) {
background: #212227;
}
.compare-item:nth-child(odd) {
-webkit-transform: translate3d(0, -100vh, 0);
transform: translate3d(0, -100vh, 0);
}
.compare-item:nth-child(even) {
-webkit-transform: translate3d(0, 100vh, 0);
transform: translate3d(0, 100vh, 0);
}
.compare-item .product__price {
color: #CECECE;
}
.view-compare + .compare-view .action-close {
pointer-events: auto;
opacity: 1;
-webkit-transition-delay: 0.4s, 0s;
transition-delay: 0.4s, 0s;
}
.action-buy {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
margin-top: 1em;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.action-button {
background: #2C2D34;
color: #fff;
border-radius: 2px;
-webkit-transition: background 0.2s;
transition: background 0.2s;
}
.action-remove {
position: absolute;
overflow: hidden;
color: #ddd;
top: 0px;
right: 2px;
padding: 0;
font-size: 0.65em;
border: 0;
}
.action-close {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
font-size: 1.5em;
color: #ddd;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity 0.3s, background 0.2s;
transition: opacity 0.3s, background 0.2s;
z-index: 1;
}
.view-compare + .compare .action-close {
pointer-events: auto;
opacity: 1;
-webkit-transition-delay: 0.4s, 0s;
transition-delay: 0.4s, 0s;
}
.compare-item:first-of-type:nth-last-of-type(3),
.compare-item:first-of-type:nth-last-of-type(3) ~ .compare-item {
width: 33.3333%;
}
.compare-item:first-of-type:nth-last-of-type(4),
.compare-item:first-of-type:nth-last-of-type(4) ~ .compare-item {
width: 25%;
}
.animate-rotateFall {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation: rotateFall 1s both ease-in;
animation: rotateFall 1s both ease-in;
}
@-webkit-keyframes rotateFall {
0% {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
20% {
-webkit-transform: rotateZ(3deg);
transform: rotateZ(3deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: rotateZ(0);
transform: rotateZ(0);
}
60% {
-webkit-transform: rotateZ(-3deg);
transform: rotateZ(-3deg);
}
100% {
-webkit-transform: rotateZ(0);
transform: rotateZ(0);
}
}
@keyframes rotateFall {
0% {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
20% {
-webkit-transform: rotateZ(3deg);
transform: rotateZ(3deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: rotateZ(0);
transform: rotateZ(0);
}
60% {
-webkit-transform: rotateZ(-3deg);
transform: rotateZ(-3deg);
}
100% {
-webkit-transform: rotateZ(0);
transform: rotateZ(0);
}
}
</style></head><body>
<html>
<head>
<meta charset="utf-8">
<title>Pen-a-Day</title>
</head>
<body class="js flex-box">
<p class="credit">This is a project based on Mary Lou in Blueprints,<br/>Product Comparison Layout & Effect,<br/> <a href="https://tympanus.net/codrops">https://tympanus.net/codrops</a></p>
<div class="compare-basket">
<span class="full">Basket is Full</span>
<button class="action action-compare"><i class="fa fa-check"></i><span>Compare</span></button>
</div>
<div class="view">
<header id="header">
<h1 class="inner-shadow">Pen-a-day</h1>
<h3>Day-6</h3>
</header>
<section class="grid">
<!-- Products -->
</section>
</div>
<div class="compare-view">
<button class="action action-close"><i class="fa fa-remove"></i><span class="invisible">Close comparison overlay</span></button>
</div>
</body>
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script >(function() {
var products = [
{
'title': 'Meiomi Pinot Noir',
'year': '2001',
'image': 'https://tympanus.net/Blueprints/ProductComparison/images/1.png',
'state': 'California',
'type': 'Pinot Noir',
'alcohol': 12,
'price': 19.90
},
{
'title': 'Chryseia',
'year': '2011',
'image': 'https://tympanus.net/Blueprints/ProductComparison/images/2.png',
'state': 'Douro',
'type': 'Touriga Nacional',
'alcohol': 14,
'price': 55.90
},
{
'title': 'Antucura Cabernet Sauvignon',
'year': '2013',
'image': 'https://tympanus.net/Blueprints/ProductComparison/images/10.png',
'state': 'Argentina',
'type': 'Cabernet Sauvignon',
'alcohol': 12,
'price': 15.90
},
{
'title': 'Leonetti Sangiovese',
'year': '2012',
'image': 'https://tympanus.net/Blueprints/ProductComparison/images/4.png',
'state': 'Washington',
'type': 'Sangiovese',
'alcohol': 13,
'price': 85.90
},
{
'title': 'Chateau Pontet-Canet',
'year': '2009',
'image': 'https://tympanus.net/Blueprints/ProductComparison/images/5.png',
'state': 'Pauillac, Bordeaux',
'type': 'Bordeaux',
'alcohol': 12,
'price': 269.90
},
{
'title': 'Lapostolle Clos Apalta',
'year': '2010',
'image': 'https://tympanus.net/Blueprints/ProductComparison/images/6.png',
'state': 'Chile',
'type': 'Bordeaux',
'alcohol': 12,
'price': 82.90
},
{
'title': 'Clarendon Hills Astralis',
'year': '2006',
'image': 'https://tympanus.net/Blueprints/ProductComparison/images/7.png',
'state': 'McLaren Vale',
'type': 'Syrah, Shiraz',
'alcohol': 12,
'price': 153.90
},
{
'title': 'Quintessa',
'year': '2001',
'image': 'https://tympanus.net/Blueprints/ProductComparison/images/8.png',
'state': 'California',
'type': 'Cabernet Sauvignon',
'alcohol': 12,
'price': 125.90
}
],
viewEl = $('.view'),
gridEl = viewEl.find('.grid'),
items = extractData(products),
basket;
function buildProducts(products){
if(products && products.length > 1){
products.forEach(function(product){
gridEl.append(product);
});
items = [].slice.call(gridEl.find('.product'));
return items;
}
}
function extractData(arr){
var productDiv, products = [],
label = '<label class="action compare">';
label += '<input type="checkbox" class="check-hidden" />';
label += '<i class="fa fa-plus"></i>';
label += '<i class="fa fa-check"></i>';
label += '<span class="invisible"></span>';
label += '</label>';
arr.forEach(function(product){
var el = '<div class="product">';
el += '<div class="product-info">';
el += '<img src="'+product.image+'" alt="'+product.title+', '+product.year+'" class="product-image">';
el += '<h3 class="product-title">'+product.title+'</h3>';
el += '<span>'+product.year+'</span>';
el += '<span class="extra">'+product.state+'</span>';
el += '<span class="extra">'+product.type+'</span>';
el += '<span class="extra">'+product.alcohol+'%</span>';
el += '<span class="extra">$'+product.price+'</span>';
el += '</div>';
el += label;
el += '</div>';
products.push(el);
});
return buildProducts(products);
}
function CompareBasket(arr){
this.el = $('.compare-basket');
this.compareCtrl = $('.action-compare');
this.compareWrapper = $('.compare-view');
this.closeCompareCtrl = this.compareWrapper.find('.action-close');
this.itemsAllowed = 4;
this.totalItems = 0;
this.items = [];
this.products = [];
this.compareCtrl.on('click', this._compareItems.bind(this));
var self = this;
this.closeCompareCtrl.on('click', function() {
self.el.addClass('show');
$('.view').removeClass('view-compare');
});
}
CompareBasket.prototype.add = function(item){
if( this.isFull() ) {
return false;
}
if(!this.isFull()){
this.el.removeClass('basket-full');
}
var preview = this.createItemPreview(item);
this.el.prepend(preview);
this.items.push(preview);
$(item).addClass('selected');
this.totalItems++;
if(this.totalItems > 0){
this.el.addClass('show');
}
if(this.isFull()){
this.el.addClass('basket-full');
viewEl.addClass('view-basket-full');
}
}
CompareBasket.prototype.isFull = function(){
return this.totalItems === this.itemsAllowed;
}
CompareBasket.prototype.removeItem = function(item){
if(this.isFull()){
this.el.removeClass('basket-full');
}
$(item).removeClass('selected');
var preview = $('[data-idx = "' + items.indexOf(item) + '"]');
$('[data-idx = "' + items.indexOf(item) + '"]').remove()
this.totalItems--;
if(this.totalItems <= 0){
this.el.removeClass('show');
}
var indexRemove = this.items.indexOf(preview);
this.items.splice(indexRemove, 1);
var checkbox = item.querySelector('label.compare > input[type="checkbox"]');
if( checkbox.checked ) {
checkbox.checked = false;
}
}
CompareBasket.prototype._compareItems = function() {
var self = this;
console.log(self);
[].slice.call(this.compareWrapper.find('div.compare-item')).forEach(function(item) {
item.remove();
});
console.log(this.items);
for(var i = 0; i < this.totalItems; ++i) {if (window.CP.shouldStopExecution(1)){break;}
var compareItemWrapper = document.createElement('div');
compareItemWrapper.className = 'compare-item';
var compareItemEffectEl = document.createElement('div');
compareItemEffectEl.className = 'compare-effect';
compareItemEffectEl.innerHTML = this.items[i].getAttribute('data-info');
compareItemWrapper.appendChild(compareItemEffectEl);
this.compareWrapper.append(compareItemWrapper);
}
window.CP.exitedLoop(1);
setTimeout(function() {
self.el.removeClass('show');
$('.view').addClass('view-compare');
}, 25);
}
CompareBasket.prototype.createItemPreview = function(item){
var self = this;
var preview = document.createElement('div');
preview.className = 'product-icon';
preview.setAttribute('data-idx', items.indexOf(item));
var removeCtrl = document.createElement('button');
removeCtrl.className = 'action-remove';
removeCtrl.innerHTML = '<i class="fa fa-remove"></i><span class="invisible">Remove product</span>';
removeCtrl.addEventListener('click', function() {
self.removeItem(item);
});
var productImageEl = item.querySelector('img.product-image').cloneNode(true);
preview.appendChild(productImageEl);
preview.appendChild(removeCtrl);
var productInfo = item.querySelector('.product-info').innerHTML;
preview.setAttribute('data-info', productInfo);
return preview;
}
function init(arr){
basket = new CompareBasket();
initEvents();
}
function initEvents(){
items.forEach(function(item){
var checkbox = item.querySelector('label.compare > input[type="checkbox"]');
checkbox.checked = false;
checkbox.addEventListener('click', function(ev) {
if( ev.target.checked ) {
if( basket.isFull() ) {
ev.preventDefault();
return false;
}
basket.add(item);
}
else {
basket.removeItem(item);
}
});
});
}
init(products);
})();
//# sourceURL=pen.js
</script>
</body></html>
