Cards experience

Developer

Size

10,660 Kb

Views

12,144

Cards experience Previews
Cards experience HTML Codes
Cards experience CSS Codes
Cards experience JS Codes

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();

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

Name	Size
Material Design - Switch	3,282 Kb
NgEasyModal	4,159 Kb
Off Canvas in SASS	5,680 Kb
Material Design - Animations	9,001 Kb
AngularJS template	6,104 Kb
Ng-barcode	2,888 Kb
AngularJS - Controller As	5,584 Kb
Smooth Scroll	3,561 Kb
Material Design - Button in pure CSS	3,923 Kb
Checkbox Style 2.0 - SCSS	4,075 Kb

Create amazing sales emails 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!

Similar Scripts & Codes

Name	Username	Size
SlideupBoxes	Gavra	23,772 Kb
Cant get enough icecream in pure css3	Melawire	4,322 Kb
Pure CSS albums gallery	Renaudtertrais	2,978 Kb
Css3 slide	Nakome	3,190 Kb
A Pen by Sooba	Sooba	2,516 Kb
SVG Scalable Text	Said_FD	1,451 Kb
Box-sizing	Elad2412	1,572 Kb
Custom Select Element	Agrayson	3,616 Kb
Swiftype Lower Third	Zumwalt	4,796 Kb
Barber Shop	Bhlaird	6,270 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!