텍스트 던지기 - 키네틱 타이포그래피 3부: 당신을 따라다니는 워킹 텍스트 🧟🧟

18486 단어 tutorialjavascriptdesignwebdev

Part 3 of my series about kinetic typography! Let's move some text around with HTML, CSS and JS! If you missed how I came about throwing around text and deforming it with only web stuff, be sure and !
It's been a while since we've thrown around some text. This tutorial will also use some JS, but not too much. Today we'll make text follow the user's cursor!



우리에게 무엇이 필요하고 어떤 모습일지



키네틱 타이포그래피의 이 예에는 SVG가 필요합니다. SVG는 텍스트를 정말 잘 애니메이션화할 수 있기 때문입니다. 따라서 사용자의 커서 이동에서 특정 길이를 초과하지 않는 경로를 만들고 해당 경로를 따라 텍스트를 애니메이션으로 만들 것입니다.

불행히도 부드러운 애니메이션은 이 튜토리얼에서 구현하기에는 너무 많은 노력이 들겠지만 커서 움직임의 투박함은 그 자체의 매력이 있습니다. 그러나 우리는 일을 조금 부드럽게 할 수 있습니다. 나중에 자세히 설명합니다. 먼저, 시간이 좀...

보일러플레이팅!



신뢰할 수 있는:

