It was created to make it easier for users to implement their own typing effects. We are envisioning unique and diverse effects.
MIT License
Typoz
는 '타입(type)'과 'oz(온스)'의 결합으로, 다양한 타이핑 효과를 제공하는 라이브러리입니다.
v0.1.2
음소
-> 음절
[조합], 음절
-> 음소
[분해] 하며, 한글을 입력할 때 나타나는 자모의 조합 효과를 그대로 재현합니다.
npm install typoz
pnpm add typoz
<script src="https://www.unpkg.com/[email protected]/umd/typoz.min.js"></script>
import Typoz from 'typoz';
// or import { Typoz } from 'typoz';
const typoz = new Typoz();
typoz.initialize();
typoz.globalConfig(/* custom configs */);
기본적으로 제공되는 typoz
의 기능은 크게 세 가지입니다.
id
또는 class
값으로 지정하여 렌더링버전 0.1.1부터 유틸리티가 추가됩니다.
<!-- 기본적으로 클래스명 typoz를 탐색하고 자동 실행합니다. -->
<div class="typoz">테스트 내용 타이핑 효과.</div>
import Typoz from 'typoz';
const typoz = new Typoz();
typoz.initialize();
typoz.globalConfig();
<!-- 기본적으로 클래스명 typoz를 탐색하고 자동 실행합니다. -->
<div class="typoz">테스트 내용 타이핑 효과.</div>
import Typoz from 'typoz';
const typoz = new Typoz();
typoz.initialize();
typoz.globalConfig({
autoRender: false,
});
typoz.render();
원하는 타이핑을 추가로 작성하고 개별/전역 설정을 할 수 있습니다.
import Typoz from 'typoz';
const typoz = new Typoz();
typoz.initialize();
typoz.globalConfig({
speed: { write: 1 },
nodes: [
{
select: '#target1',
words: ['또 다른 텍스트 입력'],
config: {
speed: { write: 5 },
},
},
],
});
원하는 타이핑을 추가로 작성하고 개별/전역 설정을 할 수 있습니다.
import Typoz from 'typoz';
const typoz = new Typoz();
typoz.initialize();
typoz.globalConfig({
autoRender: false,
speed: { write: 1 },
});
const myElements = document.querySelectorAll('.test');
typoz.render(myElements);
// or
const myElement = document.querySelector('.test');
typoz.render([myElement]);
빌더를 이용해 원하는 타이핑 효과를 제어할 수 있습니다. 빌더는 TypeNode
를 렌더링하는 방식과 달리 개별 단위로 실행합니다. 메서드 행위는 아래와 같습니다.
const typoz = new Typoz();
typoz
.createBuilder()
.select('#test')
// .conf(/* custom configs */) // deprecated
.config(/* custom configs */)
.write('Write the entire text')
.write(' ')
.write('r')
.move(-1)
.write('o')
.move(2)
.write(' ')
.write('type each character individually.')
.pause(1)
.write('지울내용')
.erase()
.erase()
.erase()
.erase()
.pause(1)
.write('여러 문자 등 작성 가능합니다.')
.run();
지우기 모션이 포함된 무한 루프 실행 예시입니다.
const typoz = new Typoz();
typoz
.createBuilder()
.select('#test')
// .conf(/* custom configs */) // deprecated
.config(/* custom configs */)
.write('Write the entire text')
.forever();
지우기 모션이 제거된 무한 루프 실행 예시입니다.
const typoz = new Typoz();
typoz
.createBuilder()
.select('#test')
// .conf(/* custom configs */) // deprecated
.config(/* custom configs */)
.write('여러 문자 등 작성 가능합니다.')
.forever(true);
devkimson |
---|