Cards experience

Size
10,660 Kb
Views
12,144

How do I make an cards experience?

Personal experiment for cards transitions.https://github.com/lorenzodianni/cards-experienceConcept: Charles Patterson | Images: Nick Slater. What is a cards experience? How do you make a cards experience? This script and codes were developed by Lorenzo D'Ianni on 29 September 2022, Thursday.

Cards experience Previews

Cards experience - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cards experience</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div>
<small> <p>Concept <a href="https://dribbble.com/CharlesPatterson" target="_blank">Charles Patterson</a></p> <p>Images <a href="https://dribbble.com/slaterdesign" target="_blank">Nick Slater</a></p>
</small>
<!-- GitHub Logo -->
<a href="https://github.com/lorenzodianni/cards-experience" target="blank" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style> <script src="js/index.js"></script>
</body>
</html>

Cards experience - Script Codes CSS Codes

.card.card--clone, .card.card--clone .banner-image, .card.card--clone .profile-picture, .card.card--clone .card__info, .card.card--clone .card__specials { -webkit-transition: all .4s ease; transition: all .4s ease;
}
.card.card--clone, .view-card { position: absolute; margin: 0; -webkit-transform: none; transform: none;
}
.card.card--animating, .card.card--animating .banner-image { border-radius: 0;
}
.card.card--animating .card__info, .card.card--animating .card__specials { opacity: 0;
}
.view-card__close:before, .view-card__close:after { content: ''; position: absolute; top: 50%; left: 50%; background-color: white; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
}
.card.card--animating, .view-card { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
}
@-webkit-keyframes view-card__presentation--in { 0% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 0; } 100% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; }
}
@keyframes view-card__presentation--in { 0% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 0; } 100% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; }
}
@-webkit-keyframes view-card__presentation--out { 0% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } 100% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 0; }
}
@keyframes view-card__presentation--out { 0% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } 100% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 0; }
}
@-webkit-keyframes view-card__close--in { 0% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } 100% { -webkit-transform: translate(0, 0%); transform: translate(0, 0%); }
}
@keyframes view-card__close--in { 0% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } 100% { -webkit-transform: translate(0, 0%); transform: translate(0, 0%); }
}
@-webkit-keyframes view-card__close--out { 0% { -webkit-transform: translate(0, 0%); transform: translate(0, 0%); } 100% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); }
}
@keyframes view-card__close--out { 0% { -webkit-transform: translate(0, 0%); transform: translate(0, 0%); } 100% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); }
}
@-webkit-keyframes view-card__card--in { 0% { -webkit-transform: translate(100%, 38%); transform: translate(100%, 38%); } 80% { opacity: 1; } 100% { -webkit-transform: translate(-50%, 38%); transform: translate(-50%, 38%); }
}
@keyframes view-card__card--in { 0% { -webkit-transform: translate(100%, 38%); transform: translate(100%, 38%); } 80% { opacity: 1; } 100% { -webkit-transform: translate(-50%, 38%); transform: translate(-50%, 38%); }
}
@-webkit-keyframes view-card__card--out { 0% { -webkit-transform: translate(-50%, 38%); transform: translate(-50%, 38%); } 0%, 20% { opacity: 1; } 100% { -webkit-transform: translate(100%, 38%); transform: translate(100%, 38%); opacity: 0; }
}
@keyframes view-card__card--out { 0% { -webkit-transform: translate(-50%, 38%); transform: translate(-50%, 38%); } 0%, 20% { opacity: 1; } 100% { -webkit-transform: translate(100%, 38%); transform: translate(100%, 38%); opacity: 0; }
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-overflow-scrolling: touch;
}
body { 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-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; min-height: 100vh; font: 300 1em/1em Arial, sans-serif; color: rgba(0, 0, 0, 0.64); background: #F6F6F6;
}
small { position: fixed; right: 0; bottom: 0; padding: 8px 24px; font-size: .8em;
}
small p { display: inline-block; margin: 0 12px;
}
small a { color: rgba(0, 0, 0, 0.74); font-weight: bold; text-decoration: none;
}
small a:hover { text-decoration: underline;
}
#app { position: relative; 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-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 320px; height: 568px; max-height: 568px; overflow: hidden; margin: 32px; border-radius: 2px; background: #FFF; box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px rgba(0, 0, 0, 0.1);
}
.cards { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; overflow-x: auto; width: 100%; height: 100%; overflow-y: hidden;
}
.card--ghost { width: 5%; display: -webkit-box; display: -ms-flexbox; display: flex; height: 1px; background: transparent; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;
}
.card { 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-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 262px; height: 352px; margin-left: 5%; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 20px 4px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.01);
}
.card:first-child { margin-left: calc((100% - 262px)/2);
}
.card__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; background-color: white; padding: 34px 28px;
}
.card__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: .9em;
}
.card__info-title { margin-bottom: auto;
}
.card__info-subtitle { font-size: .6em; font-weight: bold; color: rgba(0, 0, 0, 0.3); letter-spacing: .1em;
}
.card__specials { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.card__special { position: relative; width: 32px; height: 32px; border-radius: 50%; background-color: #e2e2e2; border: 3px solid white; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover;
}
.card__special:nth-child(1) { z-index: 3; -webkit-transform: translate(76%, 0); transform: translate(76%, 0);
}
.card__special:nth-child(2) { z-index: 2; -webkit-transform: translate(38%, 0); transform: translate(38%, 0);
}
.card__special:nth-child(3) { z-index: 1;
}
.card__special:last-child:before { content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);
}
.card__special:last-child:after { content: attr(more-specials); position: absolute; top: 50%; left: 60%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: .6em; color: white;
}
.card .banner-image { border-radius: 10px 10px 0 0;
}
.banner-image { position: relative; height: 71%; background-color: #e8e8e8; background-position: center; background-repeat: no-repeat; background-size: cover;
}
.profile-picture { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; border-radius: 9px; background-color: white; background-position: right center; background-repeat: no-repeat; background-blend-mode: hard-light; background-size: 1000%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05), 0px 0px 9px 2px rgba(0, 0, 0, 0.08);
}
.card.card--clone { box-shadow: none;
}
.card.card--animating .banner-image { height: 48%; background-position: center !important;
}
.card.card--animating .profile-picture { top: 28%;
}
.view-card { background-color: white; overflow-x: hidden; overflow-y: auto;
}
.view-card__presentation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: white; text-align: center; text-shadow: 0 0 20px rgba(0, 0, 0, 0.08), 0 0 26px rgba(0, 0, 0, 0.08); -webkit-animation: view-card__presentation--in 0.5s ease 1; animation: view-card__presentation--in 0.5s ease 1;
}
.view-card__title { font-size: 1.2em;
}
.view-card__subtitle { letter-spacing: .05em; margin-top: 6px; font-size: .6em;
}
.view-card__close { position: absolute; top: 0; left: 0; border-radius: 50%; width: 56px; height: 56px; opacity: .7; -webkit-animation: view-card__close--in 0.5s ease 1; animation: view-card__close--in 0.5s ease 1;
}
.view-card__close:before { width: 2px; height: 40%;
}
.view-card__close:after { height: 2px; width: 40%;
}
.view-card__close:active { background-color: rgba(255, 255, 255, 0.35);
}
.view-card .banner-image { height: 48%;
}
.view-card .profile-picture { top: 28%;
}
.view-card .card { margin: 0 0 12px 0; position: absolute; top: 10%; left: 50%; -webkit-transform: translate(-50%, 38%); transform: translate(-50%, 38%); -webkit-animation: view-card__card--in 0.5s ease 1; animation: view-card__card--in 0.5s ease 1; box-shadow: 0 10px 20px 4px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.02);
}
.view-card .card .banner-image { height: 76%; background-size: 10000%; background-position: center top;
}
.view-card--out .view-card__close { -webkit-animation: view-card__close--out 0.3s ease 1; animation: view-card__close--out 0.3s ease 1;
}
.view-card--out .view-card__presentation { -webkit-animation: view-card__presentation--out 0.3s ease 1; animation: view-card__presentation--out 0.3s ease 1;
}
.view-card--out .card { -webkit-animation: view-card__card--out 0.3s ease 1; animation: view-card__card--out 0.3s ease 1;
}

