테스트 사이트 - 개발 중인 베타 버전입니다

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

DavidKim 6년 전 조회 1,994

안녕하십니까

 

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

 

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

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트

플러그인 아니예요.

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);}
}
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

D
DavidKim
6년 전
그렇군요 답변 감사드립니다.!
그런데 css만으로 스크롤 했을때 좌우이동이 되게 할 수가 있는건가요..?
제가해봤을때는 안되네요ㅜ

댓글을 작성하려면 로그인이 필요합니다.

상하단스크롤이 아니라 좌우스크롤 제이쿼리 검색해보세요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

스크롤은 그냥 브라우저에서 지원해요 가로 스크롤도요

해당 사이트는 가로크기를 크게 미리 잡아놔서 그런거고요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인