@keyframers 2.0.0 Intro Animation

HTML

              
                
<div class="kf-bg"></div>
<div class="kf-bg small"></div>

<div class="kf-logo">

  <div class="kf-diamond left"></div>
  <div class="kf-diamond center"></div>
  <div class="kf-diamond right"></div>

  <div class="kf-k">
    <span class="kf-k-line"></span>
    <span class="kf-k-arrow"></span>
  </div>


  <div class="kf-text">
    <span class="the">the</span>
    <span data-splitting>@keyframers</span>
  </div>

</div>

<svg viewBox="0 0 122 68" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-miterlimit="1.5">
  <path d="M33.807 6.788L6.654 33.941l27.153 27.153L60.96 33.941 33.807 6.788zM88.113 6.788L60.96 33.941l27.153 27.153 27.153-27.153L88.113 6.788z" fill="none" stroke="#ffde09" stroke-width="7.2"/>
  <path d="M60.96 0L27.019 33.941 60.96 67.882l33.941-33.941L60.96 0z" fill="#ffde09"/>
  <path d="M70.56 43.541l-9.6-9.6 9.6-9.6M55.68 21.941V46.11" fill="none" stroke="#333" stroke-width="7.2" stroke-linecap="butt"/>
</svg>


<pre class="kf-code-bg">

.house {
  height: 225px;
  width: 520px;
}

.house-label {
  text-transform: uppercase;
  font-weight: bold;
  padding-left: calc(20px + 1ch);
  font-size: 25px;
  color: $color-primary;
  margin: 30px 0 5px;
  font-family: Arial Rounded MT Bold, Helvetica Neue, Helvetica, sans serif;
  
  &:before, &:after {
    position: absolute;
    text-align: right;
    left: 0;
    top: 0;
    padding: 0 .5ch;
    will-change: transform;
  }
  
  &:before {
    content: attr(data-prev-rooms);
  }
  
  &:after {
    content: attr(data-rooms);
  }
  
  @for $i from 6 through 3 {
    &[data-rooms="#{$i}"][data-rooms-delta^="-"] {
      &:before {
        animation: prev-label-up-#{$i} $duration $easing both;
      }
      &:after {
        animation: label-up-#{$i} $duration * 2 $easing both;
      }
    }

    &[data-rooms="#{$i}"]:not([data-rooms-delta^="-"]) {
      &:before {
        animation: prev-label-down-#{$i} $duration $delay $easing both;
      }
      &:after {
        animation: label-down-#{$i} $duration * 2 $delay $easing both;
      }
    }

    @keyframes prev-label-up-#{$i} {
      from {
        transform: translateY(0);
        opacity: 1;
      }
      to {
        transform: translateY(-100%) scale(1.5);
        opacity: 0;
      }
    }
    @keyframes prev-label-down-#{$i} {
      from {
        transform: translateY(0);
        opacity: 1;
      }
      to {
        transform: translateY(100%) scale(1.5);
        opacity: 0;
      }
    }

    @keyframes label-up-#{$i} {
      from {
        transform: translateY(100%);
        opacity: 0;
      }
      50% {
        transform: translateY(0) scale(1.5);
        opacity: 1;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    @keyframes label-down-#{$i} {
      from {
        transform: translateY(-100%);
        opacity: 0;
      }
      50% {
        transform: translateY(0) scale(1.5);
        opacity: 1;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
}



.house-wings {
  position: absolute;
  bottom: 0;
  height: 125px;
  
  &:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    border: 5px solid $color-primary;
    box-shadow: inset 0 15px $color-shadow;
  }
  
  &:after {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    width: 100%;
    background-color: $color-primary;
    transform: scaleX(1.2)
  }
  
  > .house-roof {
    height: 65px;
    width: calc(100% + 40px);
    left: -20px;
    border-bottom: 5px solid $color-primary;
    position: absolute;
    bottom: 100%;
    
    &:before, &:after {
      position: absolute;
      height: 100%;
      width: 50%;
      background-color: $color-roof;
      border: 5px solid $color-primary;
      border-bottom: none;
    }
    
    &:before {
      left: 0;
      transform-origin: bottom left;
      transform: skewX(-30deg);
      border-right: none;
    }
    &:after {
      right: 0;
      transform-origin: bottom right;
      transform: skewX(30deg);
      border-left: none;
    }
  }
  
  .house-ledge {
    position: absolute;
    bottom: -15px;
    width: 100%;
    height: 15px;
    border: 5px solid $color-primary;
    background-color: $color-ledge;
  }
}