<!DOCTYPE html>
<html>
<head>
  <style>
    body, html {
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
    svg {
        width: 100%;
        height: 100vh;
    }
    /* More styling goes here */
  </style>
</head>
<body>

<svg>
 <!-- Text goes here -->
</svg>

<script>
// Fun stuff goes here.
</script>
</body>
</html>


대박. 우리는 이미 빈 스크립트 태그, 빈 SVG 및 몇 가지 기본 스타일을 추가하여 더 쉽게 만들었습니다.

워킹 텍스트™ 구현



SVG의 일부부터 시작하겠습니다.

<svg>
  <path 
    stroke="black" 
    stroke-width="2" 
    fill="none" 
    d="M 0 0 0 9999" 
    id="drawnpath"
  ></path>
</svg>


이것이 우리가 만들 길입니다. 커서를 움직일 때마다 경로에 다른 점이 추가되고 지정된 길이에 도달할 때까지 확장됩니다. 그런 다음 다시 주어진 크기 미만이 될 때까지 다른 쪽 끝에서 노드를 제거합니다. 경로의 위치를 ​​표시하기 위해 스트로크 너비 2를 사용하고 있습니다.

다음으로 JS가 필요합니다. 경로는 여러 좌표로 구성됩니다. 경로의 전체 길이를 얻으려면 두 좌표 사이의 거리를 계산하는 것이 좋습니다. 이를 위한 클래스를 만들겠습니다.

class Coords {
  constructor(x, y) {
    this.x = x
    this.y = y
  }

  get coordString() {
    return this.x + ' ' + this.y
  }

  distanceTo(other) {
    return Math.sqrt((this.x - other.x) ** 2 + (this.y - other.y) ** 2)
  }
}

Path 라는 두 번째 클래스에서 길이 계산을 수행할 수 있습니다.

class Path {
  constructor(pathLength) {
    this.path = []
    this.pathLength = pathLength
  }

  get totalPathLength() {
    let length = 0

    // Calculate the lengths between all points and add them up.
    for (let i = 0; i < this.path.length - 2; i++) {
      length += this.path[i].distanceTo(this.path[i + 1])
    }

    return length
  }

  get svgPath() {
    return `M ${this.path.map(c => c.coordString).join(' ')}`
  }

  // More fun stuff goes here.
}


이제 복잡한 부분이 있습니다. 경로에 좌표를 추가해야 합니다. Path 클래스는 단순히 모든 좌표의 배열을 유지하므로 새 좌표를 해당 배열로 푸시할 수 있습니다. 그러나 우리는 그것을 부드럽게 하고 싶기 때문에 마지막 좌표까지의 거리가 주어진 거리보다 짧은 좌표는 건너뛰어야 합니다. 또한 경로를 일정한 길이로 유지하려고 하므로 경로가 원하는 길이에 도달할 때까지 경로의 시작 부분에서 모든 노드를 제거해야 합니다.

class Path {
  // ...
  add(coord) {
    if (this.path.length > 0) {
      const dist = this.path[this.path.length - 1].distanceTo(coord)

      // Ignore all coords that are too close, they make stuff clunky.
      if (dist < 10) {
        return
      }
    }

    this.path.push(coord)

    // Cut the path to reach a desired length.
    while(this.totalPathLength > this.pathLength) {
      this.path.shift()
    }
  }
  // ...
}


여태까지는 그런대로 잘됐다. 이것을 해보자. 현재 좌표를 경로로 푸시하고 SVG를 조정하여 경로를 표시하는 함수를 만들어 봅시다. 모바일 장치도 지원하기 위해 mousemove 및 touchmove에서 이 함수를 호출합니다.

const path = new Path(300)

const adjustPath = e => {
  let x = 0
  let y = 0

  // Figure out x/y coordinates of both mouse and touch events
  if(e.type == 'touchmove'){
    const evt = (typeof e.originalEvent === 'undefined') ? e : e.originalEvent
    const touch = evt.touches[0] || evt.changedTouches[0]
    x = touch.pageX
    y = touch.pageY
  } else {
    x = e.clientX
    y = e.clientY
  }

  const coords = new Coords(x, y)
  path.add(coords)

  document.querySelector('path').setAttribute('d', path.svgPath)
}

window.addEventListener('mousemove', adjustPath)
window.addEventListener('touchmove', adjustPath)


이것이 어떻게 작동하는지 봅시다:



놀라운! 이제 텍스트를 추가해야 합니다. 이를 위해 SVG의 변경된 버전을 사용합니다.

<svg>
  <path stroke="none" fill="none" stroke-width="2" d="M 0 0 0 9000" id="drawnpath"></path>

  <text text-anchor="middle">
    <textPath
        class="my-text"
        font-size="80"
        href="#drawnpath"
        startOffset="50%"
    >
      THE WALKING TEXT
    </textPath>
  </text>
</svg>


여기서 몇 가지를 볼 수 있습니다. A path 왼쪽 상단에서 어디로든 가는 a text 및 a textPath . textPath는 path 요소를 사용하여 텍스트를 그릴 수 있게 해주는 요소입니다. 그러면 그 길을 따라가게 됩니다. 사람들은 부드러운 애니메이션이나 텍스트가 따라갈 수 있는 상자를 위해 베지어 곡선을 사용하지만 JS로 실제 경로를 직접 생성하므로 추가 애니메이션이 필요하지 않습니다. 또한 경로를 보이지 않게 하여 텍스트만 볼 수 있도록 했습니다.

이제 마지막으로 해야 할 일은 경로의 길이를 파악하는 것입니다. 이를 위해 SVGtextLength를 사용하고 길이를 Path 인스턴스에 전달합니다.

const path = new Path(
  document.querySelector('text').textLength.baseVal.value
)


그리고 끝났습니다! 이제 커서가 가는 곳마다 텍스트가 따라옵니다. 실제로 확인하십시오:



텍스트로 할 수 있는 다음 속임수를 기대해 주세요!


내가 이 글을 쓰면서 즐거웠던 만큼 여러분도 이 글을 즐겁게 읽으셨기를 바랍니다! 그렇다면 ❤️ 또는 🦄를 남겨주세요! 나는 여가 시간에 기술 기사를 쓰고 가끔씩 커피를 마시는 것을 좋아합니다.

내 노력을 지원하고 싶다면 you can offer me a coffee ☕ 또는 ! Paypal을 통해 저를 직접 지원할 수도 있습니다!

시계열 분해 - 계절성 발견
함수에서 스토리지 액세스 방지 - 1

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage