해당 웹사이트 플러그인이 궁금합니다.

해당 웹사이트 플러그인이 궁금합니다.

QA

해당 웹사이트 플러그인이 궁금합니다.

본문

안녕하십니까

 

 http://gorent-a-car.com/

 

위 사이트에서 스크롤 하면 양옆으로 딱 딱 넘어가는 플러그인이 어떤 플러그인인지 아시는분 계신가요?

이 질문에 댓글 쓰기 :

답변 3

플러그인 아니예요.

css에서 따로 다 작업했네요

transform 속성으로 노가다 한거예요

 

 

#box_area {overflow:hidden; height:100%; }
#box_area > div {position:relative; float:left; height:100%; }
#box_area > div.box, 
#box_area > div .box {position:relative;}
#box_area > div.box a,
#box_area > div .box a {display:block; transform: scale(0.6) rotateY(72deg) translateZ(400px);
-ms-transform: scale(0.6) rotateY(72deg) translateZ(400px);  -webkit-transform: scale(0.6) rotateY(72deg) translateZ(400px);}
#box_area > div.active.box,
#box_area > div.active .box {perspective:1900px; -webkit-perspective:1900px; transform-origin:100% 100% 0; -ms-transform-origin:100% 100% 0; -webkit-transform-origin:100% 100% 0; transition:transform 1s; -webkit-transition:transform 1s;}
#box_area > div.active a {animation:listBoxShow 0.5s ease-in; animation-fill-mode:forwards; -webkit-animation:listBoxShow 0.5s ease-in; -webkit-animation-fill-mode:forwards;}
#box_area > div.active .box_style2 a {animation-delay:0.1s; -webkit-animation-delay:0.1s;}

#box_area > div .full_bg {width:100%; height:100%;}
#box_area > div .text_box {position:absolute; bottom:14%; width:100%; text-align:center;}
#box_area > div .text_box h3 {margin-bottom:5px; font-size:38px; color:#fff;}
#box_area > div .text_box .icon_box span {display:inline-block; padding:0px 5px; font-size:15px; color:#fff; line-height:20px}
#box_area > div .text_box .sub_text {padding-top:30px; font-size:18px; color:#fff;}

#box_area .box1 a,
#box_area .box1 .text_box .icon_box span {background: #454f76}
#box_area .box2 a,
#box_area .box2 .text_box .icon_box span {background: #cd3261}
#box_area .box3 a,
#box_area .box3 .text_box .icon_box span {background: #713896}
#box_area .box4 a,
#box_area .box4 .text_box .icon_box span {background: #356b9b}
#box_area .box5 a,
#box_area .box5 .text_box .icon_box span {background: #2c2c2c}
#box_area .box6 a,
#box_area .box6 .text_box .icon_box span {background: #feb300}
#box_area .box7 a,
#box_area .box7 .text_box .icon_box span {background: #004823}

@keyframes listBoxShow{
	0%{transform:scale(0.6) rotateY(72deg)  translateZ(400px);}
	100%{transform:scale(1) rotateY(0)  translateZ(0);}
}
@-webkit-keyframes listBoxShow{
	0%{-webkit-transform:scale(0.6) rotateY(72deg)  translateZ(400px);}
	100%{-webkit-transform:scale(1) rotateY(0)  translateZ(0);}
}
@-ms-keyframes listBoxShow{
	0%{-ms-transform:scale(0.6) rotateY(72deg)  translateZ(400px);}
	100%{-ms-transform:scale(1) rotateY(0)  translateZ(0);}
}
답변을 작성하시기 전에 로그인 해주세요.
전체 142
QA 내용 검색

회원로그인

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