Typer

Typer Docs

Latest v1.0.0 release author kimson since 2021. update list

Typer는 무엇인가

👦: Typer는 텍스트 타이핑 효과를 쉽게 사용할 수 있도록 구현되었습니다.

사용법

설명

data-typer-* 속성으로 이루어져 있으며 속성 값을 특정한 것이 아니기때문에 자유롭게 개인 취향에 따라 타이핑 효과를 커스터마이징 할 수 있습니다.

CDN

아래 link는 head내부에, script는 /body전에 붙여넣으면 됩니다. 이후 Typer를 초기화하는 것은 typer.js|cdn 다음에 선언되어야 합니다.

사용예제

옵션 설정

default 옵션 사용

커스터마이징 옵션 사용

커스터마이징 옵션 예제

const typer = Typer.init({
    typer: {
        words: {
            innerTitle: ['메세지를 추가하세요.', '여러 개 가능합니다.'],
            box1: '입력 메세지가 하나라면 배열없이 문자열만 입력 가능합니다.'
        },
        custom: {
            test: {
                words: ['계속 변경될 수 있습니다.'],
                dataset: {
                    speed: 0.05,
                    delay: 1,
                    loop: true,
                    loopDelay: 1,
                    eraseMode: true,
                    eraseSpeed: 0.1,
                }
            },
            test2: {
                words: ['지금은 다른 이름'],
                dataset: {
                    speed: 0.05,
                    delay: 1,
                    loop: true,
                    loopDelay: 1,
                    eraseMode: true,
                    eraseSpeed: 0.1,
                    realTyping: true,
                }
            }
        },
        speed: 0.1,
        delay: 1,
        loop: true,
        loopDelay: 20,
        // start: 0.3,
        // eraseMode: true,
        eraseSpeed: 0.1,
        realTyping: false,
        style: {
            cursorBlink: 'horizontal'
        },
    }
});

초기화 옵션 없이 적용해도 됩니다. 전역 커스터마이징은 초기화 옵션에서 설정합니다. data-typer-name대상은 words속성, id대상은 custom속성으로 추가, 지정을 합니다. 이때 id속성으로 지정한 대상은 style외 속성은 custom속성이 아닌 tag로 속성을 넣지 못합니다. data-typer-*와 custom설정을 분리하기 위함입니다.

텍스트 입력

빠른 시작을 위해서 "data-typer-name"만 설정하고 시작할 수 있습니다. 단, 나머지 speed, loop 등의 속성은 전역 속성을 따릅니다.

태그 내부에 텍스트를 기입하거나 초기화 옵션에서 지정한 words가 타이핑 됩니다.

계속 바뀌는 링크

링크태그도 타이핑 대상입니다 a 태그 또한 타이핑 효과가 적용되며, 커서 깜빡임을 단일/전역으로 켜고 끌 수 있습니다. data-typer-cursor-blink가 none이면 위의 예제처럼 전역 스타일을 무시할 수 있습니다.

계속 바뀌는 링크 id만 지정하여 초기화 옵션에서 타이핑 효과를 줄 수도 있습니다.

텍스트 입력

name, speed, delay, loop start loopDelay, cursorBlink를 전부 적용한 예제입니다

속성을 전부 적용시킨 예제입니다.

텍스트 입력

realTyping 속성이 적용된 예제입니다.

v1.0.0 릴리즈 하며 새로 추가된 realTyping모드 입니다.