Как создать текст «Растущая трава» с переменными шрифтами

Всем Привет! Сегодня вы узнаете, как создать текст «Растущая трава» с переменными шрифтами используя HTML, CSS и JavaScript. Если у вас возникнут какие-либо трудности при создании этого кода, вы можете скачать готовый код, нажав кнопку «СКАЧАТЬ». Также если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент. 

СКАЧАТЬ

HTML КОД:

<h1 contenteditable data-text="Grow">Grow</h1>

CSS КОД:

@font-face {
  font-family: "Decovar Regular24";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Decovar-VF.ttf");
}

h1 {
  margin: 0;
  font-size: 15vw;
  position: relative;
  font-weight: 400;
  font-family: "Decovar Regular24";
  font-variation-settings: "INLN" 400, "SWRM" 1000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/209708058_b5a5fb07a6_o.jpg);
  background-size: 30%;
  background-repeat: repeat;
  text-shadow: 2px 2px 5px rgba(42, 67, 8, 0.4);
  -webkit-animation: grow 3s linear infinite alternate;
          animation: grow 3s linear infinite alternate;
}

h1:before {
  text-shadow: 1px 1px 2px rgba(42, 67, 8, 0.5), -1px 1px 2px rgba(42, 67, 8, 0.5), -1px -1px 2px rgba(42, 67, 8, 0.5), 1px -1px 2px rgba(42, 67, 8, 0.5), 3px 3px 20px rgba(0, 0, 0, 0.5);
}

h1:after {
  color: #421F00;
  font-variation-settings: "INLN" 0;
}

@-webkit-keyframes grow {
  0% {
    font-variation-settings: "INLN" 400, "SWRM" 1000;
  }
  100% {
    font-variation-settings: "INLN" 400, "SWRM" 0;
  }
}

@keyframes grow {
  0% {
    font-variation-settings: "INLN" 400, "SWRM" 1000;
  }
  100% {
    font-variation-settings: "INLN" 400, "SWRM" 0;
  }
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  letter-spacing: 0.6rem;
}

h1:after, h1:before {
  content: attr(data-text);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
}

JAVASCRIPT КОД:

var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
  this.setAttribute("data-text", this.innerText);
});