ztext.js라이브러리는 텍스트를 3D로 구현할 때 사용할 수 있다.
ztext.js의 장점은 가상DOM을 사용하는 편리한 방식에 있다.
<h1>
<span data-z data-z-layers="3" data-z-depth="0.5em">A</span>
</h1>
사용법은 간단하다.
text에 영향을 줄 수 있는 <span>태그와 함께
아래 방식으로 설정을 마치면 된다.
data-z data-z-[옵션명]
ztext.js doc
ztext.js | 3D Typography for the Web
How it works Ztext gives the illusion of volume by creating layers from an HTML element. There's no need to spend hours fiddling with or forcing users to download multi-megabyte WebGL libraries. With ztext, content remains fully selectable and accessible.
bennettfeely.com
[예시]
트럼프
z-text와 함께
CSS의 3D transform과 같은 기능을
그대로 사용할 수 있다.
물론,
webGL을 과도하게 사용한다면,
3D Text 정도는 쉽게 구현할 수 있지만
특정 태그에 3D를 적용하기에는 너무 과도한 면이 있다.
간단하게 3D Text가 필요하다면
ztext.js를 추천한다.
'라이브러리 창고 > 사운드·기타' 카테고리의 다른 글
| 『jzz.js』 midi앱을 제작해보자 (0) | 2021.03.18 |
|---|---|
| 『babylon.js의 미래』 (1) | 2021.01.08 |
| Natural App 『window-swap.com』 (0) | 2020.07.25 |
| 수학을 위한 라이브러리 cindy.js (0) | 2020.07.05 |
| 아두이노 JS라이브러리 『johnny-five.js 』 (0) | 2020.06.24 |
댓글