현재 접속하신 문서에서 모바일 열람이 감지되었습니다.
PC에서의 열람을 권장합니다.
주의
간소화가 필요한 문서입니다.
틀로써 빠르게 작동할 수 있도록 기여를 해주시면 감사하겠습니다.
간소화가 필요한 문서입니다.
틀로써 빠르게 작동할 수 있도록 기여를 해주시면 감사하겠습니다.
| 틀:타이핑 애니메이션 | |
|---|---|
사용문서
|
|
넘겨주기
|
이동하기
|
개요
아마도 제이위키내에서는 사상 최초일 수도 있는 타이핑 애니메이션 틀입니다.
적용 결과
사용법
해당 틀은 CSS만을 이용하는 틀이므로, 문서를 따로 생성하고 해당 틀의 코드를 복사 및 기입을 하여 수동으로 직접 수정해야합니다.
이 문서에 사용한 틀의 코드는 해당 문서에서 확인할 수 있습니다.
자세한 사용법은 아래와 같습니다.
writing 클래스 font-size: (글꼴 크기)px; << 글꼴 크기를 지정합니다. writing::after 클래스 color: #3366cc; << 글자 색을 지정합니다. content: "우리는 정직함을 필사적으로 견지함으로써 그 불완전함을 교정하고자 한다."; << 글자를 입력하면 됩니다. 기본으로는 해당 문구로 작성되어있습니다. width: 400px; << 글자 수에 따라 너비를 지정합니다.기본값은 400px로 되어 있습니다. font-family: (글꼴 이름); << 글꼴을 지정합니다. 기본값은 'SUITE Variable'로 되어있습니다.
폰트에 대해서는 틀:폰트에서 사용할 수 있는 글꼴 목록을 참고해주시길 바랍니다.
이 CSS 틀을 사용할 경우, 반드시 본 문서에 (html 태그) class="home-ment" id="writing"을 넣어야 합니다. 그렇지 않을 경우, 적용이 안될 수도 있습니다. 만약 span과 같은 태그로 적용할 경우, 해당 코드 앞 뒤로 공백을 만들어야 합니다. 그 예로 br 등이 있는데, 공백 적용을 안하게 되면 문단을 나누는 부분과 겹치게 되니 주의해주시길 바랍니다.
현재 content 란에서 한글을 입력하게 되면, 재생시 모바일 기준으로 화면이 옆으로 넓어지게 되는 단점이 있습니다. 해당 부분에 대해서는 따로 작성하실 때 모바일 버전 작성 의항이 있다면, 추가적으로 작성하셔야 합니다.
CSS 코드 예제
/*타자기 효과*/
#writing {
color: transparent;
font-size: 16px;
white-space: nowrap;
}
#writing::after {
content: "우리는 정직함을 필사적으로 견지함으로써 그 불완전함을 교정하고자 한다.";
position: absolute;
color: #3366cc;
overflow: hidden;
border-right: 1px solid #3366cc;
animation: typing 5s steps(60) forwards;
font-family: SUITE Variable;
}
@keyframes typing {
0% {
width: 0%;
}
50% {
width: 460px;
}
100% {
width: 0%;
}
}
/*커서 애니메이션*/
@keyframes blink {
from { border-color: transparent }
to { border-color: #3366cc; }
}
#writing {
animation: typing 1s steps(20, end) forwards, blink .8s infinite;
}
해당 문서 기여자분들
제작자
• 미분