[Html] 텍스트가 바뀌는 애니메이션 & 예제

안녕하세요. 키미추추입니다.

이번에는 글자,텍스트에 전환하기를 주면서 강조 효과가 있는 애니메이션을 배워보겠습니다.

 

애니매..(?) 아..오타가 났네요. 정확한 외래어 표기는 애니메이션입니다.

 

Make

누구나

생활코딩

쉽게 배우는

TRY!

 

 

Q. 초보자가 보기에 난이도가 있어보이는데 어렵지 않을까요?

A. 어려운 태그를 사용하지 않아요.

HTML에서 아주 초보적인 개념,지식만 있더라도 바로 코드를 적용할 수 있어 전혀 어렵지 않아요. 물론, 코드가 길지않고 기초 태그만 사용하니 생초보자도 쉽게 따라할 수 있습니다.

 

Q. CSS,Javascript를 전혀 사용하지 않고도 만들 수 있는건가요?

A. 네. 해당 강좌는 HTML에서 애니메이션을 만드는 강좌입니다.

---

코드 적용하기

/* 빨강색 글씨에 보여지길 원하는 텍스트 입력. flip이 감싸고 있는 텍스트는 유동적이게 전환될 텍스트 영역 */ <div id=container01>   Make    <div id=flip>     <div><div>누구나</div></div>     <div><div>쉽게 배우는</div></div>     <div><div>생활코딩</div></div>   </div>   TRY! </div> /* 스타일을 적용해줍시다 */ <style>   #container01 {      color:#999;      text-transform: uppercase;      font-size:36px;      font-weight:bold;      padding-top:200px;        width:100%;      display:block;    }    #flip {      height:50px;      overflow:hidden; /* hidden을 해줘야 모든 텍스트가 보여지는 것이   } 숨김이 되어 정해진 높이만큼만 보여집니다. */   #flip > div > div {      color:#fff;      padding:4px 12px;      height:45px;      margin-bottom:45px;      display:inline-block;    }    #flip div:first-child {      animation: show 5s linear infinite;    }    #flip div div {      background:#42c58a;    }    #flip div:first-child div {      background:#4ec7f3;    }    #flip div:last-child div {      background:#DC143C;    }  /* 가장 중요한 키프레임 값. 0~100까지 텍스트의 움직임을 margin으로 조정해줍니다. 위에서 아래로 변화가 생기도록 margin-top으로 하였습니다 */   @keyframes show {      0% {margin-top:-270px;}      5% {margin-top:-180px;}      33% {margin-top:-180px;}      38% {margin-top:-90px;}      66% {margin-top:-90px;}      71% {margin-top:0px;}      99.99% {margin-top:0px;}      100% {margin-top:-270px;}    } </style>

 

코드 응용하기

keyframes을 잘 활용한다면 다양한 애니메이션 효과를 만들어 볼 수 있겠네요.

키프레임 값을 조금씩 조정해보면서 나만의 멋진 글자 애니메이션을 만들어보세요.

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////