.house-facade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 15px 0 rgba(darken($color-shadow, 20%), 0.2);
  
  &:before, &:after {
    position: absolute;
    height: 100%;
    width: 50%;
    background-color: #fff;
    top: 0;
    border-top: 5px solid $color-primary;
    box-shadow: inset 0 calc(var(--front-width) / 6) $color-shadow;
  }
  
  &:before {
    left: 0;
    transform-origin: top left;
    transform: skewY(-40deg);
    border-left: 5px solid $color-primary;
  }
  
  &:after {
    right: 0;
    transform-origin: top right;
    transform: skewY(40deg);
    border-right: 5px solid $color-primary;
  }
}

$wing-roof-moves: (
  6: (
    (origin: bottom left, transform: translateY(-10px) rotate(-5deg)),
    (origin: bottom right, transform: translateY(-5px) rotate(2deg)),
  ),
  5: (
    (origin: bottom right, transform: translateY(-20px) rotate(10deg)),
    (origin: bottom left, transform: translateY(-10px) rotate(-2deg)),
  ),
  4: (
    (origin: bottom left, transform: translateY(-15px) rotate(-10deg)),
    (origin: bottom right, transform: translateY(-10px) rotate(2deg)),
  ),
  3: (
    (origin: bottom right, transform: translateY(-20px) rotate(10deg)),
    (origin: bottom left, transform: translateY(-10px) rotate(-2deg)),
  ),
);

$front-roof-moves: (
  6: (
    (origin: bottom right, transform: translateY(-5px) rotate(5deg)),
    (origin: bottom left, transform: translateY(-2px) rotate(-1deg)),
  ),
  5: (
    (origin: bottom left, transform: translateY(-10px) rotate(-5deg)),
    (origin: bottom right, transform: translateY(-5px) rotate(1deg)),
  ),
  4: (
    (origin: bottom right, transform: translateY(-5px) rotate(10deg)),
    (origin: bottom left, transform: translateY(-2px) rotate(-2deg)),
  ),
  3: (
    (origin: bottom right, transform: translateY(-10px) rotate(-5deg)),
    (origin: bottom left, transform: translateY(-5px) rotate(2deg)),
  ),
);

$house-moves: (
  6: (
    (transform: scale(.95, 1.05)),
    (transform: scale(.98, 1.02)),
  ),
  5: (
    (transform: scale(.9, 1.2)),
    (transform: scale(.95, 1.05)),
  ),
  4: (
    (transform: scale(.9, 1.2)),
    (transform: scale(.95, 1.05)),
  ),
  3: (
    (transform: scale(.9, 1.2)),
    (transform: scale(.95, 1.05)),
  ),
);

$facade-moves: (
  6: (
    (transform: scale(.95, 1.05)),
    (transform: scale(.98, 1.02)),
  ),
  5: (
    (transform: scale(.9, 1.05)),
    (transform: scale(.95, 1.02)),
  ),
  4: (
    (transform: scale(.9, 1.05)),
    (transform: scale(.95, 1.02)),
  ),
  3: (
    (transform: scale(.9, 1.05)),
    (transform: scale(.95, 1.02)),
  ),
);

$chimney-moves: (
  6: (
    (transform: rotate(10deg) translateY(-15px)),
    (transform: rotate(-5deg) translateY(-5px)),
  ),
  5: (
    (transform: rotate(-10deg) translateY(-15px)),
    (transform: rotate(5deg) translateY(-5px)),
  ),
  4: (
    (transform: rotate(10deg) translateY(-15px)),
    (transform: rotate(-5deg) translateY(-5px)),
  ),
  3: (
    (transform: rotate(-10deg) translateY(-15px)),
    (transform: rotate(5deg) translateY(-5px)),
  ),
);
    
$move-parts: (
  wing-roof: $wing-roof-moves,
  front-roof: $front-roof-moves,
  house: $house-moves,
  facade: $facade-moves,
  chimney: $chimney-moves,
);

@function either($a, $b) {
  @return if($a, $a, $b);
}

