Морфинг / искажение текста - PullRequest
Новая
       53

Морфинг / искажение текста

0 голосов
/ 19 апреля 2020

Я слушал эту классную музыку c: https://www.youtube.com/watch?v=GcSU4xH6_Ro И после просмотра клипа я подумал, смогу ли я создать такой эффект: круг, действующий как «линза», искажает текст.

Основная проблема, с которой я столкнулся: откуда мне начать исследования. Я довольно новичок в этом (цифровой эксперимент в значительной степени), я даже не знаю ключевого слова для исследования, я попробовал "изменить текст, исказить, я sh wrap et c .." они не были очень упоительный Должен ли я попробовать с тремя Js, канва, + шейдеры? Как вы можете читать, я немного запутался.

Тогда я решил отложить это на мгновение, и я сделал этот кодекс только с svg и css: https://codepen.io/sacha-bobinet/pen/bPpeVy

<div class="box">
  <svg class="svg" xmlns="http://www.w3.org/2000/svg" id="effect" width="275px" height="275px">
    <filter id="noise">
      <feTurbulence baseFrequency="0.012 0.015" numOctaves="1" seed="6" result="noise" type="fractalNoise"></feTurbulence>
      <feDisplacementMap in="SourceGraphic" scale="180"></feDisplacementMap>
    </filter>
  </svg>
  <div class="mask">
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
  </div>
  <div class="clip-path">
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
    <div class="text">DREAMS</div>
  </div>
</div>
<style>
@import url(//fonts.googleapis.com/css?family=Archivo+Black);
body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  background-color: #7427FF;
  height: 100vh;
  width: 100vw;
}

.box {
  height: 550px;
  width: 550px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.svg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  z-index: 10;
}

.mask:after {
  content: '';
  position: absolute;
  top: 275px;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  height: 410px;
  width: 410px;
  border-radius: 50%;
  background-color: #7427FF;
}

.clip-path {
  width: 550px;
  height: 550px;
  -webkit-clip-path: circle(210px at 50% 50%);
          clip-path: circle(210px at 50% 50%);
  -webkit-filter: url(#noise);
          filter: url(#noise);
}

.text {
  font-family: 'Archivo Black', sans-serif;
  display: inline-block;
  font-size: 116px;
  line-height: 90px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(#753eff), color-stop(40%, #f925a6), to(#f69ab4));
  background: linear-gradient(0deg, #753eff 0%, #f925a6 40%, #f69ab4 100%);
  background-size: auto 220%;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: translate 5s linear  infinite backwards, color 5s linear infinite;
          animation: translate 5s linear  infinite backwards, color 5s linear infinite;
}
.text:nth-child(1) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.text:nth-child(2) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.text:nth-child(3) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.text:nth-child(4) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.text:nth-child(5) {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
.text:nth-child(6) {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.text:nth-child(7) {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.text:nth-child(8) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.text:nth-child(9) {
  -webkit-animation-delay: 4.5s;
          animation-delay: 4.5s;
}
.text:nth-child(10) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.text:nth-child(11) {
  -webkit-animation-delay: 5.5s;
          animation-delay: 5.5s;
}
.text:nth-child(12) {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}
.text:nth-child(13) {
  -webkit-animation-delay: 6.5s;
          animation-delay: 6.5s;
}
.text:nth-child(14) {
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}
.text:nth-child(15) {
  -webkit-animation-delay: 7.5s;
          animation-delay: 7.5s;
}
.text:nth-child(16) {
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
}

@-webkit-keyframes translate {
  from {
    -webkit-transform: translateY(-90px) translateZ(0);
            transform: translateY(-90px) translateZ(0);
  }
  to {
    -webkit-transform: translateY(555px) translateZ(0);
            transform: translateY(555px) translateZ(0);
  }
}

@keyframes translate {
  from {
    -webkit-transform: translateY(-90px) translateZ(0);
            transform: translateY(-90px) translateZ(0);
  }
  to {
    -webkit-transform: translateY(555px) translateZ(0);
            transform: translateY(555px) translateZ(0);
  }
}
@-webkit-keyframes color {
  0% {
    background-size: auto 200%;
  }
  25% {
    background-position: center 80%;
  }
  99% {
    background-position: center 80%;
  }
  100% {
    background-size: auto 200%;
  }
}
@keyframes color {
  0% {
    background-size: auto 200%;
  }
  25% {
    background-position: center 80%;
  }
  99% {
    background-position: center 80%;
  }
  100% {
    background-size: auto 200%;
  }
}
 </style>

Результат круто (не совсем тот же эффект, но идея здесь), но не очень эффективно.

Если бы вы могли помочь мне дать "имя" этому эффекту, возможно, ресурсы (я знаю, что есть много на Inte rnet но я не знаю с чего начать, если у вас есть какие-либо советы), или примеры, на которые это могло бы быть похоже. Какой техно я должен использовать? Ну, я ищу какие-то "линии направляющих"

(я начинаю смотреть на Книгу шейдеров)

Спасибо вам!

...