.wrap
-4.times do
.quadrant
-10.times do
.block
.heading
%h1 Playing Changes
%h3
%span>Jazz for the New Century
Nate Chinen
/*Downloaded from https://www.codeseek.co/cobra_winfrey/playing-changes-animated-book-cover-xzdWdb */
$p: #ffddd5;
$br: #1e0a02;
$b: #21201e;
$g: #00a854;
$y: #f2cd2e;
$r: #d2162c;
$bl: #4683b6;
$w: #fff;
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background: radial-gradient(circle at center, $b, darken($b, 10%));
font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype",
Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;
overflow:hidden;
.wrap {
width: 350px;
min-width:350px;
height: 500px;
background: $p;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 20% 20% 20% 20% 20%;
.heading {
grid-column: 1 / span 2;
grid-row: 1;
background: linear-gradient(
to right,
$w 49.75%,
$y 49.5%,
$y 50.25%,
$w 50.25%
);
box-shadow: 0 10px 0 $w, inset 0 15px 0 $w, inset 0 -10px 0 $w;
display: grid;
grid-template-columns: 50% 50%;
padding: 30px 20px;
h1 {
grid-column: 1;
text-transform: uppercase;
font-weight: 500;
font-size: 24px;
letter-spacing: 2px;
line-height: 1;
margin: 0;
position: relative;
font-variant: small-caps;
padding: 0 0 0 10px;
}
h3 {
grid-column: 2;
font-weight: 600;
font-size: 22px;
line-height: 1.25;
position: relative;
display: block;
padding: 0 0 0 15px;
margin-top: 5px;
span {
font-size: 14px;
display: block;
font-style: italic;
font-weight: 100;
}
}
}
.quadrant {
position: relative;
box-sizing: border-box;
&:first-of-type {
grid-column: 1;
grid-row: 2 / span 2;
display: grid;
grid-template-columns: 15px 15px 15px 15px 15px;
grid-column-gap: 15px;
padding: 75px 30px 0;
.block {
background: $b;
animation: raiseup 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite
alternate;
@for $i from 1 through 5 {
&:nth-of-type(#{$i}) {
animation-delay: #{$i * -2}s;
}
}
@keyframes raiseup {
80% {
background: $b;
transform: translateY(0);
}
85% {
background: $bl;
transform: translateY(-15px);
}
100% {
background: $bl;
transform: translateY(-15px);
}
}
&:nth-of-type(n + 6) {
display: none;
}
}
}
&:nth-of-type(2) {
grid-column: 1;
grid-row: 4 / span 2;
display: grid;
grid-template-columns: 30px 30px 30px;
grid-column-gap: 22.5px;
grid-template-rows: 30px 30px 30px;
grid-row-gap: 17.5px;
padding: 20px 30px;
.block {
background: $b;
animation: rotate 9s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite
alternate;
@for $i from 1 through 9 {
&:nth-of-type(#{$i}) {
animation-delay: #{$i * -2}s;
}
}
@keyframes rotate {
90% {
background: $b;
transform: rotate(0deg);
}
95% {
background: $y;
transform: rotate(135deg);
}
100% {
background: $y;
transform: rotate(135deg);
}
}
&:nth-of-type(10) {
display: none;
}
}
}
&:nth-of-type(3) {
grid-column: 2;
grid-row: 2 / span 2;
display: grid;
grid-template-columns: 30px 30px 30px;
grid-column-gap: 22.5px;
grid-template-rows: 30px 30px 30px;
grid-row-gap: 17.5px;
padding: 20px 15px;
.block {
background: $b;
border-radius: 100%;
animation: greenup 3.25s cubic-bezier(0.175, 0.885, 0.32, 1.275)
infinite alternate;
@for $i from 1 through 9 {
&:nth-of-type(#{$i}) {
animation-delay: #{$i * -0.75}s;
}
}
@keyframes greenup {
90% {
background: $b;
transform: rotate(0deg);
}
95% {
background: $g;
transform: translateY(-12.5px);
}
100% {
background: $g;
transform: translateY(-12.5px);
}
}
&:last-of-type {
display: none;
}
}
}
&:nth-of-type(4) {
grid-column: 2;
grid-row: 3 / span 3;
display: grid;
grid-template-columns: 95%;
grid-template-rows: 7px 7px 7px 7px 7px 7px 7px 7px 7px 7px;
grid-row-gap: 13px;
padding: 60px 15px 0 15px;
.block {
background: $b;
animation: redtilt 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite
alternate;
&:nth-of-type(even) {
animation: redtilt2 4s cubic-bezier(0.175, 0.885, 0.32, 1.275)
infinite alternate;
}
@for $i from 1 through 10 {
&:nth-of-type(#{$i}) {
animation-delay: #{$i * -0.75}s;
}
}
@keyframes redtilt {
95% {
background: $b;
transform: rotate(0deg);
}
97.5% {
background: $r;
transform: rotate(-7.5deg);
}
100% {
background: $r;
transform: rotate(-7.5deg);
}
}
@keyframes redtilt2 {
85% {
background: $b;
transform: rotate(0deg);
}
92.5% {
background: $r;
transform: rotate(7.5deg);
}
100% {
background: $r;
transform: rotate(7.5deg);
}
}
}
}
}
}
}
/*Downloaded from https://www.codeseek.co/cobra_winfrey/playing-changes-animated-book-cover-xzdWdb */