:타이핑 애니메이션2


현재 접속하신 문서에서 모바일 열람이 감지되었습니다.
PC에서의 열람을 권장합니다.
:타이핑 애니메이션2
사용문서
새로고침
넘겨주기
이동하기

문제점이 많은 틀입니다.

기술 및 기능적인 이유 또는 실험적인 이유로 미완성인 틀이므로 범용적 사용에 적합하지 않습니다.
원본이 있는 틀입니다.

이 틀은 문법 및 기술 지원 등의 이유로 연구를 거듭하다가 원리와 사용법이 다소 달라지게 되어 원본에서 분리된 하위 틀입니다.


개요

미분이 제작한 타이핑 애니메이션 틀의 문법 지원 및 기술 향상을 위해 분리된 틀입니다. 문법과 사용법이 다소 달라져 분리되었을 뿐 용도 자체는 원본과 같습니다.

적용 결과

우리는 정직함을 필사적으로 견지함으로써 그 불완전함을 교정하고자 한다.

사용법

{{타이핑 애니메이션2|텍스트}}
  • 현재 문제점: 해결 노력 중
    • 모바일에서는 타이핑 애니메이션이 균일된 시간으로 일어나지 않음
    • 한 문서에 틀이 여러 번 사용될 경우 내용을 바꿀 수 없음

해당 문서 기여자분들

제작자

제작 도움

  • Lena (CSS 도움)
  • 김찬 (CSS 도움)
    • 해결한 부분
      1. 틀을 사용하기 위해 새 문서를 쓸 필요없이 틀 변수로 간편하게 사용 가능
      2. 한번 텍스트가 타이핑된 후 그 상태가 유지
      3. 커서 깜빡거림
    • 해결하지 못한 부분: 훌륭한 기여자 분들의 도움을 기다립니다!
      1. 자동 줄바꿈[이유][이유] 타이핑 애니메이션이 정상적으로 출력되려면 줄바꿈을 강제로 해제해야 함. 텍스트로 생성된 가상의 박스 오른쪽에만 테두리를 만들어 타이핑 커서로 이용하고 너비를 0에서 100%까지 점차 늘려가는 것이 타이핑 효과의 원리이기 때문. 자동 줄바꿈을 적용해 버리면 맨처음 너비가 0일 때 타이핑될 텍스트가 세로로 길게 나열될 것임.
      2. 한글 타이핑[이유][이유] 자바스크립트가 필요함. 루아로 비슷하게나마 구현이 가능한지는 모르겠음. 가능하다 해도 기술 이슈. 혹시 위키에 루아 기술자도 있나요?
      3. 텍스트 길이에 따른 타이핑 효과 속도 자동 조절[이유][이유] 타이핑 효과는 CSS의 애니메이션 속성으로 재생되는데, 타이핑되는 애니메이션의 총 길이를 직접 설정해 주어야 하기 때문에 텍스트 길이에 알맞게 자동으로 조정되게 하는 것은 불가능함.
    • 추가한 기능
      1. 텍스트 위에 커서를 올리면 커서의 모양이 일반 텍스트처럼 바뀜 (실제로 웹 구조상 텍스트는 아니므로 드래그 및 복사는 불가능)
      2. color 변수로 색 변경 가능
    • 추가된 문제점 왜?;
      1. 모바일에서는 타이핑 애니메이션이 균일된 시간으로 일어나지 않음
      2. 한 문서에 틀이 여러 번 사용될 경우 내용을 바꿀 수 없음
  • 와샤 (CSS 도움)