Type Interactions 2

HTML

              
                <!-- https://taliacotton.com/ -->

<div id="cursor-circle"></div>

<div id="fixed">
  <button class="btnFixed" onclick="SWITCH(0)">1 small line</button>
  <button class="btnFixed" onclick="SWITCH(1)">2 medium line</button>
  <button class="btnFixed" onclick="SWITCH(2)">3 big line</button>
  <button class="btnFixed" onclick="SWITCH(3)">4 fading circle</button>
  <button class="btnFixed" onclick="SWITCH(4)">5 rainbow trail</button>
</div> 

<section id="intro">
  <h1 class="text-block">Look at a stone cutter hammering away at his rock, perhaps a hundred times without as much as a crack showing in it. Yet at the hundred-and-first blow it will split in two, and I know it was not the last blow that did it, but all that had gone before. -Jacob Riis</h1>
</section>

<div class="citation">
  <p>Based on the amazing work of <a class="cite-link" href="https://taliacotton.com/" target="_blank">taliacotton.com</a>.</p>
</div>

CSS

              
                :root {
  --color: DeepPink;
  --height: 0;
  --citation-bg-color: #1E0519;
  --citation-p-color: Salmon;
  --citation-a-color: MediumVioletRed;
  --citation-a-hover-color: DeepPink;
}

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  &:focus {
    outline: none;
  }
}

* {
  font-family: 'IBM Plex Sans Arabic', monaco, courier;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}

body {
  margin: 20px;
  padding: 0;
  background: #14072b;
}

#cursor-circle {
  position: fixed;
  z-index: 110;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  pointer-events: none;
  transition:
    background ease-in 10ms,
    box-shadow ease-in 150ms,
    transform ease-in 150ms;
  /* promote it to its own layer to enable  hardware accelerated rendering: */
  transform: translate3d(0, 0, 0);
}

#fixed {
  position: relative;
  z-index: 100;
  max-width: 800px;
}

.btnFixed {
  margin: 0 10px 10px 0;
  padding: 0.5rem 1rem;
  border: 0;
  background: #FCF454;
  transition: background 0.25s ease;
  &.active {
    background: MediumSpringGreen;
  }
  &:hover {
    background: #D1C818;
  }
}

#intro {
  display: block;
  max-width: 800px;
}

h1 {
  display: inline-block;
  margin: 0;
  font-weight: 400;
  font-size: calc(6.2vmin - 5px);
  line-height: 1.4;
  color: white;
}

span {
  position: relative;
}

.word {
  margin-right: 0.75rem;
  white-space: nowrap;
}

.char {
  padding: 0 0.25rem;
}

.char::before {
  content: '';
  position: absolute;
  display: inline;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(45deg);
  z-index: -1;
  width: 2px;
  height: var(--height);
  background: var(--color);
  border-radius: 500px;
}

.small-line,
.medium-line,
.big-line {
  .char::before {
    transition: height 0.25s ease;
  }
}

.char.small-less-100:before {
  height: 50px;
  background: salmon;
}
.char.small-bn-100-200:before {
  height: 40px;
  background: SandyBrown;
}
.char.small-bn-200-300:before {
  height: 30px;
  background: #FCF454;
}
.char.small-bn-300-400:before {
  height: 20px;
  background: palegreen;
}
.char.small-more-400:before {
  height: 10px;
  background: DodgerBlue;
}

.char.medium-less-100:before {
  width: 4px;
  height: 75px;
  background: salmon;
}
.char.medium-bn-100-200:before {
  width: 3px;
  height: 50px;
  background: SandyBrown;
}
.char.medium-bn-200-300:before {
  width: 3px;
  height: 30px;
  background: #FCF454;
}
.char.medium-bn-300-400:before {
  width: 2px;
  height: 20px;
  background: palegreen;
}
.char.medium-more-400:before {
  width: 2px;
  height: 10px;
  background: DodgerBlue;
}

.char.big-less-100:before {
  width: 22px;
  height: 200px;
  background: salmon;
}
.char.big-bn-100-200:before {
  width: 16px;
  height: 160px;
  background: SandyBrown;
}
.char.big-bn-200-300:before {
  width: 12px;
  height: 120px;
  background: #FCF454;
}
.char.big-bn-300-400:before {
  width: 9px;
  height: 80px;
  background: palegreen;
}
.char.big-more-400:before {
  width: 4px;
  height: 40px;
  background: DodgerBlue;
}

.char.fading-circle:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  width: 0;
  height: 0;
  border-radius: 500px;
  opacity: 0;
  background: SandyBrown;
  animation: 1s fadeOut;
}

@keyframes fadeOut {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  50% {
    width: 100px;
    height: 100px;
    opacity: 1;
  }
  100% {
    width: 0;
    height: 0;
    opacity: 0;
  }
}

