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