@each $part, $move-config in $move-parts {
  @each $rooms, $moves in $move-config {
    $move-1: nth($moves, 1);
    $move-2: nth($moves, 2);
  @keyframes #{$part}-#{$rooms}-move {
      from {
        transform-origin: either(map-get($move-1, origin), bottom center);
      }
      25% {
        transform: map-get($move-1, transform);
      }
      50% {
        transform-origin: either(map-get($move-1, origin), bottom center);
        transform: none;
      }
      51% {
        transform-origin: either(map-get($move-2, origin), bottom center);
      }
      75% {
        transform-origin: either(map-get($move-2, origin), bottom center);
        transform: map-get($move-2, transform);
      }
      to {
        transform-origin: either(map-get($move-2, origin), bottom center);
        transform: none;
      }
    }
  }
}

@for $i from 6 through 3 {
  [data-rooms="#{$i}"] {
    .house-wings > .house-roof {
      animation: wing-roof-#{$i}-move $duration $delay $easing;
    }
    .house-front > .house-gable {
      animation: front-roof-#{$i}-move $duration $delay $easing;
    }
    .house-wings:before,
    .house-left-wing,
    .house-right-wing {
      animation: house-#{$i}-move $duration $delay $easing;
    }
    .house-facade,
    .house-front .house-window,
    .house-doorway {
      animation: facade-#{$i}-move $duration $delay $easing;
    }
    .house-chimney {
      animation: chimney-#{$i}-move $duration $delay $easing;
    }
  }
}


.house-front {
  position: absolute;
  bottom: 0;
  height: 160px;
  
  > .house-window {
    width: 60px;
    height: 55px;
    position: absolute;
    left: calc(50% - 30px);
    top: -10px;
    
    [data-rooms="4"] &,
    [data-rooms="3"] & {
      border-bottom-left-radius: 50% 40%;
      border-bottom-right-radius: 50% 40%;
      
      &:after {
        display: none;
      }
    }
    
    [data-rooms="4"]:not([data-prev-rooms="3"]) &,
    [data-rooms="3"]:not([data-prev-rooms="4"]) &,
    [data-rooms="5"]:not([data-prev-rooms="6"]) &,
    [data-rooms="6"]:not([data-prev-rooms="5"]) &,
    {
      > .house-sparkle {
        display: block;
      }
    }
    
    > .house-sparkle {
      display: none;
    }
  }
  
  .house-ledge {
    height: 20px;
    width: 20px;
    position: absolute;
    background: #000;
    left: calc(50% - 10px);
    background-color: $color-ledge;
    border: 5px solid $color-primary;
    transform: rotate(-45deg) translate(5px, -5px);
    
    &:before, &:after {
      position: absolute;
      width: calc(var(--front-width) / 1.25);
      height: calc(100% + 10px);
      top: -5px;
      background-color: $color-ledge;
      border: 5px solid $color-primary;
    }
    
    &:before {
      right: 100%;
      border-right: none;
    }
    &:after {
      left: 0;
      transform-origin: left bottom;
      transform: rotate(90deg) translate(-5px, 5px);
      border-left: none;
    }
    
  }
}

</pre>

CSS

              
                
$yellow: #FFB909;
$gray-dark: #2B2E31;

$bg: $gray-dark;

$duration: 7s;
$delay: 0.5s;

// $yellow: #FFF;
// $gray-dark: #0F0;
// $bg: #0F0;
// $duration: $duration * 2;
// $delay: 2s;

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: $bg;
}

body { display: grid; justify-content: center; align-items: center; grid-template-rows: 1fr; }
svg { 
  width: 2.5em;
  display: block;
  display: none;
  opacity: 0;
  position: relative;
  z-index: 2;

  path {
    fill: #000 !important;
  }
  path[stroke] {
    stroke: #000 !important;
    fill: none !important;
  }
  path:last-child {
    stroke: #FFF !important;
  }
}

body:hover svg { opacity: 0.1; }

svg, .kf-logo.kf-logo {
  font-size: 18vw;
  grid-area: 1/ 1;
}

/* ---------------------------------- */

