- var cards = 48;
mixin cardText
.contents
h2
strong="ABC"
="Design"
h3="Don Joel"
="Web Developer"
br
br
span="✉️"
="donjoel@example.com"
br
span="📞"
="(123) 456-7890"
br
br
="123 Nowhere Street"
br
="Dover, DE"
mixin cityOnly
.contents
.city="Dover, DE"
.cards
- while (cards--) {
a(href="#").stack
.card.top
+cardText
.card.mid-top
+cityOnly
.card.middle
+cityOnly
.card.mid-bottom
+cityOnly
.card.bottom
+cityOnly
.card.shadow
- }
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-size: 18px;
--cardW: 14em;
--cardH: 8em;
--cardZInc: 1.5em;
}
body {
font: 1em "Open Sans", sans-serif;
height: 100vh;
overflow-x: hidden;
position: relative;
}
/* Grid */
.cards, .stack {
transform-style: preserve-3d;
}
.cards {
--scroll: 0px;
display: grid;
grid-template: repeat(48, var(--cardH)) / var(--cardW);
grid-gap: 1.5em;
/* outline: 1px solid red; */
padding-bottom: calc(var(--cardH) * 3);
position: absolute;
top: 50%;
left: 50%;
margin: auto;
transform: translate(-50%,calc(-50% + var(--scroll))) rotateX(45deg) rotateZ(45deg) translateY(calc(50% - var(--scroll)));
}
.stack {
display: block;
position: relative;
}
.contents {
color: #000;
font-size: 0.5em;
line-height: 1.25;
-webkit-font-smoothing: antialiased;
}
.stack:nth-of-type(even) .contents {
color: #fff;
}
.contents h2 {
color: #aff;
font-size: 2em;
font-weight: 400;
margin-bottom: 0.25em;
}
.contents span {
margin-right: 0.75em;
}
.city {
margin-top: 11.75em;
}
/* Card backgrounds */
.stack:nth-of-type(4n + 2) .card {
background-position: 0 100%;
}
.stack:nth-of-type(4n + 3) .card {
background-position: 100% 0;
}
.stack:nth-of-type(4n + 4) .card {
background-position: 100% 100%;
}
.stack:nth-child(8n + 5) .card,
.stack:nth-child(8n + 6) .card,
.stack:nth-child(8n + 7) .card,
.stack:nth-child(8n + 8) .card {
filter: hue-rotate(90deg);
-webkit-filter: hue-rotate(90deg);
}
.stack:nth-child(12n + 9) .card,
.stack:nth-child(12n + 10) .card,
.stack:nth-child(12n + 11) .card,
.stack:nth-child(12n + 12) .card {
filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
}
/* Card hover */
.stack:hover .top, .stack:focus .top {
transform: translateZ(calc(var(--cardZInc)*5));
}
.stack:hover .mid-top, .stack:focus .mid-top {
transform: translateZ(calc(var(--cardZInc)*4));
}
.stack:hover .middle, .stack:focus .middle {
transform: translateZ(calc(var(--cardZInc)*3));
}
.stack:hover .mid-bottom, .stack:focus .mid-bottom {
transform: translateZ(calc(var(--cardZInc)*2));
}
.stack:hover .bottom, .stack:focus .bottom {
transform: translateZ(var(--cardZInc));
}
.stack:hover .shadow, .stack:focus .shadow {
filter: blur(5px);
-webkit-filter: blur(5px);
opacity: 0.2;
}
/* Other card styles */
.card {
background-image: url(https://cdn.weasyl.com/static/media/dd/c2/45/ddc2458130dd90cf4d5f5783f14f7835cf980110df9131354325a358a3d3d60d.png);
background-size: 200% 200%;
box-shadow: -1px -1px 0 rgba(0,0,0,0.2) inset;
color: #000;
padding: 0.75em;
position: absolute;
transition: all 0.3s;
width: 100%;
height: 100%;
}
.top {
transform: translateZ(5px);
z-index: 5;
}
.mid-top {
transform: translateZ(4px);
z-index: 4;
}
.middle {
transform: translateZ(3px);
z-index: 3;
}
.mid-bottom {
transform: translateZ(2px);
z-index: 2;
}
.bottom {
transform: translateZ(1px);
z-index: 1;
}
.shadow {
background: #000;
filter: blur(2px);
-webkit-filter: blur(2px);
opacity: 0.4;
}
/* Alter grid at breakpoints */
@media screen and (min-width: 361px) {
.cards {
grid-template: repeat(24, var(--cardH)) / repeat(2, var(--cardW));
}
}
@media screen and (min-width: 601px) {
.cards {
grid-template: repeat(16, var(--cardH)) / repeat(3, var(--cardW));
}
}
@media screen and (min-width: 841px) {
.cards {
grid-template: repeat(12, var(--cardH)) / repeat(4, var(--cardW));
}
}
window.addEventListener("scroll",scrollGrid);
window.addEventListener("wheel",noShakeScroll);
function scrollGrid() {
let transY = window.pageYOffset,
cards = document.querySelector(".cards");
cards.style.setProperty("--scroll",transY + "px");
}
scrollGrid();
/* Without this, the `items` div erratically shakes while scrolling with wheel or touchpad. The issue still persists in Safari though… */
function noShakeScroll(e) {
this.scrollBy(0,e.deltaY);
e.preventDefault();
}
Also see: Tab Triggers