해당 웹사이트 플러그인이 궁금합니다.
본문
답변 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);}
}
                    스크롤은 그냥 브라우저에서 지원해요 가로 스크롤도요
해당 사이트는 가로크기를 크게 미리 잡아놔서 그런거고요
상하단스크롤이 아니라 좌우스크롤 제이쿼리 검색해보세요
                답변을 작성하시기 전에 로그인 해주세요.
            
    
