회사 업무중에 알게 된 플러그인입니다.




textillate.js 공식 홈페이지에서는 모든 효과를 미리보기 할 수 있는게 강점입니다. 그래서 내가 원하는 효과를 미리 찜 할 수 있습니다. 애니메이션 효과로 저번에 포스팅했던 animate.css를 활용하는 플러그인이기 때문에, animate.css의 효과에 대한 이해가 있으면 좋습니다. 하지만 이 미리보기 효과를 소스코드로 구현하기 위한 방법이 만만찮기 때문에, 공홈의 소스코드를 가져와서 효과를 적용시키겠다 하는 건 사실 좀 무리수입니다. Documentation도 빈약한 편이구요.


오히려 다른 개인블로그에서 textillate.js 사용법을 기초부터 잘 설명해 놨으니 참고 바랍니다. (주의 : 영어입니다.)


http://www.developerdrive.com/2014/04/how-to-create-text-animations-with-textillate/




우리 회사에서 지금 구축하려는 홈페이지에 이 효과를 적용했는데, (아직 만드는 중이고 서버에 올려놓지 않아서 미리 보여드릴 수는 없습니다.) 제가 보기에도 정말 멋있습니다.


잘만 활용하면 정말 시각적으로 혹하는 플러그인이 아닐 수 없습니다. ㅎㅎ





이 플러그인을 실무에 사용했을 때에는 유의할 점이 있습니다. textillate 플러그인을 적용한 글자의 일부를 굵게 처리하거나 색상을 바꿔야 하는 등의 상황에서는, CSS로 처리하기가 조금 까다로운 편입니다. 그 부분의 이슈를 나중에 좀 더 작업하면서 언급해야겠습니다.




저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 수평선 2015.12.30 14:51 신고  댓글주소  수정/삭제  댓글쓰기

    잼있는 효과이네요.^^
    제가 찾은 텍스트효과인데 이것도 잼있어요^^
    http://tympanus.net/Development/OpeningSequence/

  2. 수평선 2015.12.30 15:22 신고  댓글주소  수정/삭제  댓글쓰기

    그외 텍스트효과

    http://kushagragour.in/lab/isoblocks/ iso블럭효과
    http://codecanyon.net/item/textchaos-abstract-css3-text-animations/full_screen_preview/11739302 태그구름
    http://tympanus.net/Development/TextStylesHoverEffects/ hover 효과
    http://tympanus.net/Development/TextInputEffects/index2.html 글자입력효과
    http://tympanus.net/Tutorials/AnimatedTextFills/ 글자애니메이션
    http://phastforms.com/reveal-it.js/index.html 타이핑효과
    http://daynin.github.io/wodry/#examples 글자회전
    http://albburtsev.github.io/jquery.typist/ 타이핑효과

티스토리 툴바