animation에서 놀기 - Typewriter Effect -
오늘은 TypeWriter Effect를 배웁니다.
1. 완성판
2. 왜?
Glorious Demo 라는 실시간으로 코딩하는 것처럼 보이는 라이브러리가 있습니다.
처음 보았을 때 매우 획기적인 도구라고 생각했습니다. 대부분의 주관이 들어가지만 프로그래밍을 배울 때 책의 정적 콘텐츠에서 공부하는 것은 효율이 나쁘다고 느낍니다. 코드도 완성되기까지 우여곡절이 있어, 프로그래머의 고민이나 에러의 수정 등을 통해 코드가 완성됩니다. 그 생생한 과정을 보는 것은 나와 같은 초학자에게 중요합니다. 블로그의 기세가 떨어지고, Youtube등의 동영상 컨텐츠에 주목이 모이게 된 요즘, 향후의 프로그램의 공부 교재는 Udemy를 비롯한 동영상으로 옮겨갈 것이라고 생각하고 있습니다. (라고 말하면서, Qiita는, 앞으로도 투고하겠습니다)
길어졌습니다만, 요시코 씨 의 포트폴리오는, 애니메이션+코딩을 브라우저상에서 표현으로 되어 있어, 매우 감동했습니다. 여러분도 꼭 봐 주세요.
3. 참고문헌
CSS Tricks
4. 분해해 본다
그럼 조속히 코드를 써 갑니다.
❶.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<h1>I learn CSS animation every day.</h1>
</body>
</html>
styles.cssbody {
margin: 0px;
padding: 0px;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
그러면 다음에 타이핑할 때 나오는 세로선을 만들어 배경과 문자의 색을 바꿉니다.
styles.cssbody {
margin: 0px;
padding: 0px;
background: #364548;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
letter-spacing: 3px;
border-right: 5px solid orange;
}
좋은 느낌입니다.
그럼, 애니메이션을 붙여 갑시다.
어떻게 하면 좋을까?
힌트는 이전 기사 입니다.
❷.
styles.css
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
letter-spacing: 3px;
border-right: 5px solid orange;
overflow: hidden;
white-space: nowrap;
animation: type 5s steps(32, end);
}
@keyframes type {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
steps 또 나왔다.
h1의 width를 0%에서 100%로 하고, steps로 단계적으로 화면에 표시하면 완성됩니다.
그 외의 포인트는,white-space: nowrap 로 문장을 1문으로 하고 있습니다.overflow: hidden 에서 요소의 폭 이상으로 튀어나온 부분을 숨깁니다. 이것들은, 살와카 의 기사가 대단히 용이하게 쓰여져 있었습니다.
마지막으로 오렌지 막대에도 애니메이션을 적용합시다.
❸.
styles.css...
animation: type 5s steps(32), bar 1s step-end infinite;
}
@keyframes type {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@keyframes bar {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
어쨌든, 문장이 사라져 버렸습니다. 전체에 opacity: 0 붙으면, 사라져 버리는 당연하네요. 어떻게 하면 좋을까요?
···
bar는 border이므로, border의 색을 바꾸면 좋네요!
styles.css
@keyframes bar {
0% {
border-color: transparent;
}
50% {
border-color: orange;
}
100% {
border-color: transparent;
}
}
할 수 있었습니다.
그 외에 Javascript 를 사용해 보다 세세한 표현을 할 수 있는 것 같습니다.
그럼 또 내일~
Reference
이 문제에 관하여(animation에서 놀기 - Typewriter Effect -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/316bf65fad93541c2a20
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Glorious Demo 라는 실시간으로 코딩하는 것처럼 보이는 라이브러리가 있습니다.
처음 보았을 때 매우 획기적인 도구라고 생각했습니다. 대부분의 주관이 들어가지만 프로그래밍을 배울 때 책의 정적 콘텐츠에서 공부하는 것은 효율이 나쁘다고 느낍니다. 코드도 완성되기까지 우여곡절이 있어, 프로그래머의 고민이나 에러의 수정 등을 통해 코드가 완성됩니다. 그 생생한 과정을 보는 것은 나와 같은 초학자에게 중요합니다. 블로그의 기세가 떨어지고, Youtube등의 동영상 컨텐츠에 주목이 모이게 된 요즘, 향후의 프로그램의 공부 교재는 Udemy를 비롯한 동영상으로 옮겨갈 것이라고 생각하고 있습니다. (라고 말하면서, Qiita는, 앞으로도 투고하겠습니다)
길어졌습니다만, 요시코 씨 의 포트폴리오는, 애니메이션+코딩을 브라우저상에서 표현으로 되어 있어, 매우 감동했습니다. 여러분도 꼭 봐 주세요.
3. 참고문헌
CSS Tricks
4. 분해해 본다
그럼 조속히 코드를 써 갑니다.
❶.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<h1>I learn CSS animation every day.</h1>
</body>
</html>
styles.cssbody {
margin: 0px;
padding: 0px;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
그러면 다음에 타이핑할 때 나오는 세로선을 만들어 배경과 문자의 색을 바꿉니다.
styles.cssbody {
margin: 0px;
padding: 0px;
background: #364548;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
letter-spacing: 3px;
border-right: 5px solid orange;
}
좋은 느낌입니다.
그럼, 애니메이션을 붙여 갑시다.
어떻게 하면 좋을까?
힌트는 이전 기사 입니다.
❷.
styles.css
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
letter-spacing: 3px;
border-right: 5px solid orange;
overflow: hidden;
white-space: nowrap;
animation: type 5s steps(32, end);
}
@keyframes type {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
steps 또 나왔다.
h1의 width를 0%에서 100%로 하고, steps로 단계적으로 화면에 표시하면 완성됩니다.
그 외의 포인트는,white-space: nowrap 로 문장을 1문으로 하고 있습니다.overflow: hidden 에서 요소의 폭 이상으로 튀어나온 부분을 숨깁니다. 이것들은, 살와카 의 기사가 대단히 용이하게 쓰여져 있었습니다.
마지막으로 오렌지 막대에도 애니메이션을 적용합시다.
❸.
styles.css...
animation: type 5s steps(32), bar 1s step-end infinite;
}
@keyframes type {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@keyframes bar {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
어쨌든, 문장이 사라져 버렸습니다. 전체에 opacity: 0 붙으면, 사라져 버리는 당연하네요. 어떻게 하면 좋을까요?
···
bar는 border이므로, border의 색을 바꾸면 좋네요!
styles.css
@keyframes bar {
0% {
border-color: transparent;
}
50% {
border-color: orange;
}
100% {
border-color: transparent;
}
}
할 수 있었습니다.
그 외에 Javascript 를 사용해 보다 세세한 표현을 할 수 있는 것 같습니다.
그럼 또 내일~
Reference
이 문제에 관하여(animation에서 놀기 - Typewriter Effect -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/316bf65fad93541c2a20
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
그럼 조속히 코드를 써 갑니다.
❶.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<h1>I learn CSS animation every day.</h1>
</body>
</html>
styles.css
body {
margin: 0px;
padding: 0px;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
그러면 다음에 타이핑할 때 나오는 세로선을 만들어 배경과 문자의 색을 바꿉니다.
styles.css
body {
margin: 0px;
padding: 0px;
background: #364548;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
letter-spacing: 3px;
border-right: 5px solid orange;
}
좋은 느낌입니다.
그럼, 애니메이션을 붙여 갑시다.
어떻게 하면 좋을까?
힌트는 이전 기사 입니다.
❷.
styles.css
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
letter-spacing: 3px;
border-right: 5px solid orange;
overflow: hidden;
white-space: nowrap;
animation: type 5s steps(32, end);
}
@keyframes type {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
steps 또 나왔다.
h1의 width를 0%에서 100%로 하고, steps로 단계적으로 화면에 표시하면 완성됩니다.
그 외의 포인트는,
white-space: nowrap 로 문장을 1문으로 하고 있습니다.overflow: hidden 에서 요소의 폭 이상으로 튀어나온 부분을 숨깁니다. 이것들은, 살와카 의 기사가 대단히 용이하게 쓰여져 있었습니다.마지막으로 오렌지 막대에도 애니메이션을 적용합시다.
❸.
styles.css
...
animation: type 5s steps(32), bar 1s step-end infinite;
}
@keyframes type {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@keyframes bar {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
어쨌든, 문장이 사라져 버렸습니다. 전체에 opacity: 0 붙으면, 사라져 버리는 당연하네요. 어떻게 하면 좋을까요?
···
bar는 border이므로, border의 색을 바꾸면 좋네요!
styles.css
@keyframes bar {
0% {
border-color: transparent;
}
50% {
border-color: orange;
}
100% {
border-color: transparent;
}
}
할 수 있었습니다.
그 외에 Javascript 를 사용해 보다 세세한 표현을 할 수 있는 것 같습니다.
그럼 또 내일~
Reference
이 문제에 관하여(animation에서 놀기 - Typewriter Effect -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/duka/items/316bf65fad93541c2a20텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
