제이쿼리 안쓰고 텍스트에 애니메이션 줄방법 없을까요?

제이쿼리 안쓰고 텍스트에 애니메이션 줄방법 없을까요?

QA

제이쿼리 안쓰고 텍스트에 애니메이션 줄방법 없을까요?

본문

샘플페이지 : http://bdmp-003.cafe24.com/bizdemo80550/

 

위링크에 보면 아래 이미지처럼 이미지가 먼저 보이고, 글자가 없다가 스르르륵 보이는데 이런 효과를 주고싶어요. 

 

제이쿼리 및 자바스크립트 안쓰고 순수 css로만 줄 수 있는 방법은 없을까요? 

3717166851_1581480501.6501.png

이 질문에 댓글 쓰기 :

답변 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 까지 가는시간.

설명이 조금 부족했지만 ㅠㅠ 원리는 이런식입니다.

구글링 해보시면 이해되실겁니다 :)

그럼 도움되셨길 바라며~~

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 117
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT