CSS 없이 타자기 효과 설정하기

이 기사는 사용자 정의 JS 전환에 대한 특정 부분을 다룰 예정이므로 Svelte를 선택하고 튜토리얼을 살펴보는 것이 좋습니다.

시작하기

계속해서 CodeSandbox의 Svelte 플레이그라운드를 사용하여 새 프로젝트를 초기화하거나 Github에서 사용 가능한 상용구 중 하나를 사용하세요.

# Creating a new project
npx degit sveltejs/template 

# Install the dependencies...
npm install

...롤업을 시작합니다.

npm run dev

localhost:8080으로 이동하면 앱이 실행되는 것을 볼 수 있습니다. src에서 구성 요소 파일을 편집하고 저장한 다음 페이지를 새로고침하여 변경 사항을 확인하세요.

설치

다음 코드를 잡고 npm 패키지Svelte.Typewriter를 설치합니다.

# yarn
yarn add -D svelte-typewriter

# npm
npm i -D svelte-typewriter

용법

Svelte 구성 요소를 가져와 구성 요소로 요소를 래핑해야 합니다.

<script>
    import Typewriter from 'svelte-typewriter'
</script>

<Typewriter>
    <h1>Testing the typewriter effect</h1>
    <p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>

소품

구성 요소는 결과 애니메이션의 동작을 조작할 수 있는 소품을 받을 수 있으며 이러한 소품은 4개의 그룹으로 나뉩니다.

특정 소품을 <Typewriter> 구성 요소에 전달하여 타자기 효과의 동작을 제어할 수 있는 모드 그룹을 다룰 것입니다.

간략한 요약은 다음과 같습니다.

1. 기본 모드

계단식 모드의 순차적 애니메이션과 달리 모든 요소에 동시에 애니메이션을 적용합니다.

<Typewriter>
    <h1>Testing the typewriter effect</h1>
    <p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>

2. 캐스케이드 모드

모든 요소에 적용 애니메이션을 동시에가 아니라 순차적으로 적용합니다.

<Typewriter cascade>
    <h1>Testing the <code> cascade </code> mode</h1>
    <p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>

3. 루프 모드

부모 Typewriter 구성 요소의 자식 요소 간에 애니메이션을 순환합니다. 매개 변수로 숫자를 전달하여 각 단어 사이의 간격(밀리초)을 정의할 수 있습니다. 그렇지 않으면 기본값은 1500입니다.

<Typewriter loop>
    <h1>Testing the <code> loop </code> mode</h1>
    <p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>

4. 루프랜덤

루프 모드와 매우 유사하지만 선형 방식으로 애니메이션을 순환하는 대신 매번 임의의 하위 요소를 선택하여 애니메이션을 적용합니다. 각 단어 사이의 간격(밀리초)은 매개변수로 숫자를 전달하여 정의할 수 있습니다. 그렇지 않으면 기본값은 1500입니다.

<Typewriter loopRandom>
    <h1>Testing the <code> loopRandom </code> mode</h1>
    <p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>

5. 스크램블

특정 시간 동안 요소 텍스트의 모든 문자를 무작위화합니다. 숫자가 인수로 전달되면 애니메이션 기간으로 정의됩니다(기본값은 3000).

<Typewriter scramble>
    <h1>Testing the <code> scramble </code> mode</h1>
    <p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>

요약

따라했다면 튜토리얼을 완료하고 모든 프런트엔드 프로젝트에서 작동하는 타자기 전환을 만드는 방법을 배웠을 것입니다. Svelte를 계속 즐기세요. 나도 알아!

이제 여기까지 했다면 코드를 내completed Sandbox에 연결하여 포크하거나 복제하면 작업이 완료됩니다.

유용한 리소스

https://www.npmjs.com/package/svelte-typewriter
https://daisyui.com/
https://tailwindcss.com/