Cards experience

Developer

Size

10,660 Kb

Views

12,138

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,138

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
Ng-circle	3,355 Kb
AngularJS - Controller As	5,584 Kb
Material Design - Button in pure CSS	3,923 Kb
Off Canvas in SASS	5,680 Kb
Checkbox Style - SCSS	5,095 Kb
Ng-barcode	2,888 Kb
SidebarJS	3,666 Kb
Checkbox Style 2.0 - SCSS	4,075 Kb
AngularJS template	6,104 Kb
Smooth Scroll	3,561 Kb

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!

Similar Scripts & Codes

Name	Username	Size
CSS Heart Loaders	Nourabusoud	2,161 Kb
Under construction	GhostRider	1,642 Kb
A Pen by Ben Babics	Benbabics	2,957 Kb
Header	Er40	1,542 Kb
React TODO	Enieste	3,320 Kb
Coburg Banks SVG Logo	Mjtweaver	3,875 Kb
CircleType	Peterhry	3,535 Kb
3d css cube	Semenchenko	4,578 Kb
Multi-step GSAP animation	Acacheung	2,668 Kb
Header Line Issue	Charlie-volpe	1,768 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!