Cards experience - Script Codes JS Codes

'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var app = document.querySelector('#app');
var forEach = function forEach(array, fn) { return Array.from(array).forEach(fn);
};
var isFunction = function isFunction(value) { return typeof value === 'function';
};
var bindParallax = function bindParallax(list) { return forEach(list, function (card) { return card.card ? Card.applyParallax(card, '.banner-image') : null; });
};
var random = function random() { var min = arguments.length <= 0 || arguments[0] === undefined ? 3 : arguments[0]; var max = arguments.length <= 1 || arguments[1] === undefined ? 20 : arguments[1]; return Math.floor(Math.random() * (max - min + 1)) + min;
};
var randomAvatar = function randomAvatar() { return 'https://api.adorable.io/avatars/' + random(1, 1000);
};
var arrayFromInt = function arrayFromInt(n) { return Array.from(Array(n), function (u, i) { return i; });
};
var ProfilePicture = function ProfilePicture(imageUrl) { return '<div class="profile-picture" style="background-image: url(' + imageUrl + ')"></div>';
};
var BannerImage = function BannerImage(imageUrl, _ref) { var child = _ref.child; return '<div class="banner-image" style="background-image: url(' + imageUrl + ')">' + child + '</div>';
};
var ViewCard = function () { function ViewCard() { _classCallCheck(this, ViewCard); } ViewCard.create = function create(options) { var wrapper = document.createElement('div'); wrapper.innerHTML = '\n <div class="view-card">\n ' + BannerImage(options.image, { child: '\n ' + ProfilePicture(options.logo) + '\n <div class="view-card__close"></div>\n <div class="view-card__presentation">\n <div class="view-card__title">' + options.title + '</div>\n <div class="view-card__subtitle">' + options.subtitle + '</div>\n </div>\n ' }) + '\n <div class="view-card__body">\n ' + Card.create({ image: options.image, title: 'Project X', subtitle: '32 screens' }).outerHTML + '\n </div>\n </div>\n '; var _el = wrapper.children[0]; _el.connectedCard = options.connectedCard; return _el; }; ViewCard.close = function close(viewCard, callback) { viewCard.classList.add('view-card--out'); isFunction(callback) ? viewCard.addEventListener('animationend', callback.bind(null, viewCard)) : null; }; return ViewCard;
}();
var Card = function () { function Card() { _classCallCheck(this, Card); } Card.create = function create(options) { var wrapper = document.createElement('div'); wrapper.innerHTML = '\n <div class="card">\n ' + BannerImage(options.image, { child: options.logo ? ProfilePicture(options.logo) : '' }) + '\n <div class="card__body">\n <div class="card__info">\n <span class="card__info-title">' + options.title + '</span>\n <div class="card__info-subtitle">' + options.subtitle + '</div>\n </div>\n <div class="card__specials">\n ' + (options.specials ? options.specials.map(function (specialImg, i) { if (i <= 2) { var attr = i === 2 ? 'more-specials="+' + (options.specials.length - (i + 1)) + '"' : ''; return '<div class="card__special" style="background-image: url(' + specialImg + ')" ' + attr + '></div>'; } }).join('') : '') + '\n </div>\n </div>\n </div>\n '; var _el = wrapper.children[0]; _el.card = Object.assign({}, options); return _el; }; Card.applyParallax = function applyParallax(element, section) { var leftPosition = element.parentElement.scrollLeft - element.offsetLeft; var marginSize = (app.clientWidth - element.clientWidth) * 1.5; var position = 50 / (app.clientWidth / (leftPosition + marginSize + element.clientWidth)); element.querySelector(section).style.backgroundPosition = position + '% center'; }; Card.clone = function clone(element, _ref2) { var addClass = _ref2.addClass; var scrollTop = document.body.scrollTop; var _elClientRect = element.getBoundingClientRect(); var _elClone = element.cloneNode(true); _elClone.card = Object.assign({}, element.card); addClass ? _elClone.classList.add(addClass) : null; _elClone.style.top = _elClientRect.top + scrollTop - app.offsetTop + 'px'; _elClone.style.left = _elClientRect.left - app.offsetLeft + 'px'; _elClone.style.height = _elClientRect.height + 'px'; _elClone.style.width = _elClientRect.width + 'px'; return _elClone; }; Card.startAnimation = function startAnimation(card, onTransitionEnd) { var _clone = Card.clone(card, { addClass: 'card--clone' }); _clone.reverseAnimation = Card.reverseAnimation.bind(null, _clone); isFunction(onTransitionEnd) ? _clone.addEventListener('transitionend', onTransitionEnd) : null; app.appendChild(_clone); setTimeout(function () { return _clone.classList.add('card--animating'); }, 50); }; Card.reverseAnimation = function reverseAnimation(card, onTransitionEnd) { card.classList.remove('card--animating'); isFunction(onTransitionEnd) ? card.addEventListener('transitionend', onTransitionEnd) : null; }; return Card;
}();
var onCardTransitionEnd = function onCardTransitionEnd(counter) { return function (e) { if (!counter && e.target.className.includes('card--clone')) { ++counter; renderViewCard(e.target); } };
};
var onCardViewAnimationOutEnd = function onCardViewAnimationOutEnd(counter) { return function (viewCard) { if (counter) return; ++counter; removeViewCard(viewCard); };
};
var renderViewCard = function renderViewCard(connectedCard) { var options = Object.assign({ connectedCard: connectedCard }, connectedCard.card); var viewCard = ViewCard.create(options); app.appendChild(viewCard); document.querySelector('.view-card__close').addEventListener('click', function () { return ViewCard.close(viewCard, onCardViewAnimationOutEnd(0)); });
};
var removeViewCard = function removeViewCard(viewCard) { var connectedCard = viewCard.connectedCard; viewCard.remove(); connectedCard.reverseAnimation(function () { return connectedCard.remove(); });
};
var render = function render() { var cardsDOM = document.createElement('div'); var cards = [Card.create({ image: 'https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2059749/route-66.png', title: 'InVision Craft', subtitle: random() + ' PROJECTS', logo: 'https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2059749/route-66.png', specials: arrayFromInt(random()).map(randomAvatar) }), Card.create({ image: 'https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2053253/seattle.png', title: 'Nike Running', subtitle: random() + ' PROJECTS', logo: 'https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2053253/seattle.png', specials: arrayFromInt(random()).map(randomAvatar) }), Card.create({ image: 'https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2236968/anduin.png', title: 'Relate UI Kit', subtitle: random() + ' PROJECTS', logo: 'https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2236968/anduin.png', specials: arrayFromInt(random()).map(randomAvatar) }), Card.create({ image: 'https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2109505/sunset.png', title: 'Serum Design', subtitle: random() + ' PROJECTS', logo: 'https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2109505/sunset.png', specials: arrayFromInt(random()).map(randomAvatar) })]; cardsDOM.classList.add('cards'); cardsDOM.addEventListener('scroll', function () { return bindParallax(cardsDOM.children); }); forEach(cards, function (card) { cardsDOM.appendChild(card); card.addEventListener('click', function () { return Card.startAnimation(card, onCardTransitionEnd(0)); }); }); cardsDOM.insertAdjacentHTML('beforeEnd', '<div class="card--ghost"></div>'); app.appendChild(cardsDOM); document.addEventListener('DOMContentLoaded', function () { return bindParallax(cardsDOM.children); });
};
render();
Cards experience - Script Codes
Cards experience - Script Codes
Home Page Home
Developer Lorenzo D'Ianni
Username lorenzodianni
Uploaded September 29, 2022
Rating 3
Size 10,660 Kb
Views 12,144
Do you need developer help for Cards experience?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lorenzo D'Ianni (lorenzodianni) Script Codes
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!