에티테마

레볼루션 슬라이드 jquery 텍스트 애니메이션 사용방법

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 작성일 24-08-02 16:36

본문

현재 에티테마에서 판매되고 있는 테마중에서 원페이지 형식으로 레볼루션 슬라이드 jquery 버전을 사용하는 테마가 있습니다.
해당 레볼루션 슬라이드의 애니메이션 효과에 대해서 설명드리도록 하겠습니다.

레볼루션 슬라이드 jquery 버전의 메뉴얼 입니다.
https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/
사용시에 라이선스가 있으니 참고 부탁드리겠습니다.

[설명]
텍스트에 애니메이션 효과를 변경하고 하시면 아래 블럭으로 되어 있는 두줄이 있습니다.
해당 내용을 변경해주시면 텍스트 애니메이션이 변경이 됩니다.

Fade In/Out 효과 

data-transform_in="opacity:0;s:600;e:Power2.easeOut;"
data-transform_out="opacity:0;s:600;e:Power2.easeIn;"


Rotate In/Out 효과
data-transform_in="x:0;y:0;z:0;rotationZ:90;opacity:0;s:600;e:Power2.easeOut;"
data-transform_out="x:0;y:0;z:0;rotationZ:-90;opacity:0;s:600;e:Power2.easeIn;"

Bounce 효과
data-transform_in="y:50;opacity:0;s:800;e:Bounce.easeOut;"
data-transform_out="y:-50;opacity:0;s:800;e:Bounce.easeIn;"

를 아래 블럭으로 되어 있는곳에 수정해주시면 위 효과가 적용이 됩니다.


311578128ec5cb0ff9a0ba26a89de058_1722583674_78.png

텍스트 효과를 자주 변경하지 않기 때문에 모든 내용을 알 수가 없는데요.
일단 사용 옵션에 대해서는 아래와 같습니다.

[옵션설명]

data-transform_in="x:0;y:50;opacity:0;s:600;e:Power2.easeOut;":


x:0;y:50;: 텍스트가 아래에서 위로 50px 이동하면서 나타납니다.

opacity:0;: 처음에 투명했다가 점점 보이게 됩니다.

s:600;: 애니메이션이 600ms 동안 지속됩니다.

e:Power2.easeOut;: 애니메이션이 끝날 때 부드럽게 감속합니다.

data-transform_out="x:0;y:-50;opacity:0;s:600;e:Power2.easeIn;":


x:0;y:-50;: 텍스트가 위로 50px 이동하면서 사라집니다.

opacity:0;: 점점 투명해지면서 사라집니다.

s:600;: 애니메이션이 600ms 동안 지속됩니다.

e:Power2.easeIn;: 애니메이션이 시작할 때 부드럽게 가속합니다.

data-splitin="chars" 및 data-splitout="chars":


텍스트가 문자 단위로 나타나고 사라집니다.


chatgpt 도 해당 슬라이드에 대해서 알고 있으니 해당 애니메이션에 대해서 질문하시면 만족할만한 결과를 얻을 수 있을것 같습니다.




 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

Total 87건 1 페이지