|
|
| 1번째 줄: |
1번째 줄: |
| <html>
| |
| <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
| |
| <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
| |
| <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
| |
|
| |
|
| <div id="main-banner" class="swiper-container">
| |
| <div class="swiper-wrapper">
| |
| <div class="swiper-slide">
| |
| <div id="banner" class="flora" onclick="location.href='/w/index.php/분류:플로라_유니버스'">
| |
| <div class="banner-img slide-bottom">
| |
| <img alt="플로라.svg" src="/w/images/1/18/플로라.svg" style="width: auto; height: 100px;">
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="swiper-slide">
| |
| <div id="banner" class="hannara" onclick="location.href='/w/index.php/한나라닷컴'">
| |
| <div id="hannara-2" class="banner-img slide-right-300">
| |
| <img alt="윤석열.png" src="/w/images/6/6a/Hannara-banner-2.png">
| |
| </div>
| |
| <div id="hannara-3" class="banner-img slide-right-200">
| |
| <img alt="나경원.png" src="/w/images/8/89/Hannara-banner-1.png">
| |
| </div>
| |
| <div id="hannara-4" class="banner-img slide-right-100">
| |
| <img alt="이재명.png" src="/w/images/3/3a/Hannara-banner-3.png">
| |
| </div>
| |
| <div id="hannara-1" class="banner-img text-focus-in slide-bottom-only-mobile-520">
| |
| <img alt="한나라닷컴.png" src="/w/images/b/bc/Hannara_c.png">
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="swiper-slide">
| |
| <div id="banner" class="ana" onclick="location.href='/w/index.php/아름다운_나라'">
| |
| <div class="banner-img slide-bottom">
| |
| <img alt="아름다운나라.png" src="/w/images/f/fc/아나_로고.png">
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="swiper-slide">
| |
| <div id="banner" class="rhizome" onclick="location.href='/w/index.php/리좀'">
| |
| <div class="banner-img slide-bottom">
| |
| <img alt="리좀.svg" src="/w/images/5/57/%EB%A6%AC%EC%A2%802.png">
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="swiper-pagination"></div>
| |
| <div class="swiper-button-prev"></div>
| |
| <div class="swiper-button-next"></div>
| |
| </div>
| |
| <style>
| |
| #main-banner {
| |
| width: calc(100% + 30px);
| |
| height: 300px;
| |
| margin-left: -1.0rem;
| |
| }
| |
| .swiper-container {
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| position: relative;
| |
| overflow: hidden;
| |
| list-style: none;
| |
| padding: 0;
| |
| z-index: 1;
| |
| }
| |
|
| |
| .swiper-slide {
| |
| flex-shrink: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| position: relative;
| |
| transition-property: transform;
| |
| }
| |
| .swiper-slide {
| |
| flex-shrink: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| position: relative;
| |
| transition-property: transform;
| |
| }
| |
| .swiper-container-fade .swiper-slide {
| |
| pointer-events: none;
| |
| transition-property: opacity;
| |
| }
| |
|
| |
| #main-banner .swiper-button-next { right: 30px; padding-left: 3px; }
| |
| #main-banner .swiper-button-prev { left: 30px; padding-right: 3px; }
| |
|
| |
| #main-banner .swiper-button-next, #main-banner .swiper-button-prev {
| |
| width: 40px !important;
| |
| height: 40px;
| |
| color: #222;
| |
| font-size: 12px !important;
| |
| box-sizing: border-box;
| |
| /* border: 1px solid #bbb; */
| |
| border-radius: 50%;
| |
| background-color: #fff;
| |
| top: 50%;
| |
| }
| |
|
| |
| #main-banner .swiper-button-next:hover,
| |
| #main-banner .swiper-button-prev:hover {
| |
| background-color: #466DFA;
| |
| box-shadow: 0 4px 12px rgba(34, 53, 122, 0.4);
| |
| transition-duration: 300ms;
| |
| color: #FFF;
| |
| }
| |
|
| |
| #main-banner .swiper-button-prev:after, #main-banner .swiper-button-next:after {
| |
| font-size: 18px !important;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| #main-banner .swiper-pagination-bullet {
| |
| opacity: 1;
| |
| background-color: #FFF;
| |
| }
| |
| #main-banner .swiper-pagination-bullet-active {
| |
| background-color: #466DFA;
| |
| }
| |
|
| |
| #banner {
| |
| width: 100%;
| |
| height: 300px;
| |
| cursor: pointer;
| |
| }
| |
| #banner {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| flex-direction: column;
| |
| }
| |
|
| |
| /* 밑에서 올라오기 */
| |
| .slide-bottom {
| |
| opacity: 0;
| |
| top: 60%;
| |
| transform: translate(-50%, -50%);
| |
| transition: 500ms;
| |
| }
| |
| .swiper-slide-active .slide-bottom {
| |
| opacity: 1;
| |
| top: 50%;
| |
| transition: 500ms;
| |
| }
| |
| /* 오른쪽에서 들어오기 */
| |
| .slide-right-100, .slide-right-200, .slide-right-300 {
| |
| opacity: 0;
| |
| transform: translate(-50%, -50%);
| |
| transition: 500ms;
| |
| }
| |
| .swiper-slide-active .slide-right-100 {
| |
| opacity: 1;
| |
| animation: slide-left-100 1s cubic-bezier(0.250,0.460,0.450,0.940) both;
| |
| transition: 500ms;
| |
| }
| |
| .swiper-slide-active .slide-right-200 {
| |
| opacity: 1;
| |
| animation: slide-left-200 2s cubic-bezier(0.250,0.460,0.450,0.940) both;
| |
| transition: 500ms;
| |
| }
| |
| .swiper-slide-active .slide-right-300 {
| |
| opacity: 1;
| |
| animation: slide-left-300 3s cubic-bezier(0.250,0.460,0.450,0.940) both;
| |
| transition: 500ms;
| |
| }
| |
| @keyframes slide-left-100 {
| |
| 0% {
| |
| -webkit-transform: translateX(0);
| |
| transform: translateX(0);
| |
| }
| |
| 100% {
| |
| -webkit-transform: translateX(-100px);
| |
| transform: translateX(-100px);
| |
| }
| |
| }
| |
| @keyframes slide-left-200 {
| |
| 0% {
| |
| -webkit-transform: translateX(0);
| |
| transform: translateX(0);
| |
| }
| |
| 100% {
| |
| -webkit-transform: translateX(-200px);
| |
| transform: translateX(-200px);
| |
| }
| |
| }
| |
| @keyframes slide-left-300 {
| |
| 0% {
| |
| -webkit-transform: translateX(0);
| |
| transform: translateX(0);
| |
| }
| |
| 100% {
| |
| -webkit-transform: translateX(-300px);
| |
| transform: translateX(-300px);
| |
| }
| |
| }
| |
| /* 흐렸다가 선명해지기 */
| |
| .text-focus-in {
| |
| opacity: 0;
| |
| transition: 500ms;
| |
| }
| |
| .swiper-slide-active .text-focus-in {
| |
| animation: text-focus-in 1s cubic-bezier(0.550,0.085,0.680,0.530) both;
| |
| }
| |
| @keyframes text-focus-in {
| |
| 0% {
| |
| -webkit-filter: blur(12px);
| |
| filter: blur(12px);
| |
| opacity: 0;
| |
| }
| |
| 100% {
| |
| -webkit-filter: blur(0);
| |
| filter: blur(0);
| |
| opacity: 1;
| |
| }
| |
| }
| |
|
| |
| /* 위치 지정 */
| |
| .banner-img {
| |
| position: absolute;
| |
| }
| |
| .slide-bottom {
| |
| left: 50%;
| |
| }
| |
|
| |
| /* 모바일 */
| |
| @media screen and (max-width: 1023px) { #main-banner, #banner { height: 200px; } }
| |
| @media screen and (max-width: 1023px) { .swiper-button-prev, .swiper-button-next { display: none; } }
| |
|
| |
| /* 플로라 */
| |
| .flora {
| |
| background-color: #00A366;
| |
| color: #FFF;
| |
| }
| |
|
| |
| /* 한나라 */
| |
| .hannara {
| |
| background-color: #FFF;
| |
| background-repeat: no-repeat;
| |
| background-size: cover;
| |
| color: #FFF;
| |
| }
| |
| #hannara-1 {
| |
| left: 120px;
| |
| max-width: 400px;
| |
| }
| |
| #hannara-2 {
| |
| top: -50px;
| |
| right: -70px;
| |
| max-width: 550px;
| |
| }
| |
| #hannara-3 {
| |
| top: 50px;
| |
| right: -160px;
| |
| max-width: 450px;
| |
| }
| |
| #hannara-4 {
| |
| top: -10px;
| |
| right: -230px;
| |
| max-width: 600px;
| |
| }
| |
| @media screen and (max-width: 1023px) {
| |
| #hannara-1 { left: 12vw; max-width: 40vw; }
| |
| #hannara-2 { top: -7vh; right: -7vw; max-width: 450px; }
| |
| #hannara-3 { top: 2.5vh; right: -13vw; max-width: 350px; }
| |
| #hannara-4 { top: 0vh; right: -16vw; max-width: 400px; }
| |
| }
| |
| @media screen and (max-width: 798px) {
| |
| #hannara-1 { left: 12vw; max-width: 40vw; }
| |
| #hannara-2 { top: -9vh; right: -16vw; max-width: 480px; }
| |
| #hannara-3 { top: 2.5vh; right: -23vw; max-width: 350px; }
| |
| #hannara-4 { top: 0vh; right: -25vw; max-width: 400px; }
| |
| }
| |
| @media screen and (max-width: 520px) {
| |
| #hannara-1 { left: 50%; max-width: 40vw; }
| |
| #hannara-2 { display: none; }
| |
| #hannara-3 { display: none; }
| |
| #hannara-4 { display: none; }
| |
| .slide-bottom-only-mobile-520 {
| |
| opacity: 0;
| |
| top: 60%;
| |
| transform: translate(-50%, -50%);
| |
| transition: 500ms;
| |
| }
| |
| .swiper-slide-active .slide-bottom-only-mobile-520 {
| |
| opacity: 1;
| |
| top: 50%;
| |
| transition: 500ms;
| |
| }
| |
| .swiper-slide-active .text-focus-in { animation: none; }
| |
| }
| |
|
| |
| /* 아나 */
| |
| .ana {
| |
| background-color: #000070;
| |
| color: #FFF;
| |
| }
| |
|
| |
| /* 리좀 */
| |
| .rhizome {
| |
| background-image: linear-gradient(135deg, #041e42 10%, #eee 10%, #eee 90%, #EC1920 90%);
| |
| color: #FFF;
| |
| }
| |
|
| |
| </style>
| |
| <script>
| |
| const swiper = new Swiper('.swiper-container', {
| |
| //기본 셋팅
| |
| //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
| |
| direction: 'horizontal',
| |
| //한번에 보여지는 페이지 숫자
| |
| // slidesPerView: 1,
| |
| //페이지와 페이지 사이의 간격
| |
| // spaceBetween: 30,
| |
| //드레그 기능 true 사용가능 false 사용불가
| |
| debugger: true,
| |
| //마우스 휠기능 true 사용가능 false 사용불가
| |
| mousewheel: true,
| |
| //반복 기능 true 사용가능 false 사용불가
| |
| loop: true,
| |
| //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 djqt
| |
| centeredSlides: true,
| |
| // 페이지 전환효과 slidesPerView효과와 같이 사용 불가
| |
| effect: 'fade',
| |
|
| |
|
| |
| //자동 스크를링
| |
| autoplay: {
| |
| //시간 1000 이 1초
| |
| delay: 4000,
| |
| disableOnInteraction: false,
| |
| },
| |
| speed: 300,
| |
|
| |
| //페이징
| |
| pagination: {
| |
| //페이지 기능
| |
| el: '.swiper-pagination',
| |
| //클릭 가능여부
| |
| clickable: true,
| |
| },
| |
|
| |
| //방향표
| |
| navigation: {
| |
| //다음페이지 설정
| |
| nextEl: '.swiper-button-next',
| |
| //이전페이지 설정
| |
| prevEl: '.swiper-button-prev',
| |
| },
| |
|
| |
| });
| |
|
| |
| let $slides = document.querySelectorAll('.swiper-slide');
| |
| for (let i of $slides) {
| |
| i.addEventListener('mouseover', function(){
| |
| swiper.autoplay.stop();
| |
| });
| |
| i.addEventListener('mouseout', function(){
| |
| swiper.autoplay.start();
| |
| });
| |
| }
| |
| </script>
| |
| </html>
| |