// .trail {
//   animation: 3s fadeOutQuick;
// }
// @keyframes fadeOutQuick {
//   0% {
//     background: transparent;
//   }
//   50% {
//     background: var(--color);
//   }
//   100% {
//     background: transparent;
//   }
// }

// @for $i from 1 through 4 {
//   .trail-#{$i} {
//     animation: 3s fadeOutQuick#{$i};
//   }
//   @keyframes fadeOutQuick#{$i} {
//     0% {
//       background: transparent;
//     }
//     50% {
//       background: var(--color#{$i});
//     }
//     100% {
//       background: transparent;
//     }
//   }
// }

// citation

.citation {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: var(--citation-bg-color);
  p {
    margin: 0;
    padding: 10px;
    font-size: 12px;
    color: var(--citation-p-color);
    a {
      color: var(--citation-a-color);
      cursor: pointer;
      &:hover {
        color: var(--citation-a-hover-color);
      }
    }
  }
}

JS

              
                // cursor circle

const circle = document.getElementById('cursor-circle');
const circleStyle = circle.style;

document.addEventListener('mousemove', e => {
  window.requestAnimationFrame(() => {
    circleStyle.top = `${ e.clientY - circle.offsetHeight/2 }px`;
    circleStyle.left = `${ e.clientX - circle.offsetWidth/2 }px`;
  });
  let eTarget = e.target;
  if (eTarget.classList.contains('cite-link')) {
    circleStyle.display = "none"
  } else {
    circleStyle.display = "block"
  }
});

// Lettering.js

$(".text-block").lettering('words').children('span').addClass('word').lettering();
$(".text-block .word span").addClass('char');

// $(".text-block").lettering('words');

// $(".text-block > span").each(function(index) {
//   newIndex = index + 1;
//   let wordSpan = '.word' + newIndex;
//   $(wordSpan).lettering();
// });

//

let n;
let btns = document.getElementById("fixed").children;

let charArray = [];
let wordArray = [];

function lettersInView() {
  $(".char").each(function() {
    charArray.push(this);
  });
  $(".word").each(function() {
    wordArray.push(this);
  });
}

lettersInView();

// $( ".text-block" ).mouseover(function() {
//   document.documentElement.style.setProperty('--height', '100px');
//   document.documentElement.style.setProperty('--color', "aqua");
// });
// $( ".text-block" ).mouseout(function() {
//   document.documentElement.style.setProperty('--height', '20px');
//   document.documentElement.style.setProperty('--color', "DeepPink");
// });

for (let i = 0; i < charArray.length; i++) {
  let char = charArray[i];
  char.addEventListener("mouseenter", function () {
    // 4 fading circle
    if (n == 3) {
      char.classList.add("fading-circle");
      setTimeout(function() {
        char.classList.remove("fading-circle");
      }, 1000);
    }
    // 5 rainbow trail
    if (n == 4) {
      let char1 = charArray[i-1];
      let char2 = charArray[i+1];
      let char3 = charArray[i-2];
      let char4 = charArray[i+2];
      let randomColor = "#" + Math.floor(Math.random()*16777215).toString(16);
      let randomColor1 = "#" + Math.floor(Math.random()*16777215).toString(16);
      let randomColor2 = "#" + Math.floor(Math.random()*16777215).toString(16);
      let randomColor3 = "#" + Math.floor(Math.random()*16777215).toString(16);
      let randomColor4 = "#" + Math.floor(Math.random()*16777215).toString(16);
      char.style.backgroundColor = randomColor;
      if (char1) {
        char1.style.backgroundColor = randomColor1;
      }
      if (char2) {
        char2.style.backgroundColor = randomColor2;
      }
      if (char3) {
        char3.style.backgroundColor = randomColor3;
      }
      if (char4) {
        char4.style.backgroundColor = randomColor4;
      }
      setTimeout(function() {
        char.style.backgroundColor = "transparent";
        char1.style.backgroundColor = "transparent";
        char2.style.backgroundColor = "transparent";
        char3.style.backgroundColor = "transparent";
        char4.style.backgroundColor = "transparent";
      }, 1000);
    }
  });
}

//

for (let container of document.querySelectorAll(".text-block")) {
  container.addEventListener("mousemove", function (e) {
    container.classList.add("mouseover");
  });
  container.addEventListener("mouseout", function (e) {
    container.classList.remove("mouseover");
  });
}

function distance(x1, y1, x2, y2) {
  return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}

function map(value, low1, high1, low2, high2) {
  return low2 + ((high2 - low2) * (value - low1)) / (high1 - low1);
}

function findAncestor(el, cls) {
  while ((el = el.parentElement) && !el.classList.contains(cls));
  return el;
}