.kf-bg {
  position: absolute;
  top: -50vmax; right: -50vmax; bottom: -45vmax; left: -50vmax;
  margin: auto;
  width: 110vmax;
  height: 110vmax;
  z-index: 2;
  opacity: .2;
  mix-blend-mode: luminosity;

  &.small {
    width: 60vmax;
    height: 60vmax;
    opacity: .3;
  }


  &:before {
    content: '';
    display: block;
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/kf_waves.png');
    background-size: cover;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;

    $size: 15%;
    $offset: (100% - $size);
    clip-path: polygon(0% 0%, 0% 100%, $size 100%, $size $size, $offset $size, $offset $offset, $size $offset, $size 100%, 100% 100%, 100% 0%);

    transform: rotate(45deg);
    // transform: rotate(45deg);
  }
}


/* ---------------------------------- */

.kf-logo {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  margin-bottom: .35em;

  *, 
  *:before, 
  *:after { box-sizing: inherit; }

  font-size: 18vw;
  display: flex;
  align-items: center;
}

@import url('https://fonts.googleapis.com/css?family=Orbitron:700');
.kf-text {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  font-size: .4em;
  color: $yellow;
  text-shadow: 0 .1em 0 #000;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1em;
  white-space: nowrap;
  z-index: 1;
  .the {
    position: absolute;
    top: 0;
    left: 5.6em;
    color: #FFF;
    font-size: .2em;
    z-index: -1;
    text-shadow: 0 .1em 0 #000;
  }
}

/* ---------------------------------- */

.kf-diamond {
  transform: rotate(45deg);
  border: solid .15em $yellow;
  width: .9em;
  height: .9em;
  z-index: 2;
}

.kf-diamond.center {
  background: $yellow;
  width: 1em;
  height: 1em;
  margin: 0 -.4em;
}

/* ---------------------------------- */

.kf-diamond {
  width: .93em;
  height: .93em;
  // border-color: red;
}

.kf-diamond.center {
  margin: 0 -.4em;
}

/* ---------------------------------- */

.kf-k { 
  position: absolute; 
  z-index: 3;
  color: transparent; 
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: .5em;
  width: 1em;
  height: 1em;
  margin: auto;
  display: flex;
}

.kf-k-line {
  display: block;
  width: .3em;
  height: 1em;
  background: $gray-dark;
  margin-left: .15em;
  margin-right: -.17em;
}

.kf-k-arrow {
  display: block;
  position: relative;
  height: 1em;
  top: .25em;
  left: .32em;
  transform:  rotate(-45deg);

  &:before,
  &:after {
    content: '';
    display: block;
    width: .3em;
    height: .7em;
    background: $gray-dark;

  }

  &:before {
    width: .7em;
    height: .3em;
    position: absolute;
    left: 0;
    top: 0;
  }
}


/* ---------------------------------- */

