Split Rainbow

index.html

<div class="rainbow">RAINBOW</div>

script.js

Splitting.chars('.rainbow')

scripts

<script src="https://unpkg.com/[email protected]/splitting.js"></script>

split-rainbow.markdown

Split Rainbow

A Pen by Christopher Wallis on CodePen.

License.

style.scss

html, body, .rainbow {
   height: 100%;
   overflow: hidden;
   font-family: PT Sans;
}

body {
   background-color: #111;
}
 

.rainbow .word { 
   --ratio:  calc(1 / var(--char-total));
   font-size: calc(100vw * var(--ratio));
}

.rainbow .char { 
   --color: calc(var(--char-index) * 360 / var(--char-total));
   --duration: 3600ms;
    
   background-color: hsl(var(--color), 60%, 65%);
   border: solid thin black;
   color: hsl(calc(var(--color)), 50%, 20%);
   flex: 0 0 inherit;
   width: calc(100% * var(--ratio));
   height: 100%;
   
   display: flex;
   flex-direction: column;
   justify-content: center;
   
   animation-name: flip;
   animation-duration: 4800ms;
   animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
   animation-delay: calc(160ms * var(--char-index));
   animation-iteration-count: infinite;
   animation-fill-mode: both;
}

.splitting > .word {
   display: flex;
   justify-content: space-evenly;  
   align-items: center;
   width: 100%;
   height: 100%;
   text-align: center;
}

@keyframes flip {
   0%, 10% {
      transform: scale(1) rotateY(0turn);
   }
   40%, 60% {
      transform: scale(.75) rotateY(0.5turn);
   }
   90%, 100% {
      transform: scale(1) rotateY(1turn);
   }
}

styles

<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" />