document.addEventListener("mousemove", function (e) {
  for (let i = 0; i < charArray.length; i++) {
    let char = charArray[i];
    let bounds = char.getBoundingClientRect();
    let dist = distance(
      e.clientX,
      e.clientY,
      bounds.left + bounds.width / 2,
      bounds.top + bounds.height / 2
    );
    let ancestor = findAncestor(char, "text-block");
    
    // 1 small line
    if (n == 0) {
      if (dist <= 100) {
        char.classList.remove('small-bn-100-200', 'small-bn-200-300', 'small-bn-300-400', 'small-more-400');
        char.classList.add('small-less-100');
      } else if (dist > 100 && dist <= 200) {
        char.classList.remove('small-less-100', 'small-bn-200-300', 'small-bn-300-400', 'small-more-400');
        char.classList.add('small-bn-100-200');
      } else if (dist > 200 && dist <= 300) {
        char.classList.remove('small-less-100', 'small-bn-100-200', 'small-bn-300-400', 'small-more-400');
        char.classList.add('small-bn-200-300');
      } else if (dist > 300 && dist <= 400) {
        char.classList.remove('small-less-100', 'small-bn-100-200', 'small-bn-200-300', 'small-more-400');
        char.classList.add('small-bn-300-400');
      } else if (dist > 400) {
        char.classList.remove('small-less-100', 'small-bn-100-200', 'small-bn-200-300', 'small-bn-300-400');
        char.classList.add('small-more-400');
      }
    } else {
      char.classList.remove('small-less-100', 'small-bn-100-200', 'small-bn-200-300', 'small-bn-300-400', 'small-more-400');
    }
    
    // 2 medium line
    if (n == 1) {
      if (dist <= 100) {
        char.classList.remove('medium-bn-100-200', 'medium-bn-200-300', 'medium-bn-300-400', 'medium-more-400');
        char.classList.add('medium-less-100');
      } else if (dist > 100 && dist <= 200) {
        char.classList.remove('medium-less-100', 'medium-bn-200-300', 'medium-bn-300-400', 'medium-more-400');
        char.classList.add('medium-bn-100-200');
      } else if (dist > 200 && dist <= 300) {
        char.classList.remove('medium-less-100', 'medium-bn-100-200', 'medium-bn-300-400', 'medium-more-400');
        char.classList.add('medium-bn-200-300');
      } else if (dist > 300 && dist <= 400) {
        char.classList.remove('medium-less-100', 'medium-bn-100-200', 'medium-bn-200-300', 'medium-more-400');
        char.classList.add('medium-bn-300-400');
      } else if (dist > 400) {
        char.classList.remove('medium-less-100', 'medium-bn-100-200', 'medium-bn-200-300', 'medium-bn-300-400');
        char.classList.add('medium-more-400');
      }
    } else {
      char.classList.remove('medium-less-100', 'medium-bn-100-200', 'medium-bn-200-300', 'medium-bn-300-400', 'medium-more-400');
    }
    
    // 3 big line
    if (n == 2) {
      if (dist <= 100) {
        char.classList.remove('big-bn-100-200', 'big-bn-200-300', 'big-bn-300-400', 'big-more-400');
        char.classList.add('big-less-100');
      } else if (dist > 100 && dist <= 200) {
        char.classList.remove('big-less-100', 'big-bn-200-300', 'big-bn-300-400', 'big-more-400');
        char.classList.add('big-bn-100-200');
      } else if (dist > 200 && dist <= 300) {
        char.classList.remove('big-less-100', 'big-bn-100-200', 'big-bn-300-400', 'big-more-400');
        char.classList.add('big-bn-200-300');
      } else if (dist > 300 && dist <= 400) {
        char.classList.remove('big-less-100', 'big-bn-100-200', 'big-bn-200-300', 'big-more-400');
        char.classList.add('big-bn-300-400');
      } else if (dist > 400) {
        char.classList.remove('big-less-100', 'big-bn-100-200', 'big-bn-200-300', 'big-bn-300-400');
        char.classList.add('big-more-400');
      }
    } else {
      char.classList.remove('big-less-100', 'big-bn-100-200', 'big-bn-200-300', 'big-bn-300-400', 'big-more-400');
    }

  }
});

function SWITCH(x) {
  n = x;
  let buttons = document.querySelectorAll(".btnFixed");
  buttons.forEach(function(button) {
    if(button.classList.contains("active")) {
     button.classList.remove("active");
    }
  });
  btns.item(n).classList.add("active");
  for (let i = 0; i < wordArray.length; i++) {
    let word = wordArray[i];
    // 1 small line
    if (n === 0) {
      word.classList.remove("big-line");
      word.classList.remove("medium-line");
      word.classList.add("small-line");
    // 2 medium line
    } else if (n === 1) {
      word.classList.remove("small-line");
      word.classList.remove("big-line");
      word.classList.add("medium-line");
    // 3 big line
    } else if (n === 2) {
      word.classList.remove("small-line");
      word.classList.remove("medium-line");
      word.classList.add("big-line");
    // no line option active
    } else {
      word.classList.remove("small-line");
      word.classList.remove("medium-line");
      word.classList.remove("big-line");
    }
  }
}

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