메인페이지 텍스트 에니메이션 되게 하려면...
페이지 정보
작성자
그대만의연인
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 1건
작성일 23-02-06 19:41
본문
언제나 최고의 서비스를 해주시는 사장님 감사합니다.
테마명 : 현재 에티테마 t 25 사용중입니다.
아래 사진처럼 메인페이지 첫 화면인데요. 여기 텍스트를 에니메이션을 주고 싶어요. 방법좀 가르쳐 주시면 감사하겠습니다.
감사합니다.
테마명 : 현재 에티테마 t 25 사용중입니다.
아래 사진처럼 메인페이지 첫 화면인데요. 여기 텍스트를 에니메이션을 주고 싶어요. 방법좀 가르쳐 주시면 감사하겠습니다.
감사합니다.
댓글목록
소프트존님의 댓글
소프트존
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
작성일
오늘 작업 처리가 많아서 이제야 답변 드립니다.
테마폴더 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>
위 처럼 슬라이드 텍스트부분에 적용해주시면 슬라이드 시마다 아래서 위로 올라가는 애니메이션이 적용 됩니다.
감사합니다.
메뉴얼