.kf-code-bg {
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: 100vw;
  height: 100vh;
  font-size: .6vw;
  line-height: 1.5;
  white-space: pre-wrap;
  z-index: 1;
  opacity: 0.15;

  columns: 6;
  column-gap: 4em;
  height: fit-content;

  .word {
    display: inline-block;
    border-radius: 0.4em;
    height: 0.8em;
    min-width:1em;
    color: transparent;
  }

  .cm-1 { background-color: #CDD3DE; }

  .cm-2 {
    background-color: #65737e;
  }
  .cm-3 {
    background-color: #c594c5;
  }
  .cm-4 {
    background-color: #c594c5;
  }
  .cm-5 {
    background-color: #99c794;
  }
  .cm-6 {
    background-color: #ec5f67;
  }
  .cm-7 {
    background-color: #fac863;
  }
  .cm-8 {
    background-color: #99c794;
  }
  .cm-9 {
    background-color: #6699cc;
  }
  .cm-10 {
    background-color: #f99157;
  }
  .cm-11 {
    background: rgba(236,95,103,0.4);
  }
  .cm-12 {
    background-color: #cdd3de;
  }
  .cm-13 {
    background-color: #ec5f67;
  }
  .cm-14 {
    background-color: #c594c5;
  }
}



/* ---------------------------------- */


*,
*:before,
*:after {
  animation-duration: $duration;
  animation-timing-function: cubic-bezier(.5, 0, .5, 1);
  animation-delay: $delay;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

// .kf-logo {
//   animation-name: kf-logo;
//   animation-timing-function: cubic-bezier(.2,.6,.5,1);

//   @keyframes kf-logo {
//     0%, 20% { transform: translateY(.25em) scale(1); } 
//     //35% { transform: rotate(40deg) scale(1); }
//     100% { transform: translateY(0em) scale(0.7); }
//   }
// }


.kf-k {
  animation-name: kf-k;
  font-size: 2em;
  @keyframes kf-k {
    0%, 15%, 100% { transform: scale(1); } 
    34%, 88% { transform: scale(0.25);
      animationg-timing-function: cubic-bezier(.5,0,.8,.7);
    }
  }  
}

.kf-k-line {
  animation-name: kf-k-line;
  animation-timing-function: cubic-bezier(0,.8,.3,1);
  @keyframes kf-k-line {
    0%, 12% { transform: translateY(-100vh); }// scaleY(0); } 
    18%, 88% { transform: translateY(0);
      animation-timing-function: cubic-bezier(.5,0,.8,.7);
    }
    93%, 100%  { transform: translateY(100vh); }
  }  
}

.kf-k-arrow::before {
  animation-name: kf-k-arrow-before;
  transform-origin: left center;
  animation-timing-function: cubic-bezier(0,.8,.3,1);
  @keyframes kf-k-arrow-before {
    0%  { transform: translateX(100vw); }// scaleX(0); } 
    6%, 91% { transform: scaleX(1);
      animation-timing-function: cubic-bezier(.5,0,.8,.7);
    }
    96%, 100% { transform: translateX(-120vw); }
  }  
}

.kf-k-arrow::after {
  animation-name: kf-k-arrow-after;
  transform-origin: center top;
  animation-timing-function: cubic-bezier(0,.8,.3,1);
  @keyframes kf-k-arrow-after {
    0%, 5% { transform: translateY(100vh); } //scaleY(0); } 
    10%, 89% { 
      transform: scaleY(1);
      animation-timing-function: cubic-bezier(.5,0,.8,.7);
    }
    94%, 100% { transform: translateY(-120vh); }
  }  
}

/* ---------------------------------- */

.kf-diamond.center {
  animation-name: kf-center-scale;

  @keyframes kf-center-scale {
    0%, 10% { transform: rotate(270deg) scale(10); } 
    //35% { transform: rotate(40deg) scale(1); }
    35%, 88% { transform: rotate(45deg) scale(1); }
    100% { transform: rotate(-270deg) scale(10); } 
  }
}

.kf-diamond.left {
  animation-name: kf-diamond-left-side;
  animation-timing-function: cubic-bezier(0,.7,.3,1);

  @keyframes kf-diamond-left-side {
    0%, 30% { transform: translateX(.6em) rotate(45deg) scale(.85); } 
    60%, 100% { transform: translateX(0) rotate(45deg) scale(1); }
  }
}
.kf-diamond.right {
  animation-name: kf-diamond-right-side;
  animation-timing-function: cubic-bezier(0,.7,.3,1);

  @keyframes kf-diamond-right-side {
    0%, 30% { transform: translateX(-.6em) rotate(45deg) scale(.85); } 
    60%, 100% { transform: translateX(0) rotate(45deg) scale(1); }
  }
}

/* ---------------------------------- */


.kf-bg {
  animation-name: kf-bg;
  animation-timing-function: cubic-bezier(0,.7,.3,1);

  @keyframes kf-bg {
    0%, 15% { transform: scale(.4) rotate(40deg); } 
    100% { transform: scale(1) rotate(0deg); }
  }
}

.kf-bg.small {
  animation-name: kf-bg-small;

  @keyframes kf-bg-small {
    0%, 20% { transform: scale(.4) rotate(-20deg); } 
    100%, 100% { transform: scale(1) rotate(0deg); }
  }
}


.kf-code-bg {

  mask-image: radial-gradient(#000 15%, transparent ); 
  mask-position: center center;
  mask-repeat: no-repeat;

  animation-name: mask-move;
  animation-timing-function: cubic-bezier(0,.4,.3,1);
  @keyframes mask-move {
    0%, 20% {
      opacity: 0;
      // mask-size: 0% 0%;
    }
    80%, 100% { 
      // mask-size: 160vmax 160vmax;
    }
  }
}



/*.word {

animation-name: kf-code-bg;
animation-delay: calc(var(--random) * #{$duration / 5});

opacity: 0; //calc(var(--random) * .5);
//   transform: scaleX(calc(var(--random) * .5));
//   transform-origin: left center;
@keyframes kf-code-bg {
// 0% { transform: scale(0); } 
70%, 100% { opacity: 1; } //transform: scaleX(1); }
}
} */

/* ---------------------------------- */

.kf-text .the {

  animation-name: kf-the, kf-the-fade;
  animation-timing-function: cubic-bezier(0,.7,.3,1), linear;


  @keyframes kf-the-fade {
    0%, 40% {
      opacity: 0;
    }
    65%, 100% { opacity: 1; }
  }

  @keyframes kf-the {
    0%, 40% {
      transform: translateX(-150%); 
    } 
    70%, 100% { 
      transform: translateX(0); 
    }
  }
}

.kf-text {
  perspective: 400px; 
}

.kf-text .char {
  animation-name: kf-text, kf-text-fade;
  animation-timing-function: cubic-bezier(0,.8,.3,1), linear;
  animation-delay: calc( 
    #{$delay} + 
    (
      .15s 
      * (1 - var(--distance-percent))
    )
  );

  @keyframes kf-text-fade {
    0%, 25%, 95%, 100% {
      opacity: 0;
    }
    50%, 88% { opacity: 1; }
  }

  @keyframes kf-text {
    0%, 25% {
      transform: 
        translate3d(
          calc(var(--char-offset) * .5em), .5em, 3em)
        rotateX(30deg) ;
    } 
    80%, 86% { 
      transform: translate3d(0,0,0) rotateX(0deg);
      animation-timing-function: cubic-bezier(.5,.01,.8,.7);
    }
    96%, 100% { 
      transform: 
        translate3d(
          calc(var(--char-offset) * .5em), 0em, 3em)
        rotateX(-30deg);
    }
  }
}


.two-oh {
  perspective: 500px;
}

.two-oh .char {
  animation-name: kf-two, kf-two-fade;
  animation-timing-function: cubic-bezier(.24,.83,.32,.99), linear;
  
  &[data-char="."] {
    animation-name: kf-two-fade;
    animation-timing-function: linear;  
  }

  @keyframes kf-two-fade {
    0%, 40% {
      opacity: 0;
    }
    60%, 100% { opacity: 1; }
  }

  @keyframes kf-two {
    0%, 40% {
      transform: 
        translate3d(
          calc(var(--char-offset) * 1em), 0, -1em)//3em)
        rotateX(50deg) ;
    } 
    70%, 100% { 
      transform: translate3d(0,0,0) rotateX(15deg);
      // transform: translate(0, 0) scale(1);
    }
  }
}

JS

              
                console.clear();

Splitting();

// Restart all animations on click
var s = document.createElement('style');
s.innerHTML = " *, *:before, *:after { animation: none !important; }";

document.addEventListener('click',function(){
  document.head.appendChild(s);
  setTimeout(function(){
    document.head.removeChild(s);
  });
});

// Semi-randomized effect for the background
function createElement(tagName, attributes, innerHTML) {
  let el = document.createElement(tagName);
  for (let key in attributes) {
    if (attributes.hasOwnProperty(key)) {
      el.setAttribute(key, attributes[key]);
    }
  }
  el.innerHTML = innerHTML;
  return el;
};
function Split(els) {

  els = els.nodeName ? [els] : els[0].nodeName ? els : document.querySelectorAll(els);
  

  return Array.prototype.map.call( els,
                                  function( el ) {

    el.className += ' split-char';

    var frag = new DocumentFragment();
    var words = [];
    
    var whiteSpace = /\s/;
    var matcher = /(\s+|\S+)/gm;
    var matches = el.innerText.match(matcher);
    matches && matches.forEach( function(c,i){

      let isWhiteSpace = whiteSpace.test(c);
      let el = isWhiteSpace ? document.createTextNode(c) : 
      createElement('span', { 
        class: 'word cm-' + Math.ceil(Math.random() * 14), 
        style: '--word-index: ' + i + '; --random: ' + Math.random() 
      }, c)
      frag.appendChild(el);
      if ( !isWhiteSpace ) { words.push(el); }
      // return isWhiteSpace ? null : el;
      // '<span class="word" style="--word-index: '+ ( i )+'">' + c + '</span>';
    });

    el.style.setProperty('--total-words', words.length);
    el.innerHTML = '';
    el.appendChild(frag); //content.join('');
    return el; //{ el: el, words: content }
  });
}

Split('.kf-code-bg');

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions