Playing Changes // Animated Book Cover

FEATURED

In this example below you will see how to do a Playing Changes // Animated Book Cover with some HTML / CSS and Javascript

based on the cover of the book found here: https://www.playingchangesbook.com/

Thumbnail
This awesome code was written by Adam Kuhn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Adam Kuhn ©
  • HTML
  • CSS
  • JavaScript
    .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 */
    

Comments