에티테마

메인페이지 텍스트 에니메이션 되게 하려면...

페이지 정보

작성자 no_profile 그대만의연인 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 1건 작성일 23-02-06 19:41

본문

언제나 최고의 서비스를 해주시는 사장님 감사합니다.
테마명 : 현재 에티테마 t 25 사용중입니다.

아래 사진처럼 메인페이지 첫 화면인데요. 여기 텍스트를 에니메이션을 주고 싶어요. 방법좀 가르쳐 주시면 감사하겠습니다.

c25c16a4f30bf2882dbe77ffdb856e71_1675680100_24.jpg

감사합니다.

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

댓글목록

소프트존님의 댓글

소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일

오늘 작업 처리가 많아서 이제야 답변 드립니다.
테마폴더 common.css 적당한곳에 해당 코드를 넣어주세요.

/***** 슬라이드 텍스트 애니메이션 *****/
@keyframes fadeInUpSD {
    0% {
      opacity: 0;
      -webkit-transform: translateY(100px);
      transform: translateY(100px);
    }
 
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  .fadeInUpSD {
    -webkit-animation-name: fadeInUpSD;
    animation-name: fadeInUpSD;
  }
  /* 이미지 + 유튜브 */
  .slick-active .big-text {
    position: relative;
    height: 100%;
    animation-name: fadeInUpSD;
    animation-duration: 0.5s;
    opacity: 1;
    width: 100%;
  }
  .slick-active .small-text {
    position: relative;
    height: 100%;
    animation-name: fadeInUpSD;
    animation-duration: 0.5s;
    opacity: 1;
    width: 100%;
  }
  /***********************************/

슬라이드의 각 클래스에 애니메이션 효과를 적용하였습니다.
슬라이드에 보시면 캡션 부분이 있습니다.
아래 코드처럼 클래스를 새로 추가해서 적용해주셔야 합니다.
<figcaption class="caption ko lh1-5">
<div class="big-text"><i class="material-icons f60 icon_ve">add_ic_call</i> 폰트 2개 지원</div>
<div class="small-text">
    PHP 8.2 에서 테스트 되었습니다.
    <div>
        <button type="button" class="btn btn-primary mt40 hidden-sm hidden-xs" onClick="location.href='<?php echo G5_URL?>'">바로가기</button>
    </div>  
</div>
</figcaption>


위 처럼 슬라이드 텍스트부분에 적용해주시면 슬라이드 시마다 아래서 위로 올라가는 애니메이션이 적용 됩니다.
감사합니다.


Total 1,251건 11 페이지
질문답변 목록
번호 제목 날짜
951
시간 : 03-10
03-10
950
시간 : 03-10
03-10
949
시간 : 03-09
03-09
948
시간 : 03-09
03-09
947
시간 : 03-08
03-08
946
시간 : 03-08
03-08
945
시간 : 03-08
03-08
944
시간 : 03-08
03-08
943
시간 : 03-08
03-08
942
시간 : 03-06
03-06
941
시간 : 03-05
03-05
940
시간 : 03-05
03-05
939
시간 : 03-03
03-03
938
시간 : 03-03
03-03
937
시간 : 03-03
03-03
936
시간 : 03-02
03-02
935
시간 : 03-02
03-02
934
시간 : 03-02
03-02
933
시간 : 03-01
03-01
932
시간 : 02-28
02-28
931
시간 : 02-27
02-27
930
시간 : 02-23
02-23
929
시간 : 02-22
02-22
928
시간 : 02-22
02-22
927
시간 : 02-21
02-21
926
시간 : 02-21
02-21
925
시간 : 02-21
02-21
924
시간 : 02-20
02-20
923
시간 : 02-18
02-18
922
시간 : 02-17
02-17
게시물 검색

카테고리

카테고리
질문답변
 메뉴얼