제이쿼리 안쓰고 텍스트에 애니메이션 줄방법 없을까요?
본문
샘플페이지 : http://bdmp-003.cafe24.com/bizdemo80550/
위링크에 보면 아래 이미지처럼 이미지가 먼저 보이고, 글자가 없다가 스르르륵 보이는데 이런 효과를 주고싶어요.
제이쿼리 및 자바스크립트 안쓰고 순수 css로만 줄 수 있는 방법은 없을까요?
답변 2
jquery 도 css 와 javascript 로 만들어졌으니 못할건 없겠지만
그것과 똑같은건 있을지 모르겟네요
https://www.quackit.com/css/codes/marquees/create_fly-in_text_in_css.cfm
이거 한번 참조해보세요
구글링으로 키프레임 애니메이션 이라고 검색해보시면 (혹은 애니메이션 키프레임)
많은 예제 및 방법이 많은 검색이 됩니다.
예제 보시고 사이트에 적용하시면 원하시는 애니메이션이 가능합니다!
transform 과 transition 을 이용해서 만들게 됩니다.
원리만 설명드리자면,
<div class="main_txt">메인텍스트</div>
위와 같은 구조를 만들었을때,
css 로 animation 네임을 설정하고, 지연값을 주게 됩니다.
그 후
@keyframes 애니메이션이름
{
0% {opacity:0; transform:translateX(-50px)}
100% {opacity:1; transform:translateX(0)}
}
이런식으로 동작하게 됩니다.
0% 에서 100% 일때 opacity 값이 0 에서 1로 가는시간 및 X좌표 -50px값에서 0 까지 가는시간.
설명이 조금 부족했지만 ㅠㅠ 원리는 이런식입니다.
구글링 해보시면 이해되실겁니다 :)
그럼 도움되셨길 바라며~~
