React 앱에 애니메이션 타이핑을 추가하는 방법

우리 중 많은 사람들이 랜딩 페이지에 타이핑 텍스트를 보여주는 웹 사이트를 보았습니다. 대부분의 경우 타이핑 애니메이션을 수행하기 위해 어떤 라이브러리를 사용하고 있는지 실제로 알지 못합니다. 이 기사에서는 React App에 애니메이션 타이핑을 추가하는 방법을 배웁니다.

ITyped 란 무엇입니까?

ITyped는 웹 앱용 애니메이션 타이핑을 만드는 데 사용되는 간단한 라이브러리입니다. 이 라이브러리는 사용이 매우 간단합니다. 가장 흥미로운 점은 이 라이브러리가 종속성을 사용하지 않으며 크기도 2KB라는 것입니다. 또한 내부적으로 JQuery를 사용하지 않습니다.

설치 및 사용

이 기사는 React 앱을 위한 것이므로 예를 들어 React 코드를 사용할 것입니다. 우선 typed 설치부터 시작하겠습니다. yarn과 npm에서 설치할 수 있습니다.

npm install ityped

yarn add ityped

typed에서 init 함수를 가져오겠습니다.

import { init } from 'ityped'

이 초기화 함수는 두 개의 매개변수를 받아들입니다. 첫 번째 매개변수는 요소 참조이고 두 번째 매개변수는 객체 유형의 옵션입니다.

    const myElement = document.querySelector('#myElement')
      init(myElement, { showCursor: false, strings: ['Use with React.js!', 'Yeah!' ] })

전체 예제는 다음과 같습니다.

  import React, { Component } from 'react'
  import { init } from 'ityped'

  export default class Hello extends Component {
    componentDidMount(){
      const myElement = document.querySelector('#myElement')
      init(myElement, { showCursor: false, strings: ['Use with React.js!', 'Yeah!' ] })
    }
    render(){
      return <div id="myElement"></div>
    }
  }

사용자 정의를 위해 다양한 멋진 옵션을 사용합니다.

 init("#element", {

    /**
     * @param {Array} strings An array with the strings that will be animated 
     */
     strings: ['Put your strings here...', 'and Enjoy!']

    /**
     * @param {Number} typeSpeed Type speed in milliseconds
     */
     typeSpeed:  100,

    /**
     * @param {Number} backSpeed Type back speed in milliseconds
     */
     backSpeed:  50,

    /**
     * @param {Number} startDelay Time before typing starts
     */
     startDelay: 500,

    /**
     * @param {Number} backDelay Time before backspacing
     */
     backDelay:  500,

    /**
     * @param {Bollean} loop The animation loop
     */
     loop:       false,

    /**
     * @param {Bollean} showCursor Show the cursor element
     */
     showCursor: true,

    /**
     * @param {Bollean} placeholder Write the string in the placeholder content
     */
     placeholder: false,

    /**
     * @param {Bollean} disableBackTyping Disable back typing for the last string sentence 
     */
     disableBackTyping: false,

    /**
     * @property {String} cursorChar character for cursor
     */
     cursorChar: "|",


    // optional: The callback called (if `loop` is false) 
    // once the last string was typed
    /**
     * @property {Function} onFinished The callback called , if `loop` is false,
     * once the last string was typed
     */
    onFinished: function(){},
  }

언제든지 codesandbox 데모를 확인하세요.

How to write complex layouts in one line of Css