You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
393 lines
17 KiB
393 lines
17 KiB
<!DOCTYPE html> |
|
<html lang="ko"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>음성명작페스티벌</title> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" /> |
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
<link rel="stylesheet" href="./main.css"> |
|
</head> |
|
|
|
<body> |
|
<!--네비--> |
|
<nav id="nav" class="nav"> |
|
<div class="login-sec"> |
|
<ul class="login-menu"> |
|
<li class="sign-up cusor-p "><a href=""> 회원가입</a></li> |
|
<li>|</li> |
|
<li class="login cusor-p ">로그인</li> |
|
</ul> |
|
</div> |
|
<div class="logo-sec"> |
|
<img class="nav-logo" src="./main/logo/logo_big.png" alt="음성명작 페스티벌"> |
|
<img class="nav-logo-m" src="./main/logo/logo_small.png" alt="음성명작 페스티벌 모바일 홈페이지"> |
|
</div> |
|
<div class="gnb"> |
|
<ul class="main-menu"> |
|
<li class="cusor-p ">축제소개</li> |
|
<li class="cusor-p ">주요 콘텐츠</li> |
|
<li class="cusor-p ">이벤트</li> |
|
<li class="cusor-p ">명작스토리</li> |
|
<li class="cusor-p ">커뮤니티</li> |
|
</ul> |
|
<ul class="gnb-sns"> |
|
<li class="cusor-p gnb-sns-item insta"></li> |
|
<li class="cusor-p gnb-sns-item blog"></li> |
|
<li class="cusor-p gnb-sns-item youtube"></li> |
|
<li class="cusor-p gnb-sns-item face"></li> |
|
</ul> |
|
</div> |
|
<div class="gnb-line"></div> |
|
<div class="toggle-btn cusor-p"> |
|
<div class="toggle-bar"></div> |
|
<div class="toggle-bar"></div> |
|
<div class="toggle-bar"></div> |
|
</div> |
|
</nav> |
|
<!-- 스크롤 네비--> |
|
<nav id="scroll-nav" class="nav-scroll hide"> |
|
<div class="scroll-nav-top"> |
|
<ul class="gnb-sns"> |
|
<li class="cusor-p gnb-sns-item insta"></li> |
|
<li class="cusor-p gnb-sns-item face"></li> |
|
<li class="cusor-p gnb-sns-item blog"></li> |
|
<li class="cusor-p gnb-sns-item youtube"></li> |
|
</ul> |
|
<div class="login-sec"> |
|
<ul class="login-menu"> |
|
<li class="sign-up cusor-p "><a href=""> 회원가입</a></li> |
|
<li>|</li> |
|
<li class="login cusor-p ">로그인</li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="scroll-nav-bottom"> |
|
<div class="logo-sec"> |
|
<img class="nav-logo-m" src="./main/logo/logo_small.png" alt="음성명작 페스티벌 홈페이지"> |
|
</div> |
|
<div class="gnb"> |
|
<ul class="main-menu"> |
|
<li class="cusor-p ">축제소개</li> |
|
<li class="cusor-p ">축제안내</li> |
|
<li class="cusor-p ">명작스토리</li> |
|
<li class="cusor-p ">게시판</li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="gnb-line"></div> |
|
<div class="toggle-btn cusor-p"> |
|
<div class="toggle-bar"></div> |
|
<div class="toggle-bar"></div> |
|
<div class="toggle-bar"></div> |
|
</div> |
|
</nav> |
|
<!--모바일 네비--> |
|
<div class="m-menu-box hide"> |
|
<div class="m-menu"> |
|
<div class="m-login-sec"> |
|
<ul class="m-login-menu"> |
|
<li class="m-sign-up cusor-p "><a href=""> 회원가입</a></li> |
|
<li>|</li> |
|
<li class="m-login cusor-p ">로그인</li> |
|
</ul> |
|
</div> |
|
<div class="m-gnb"> |
|
<ul class="m-main-menu"> |
|
<li class="cusor-p ">축제소개</li> |
|
<li class="cusor-p ">축제안내</li> |
|
<li class="cusor-p ">명작스토리</li> |
|
<li class="cusor-p ">커뮤니티</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
<!--메인--> |
|
<main id="main"> |
|
<!--메인 슬라이드--> |
|
<section class="slider-sec"> |
|
<div class="slider-outer"> |
|
<div class="swiper mySwiper"> |
|
<div class="swiper-wrapper"> |
|
<div class="swiper-slide"> |
|
<a href=""> |
|
<img src="./main/main/img_slide1.png" alt="음성명작 페스티벌 배너 광고1"> |
|
</a> |
|
</div> |
|
<div class="swiper-slide"> |
|
<a href=""> |
|
<img src="./main/main/img_slide2.png" alt="음성명작 페스티벌 배너 광고2"> |
|
</a> |
|
</div> |
|
<div class="swiper-slide"> |
|
<a href=""> |
|
<img src="./main/main/img_slide3.png" alt="음성명작 페스티벌 배너 광고3"></a> |
|
</div> |
|
</div> |
|
<div class="swiper-pagination"></div> |
|
</div> |
|
</div> |
|
</section> |
|
<!--메인 공지--> |
|
<section class="notice-sec"> |
|
<div class="notice notice-fade-out "> |
|
<h4>공지사항</h4> |
|
<div class="notice-roll-box"> |
|
<ul class="notice-roll"> |
|
<li class="cusor-p"> |
|
<a class="notice-text" href="">음성군 6월 대표과일!</a> |
|
</li> |
|
<li class="cusor-p"> |
|
<a class="notice-text" href="">2021 음성명작 페스티벌 사이트가 리뉴얼 되었습니다~</a> |
|
</li> |
|
<li class="cusor-p"> |
|
<a class="notice-text" href="">음성군 6월 대표과일!</a> |
|
</li> |
|
</ul> |
|
</div> |
|
<button class="notice-btn cusor-p "><img src="./main/icon/more.png" alt="공지사항 더보기 버튼"></button> |
|
</div> |
|
<div class="banner"> |
|
<a href="" class="notice-banner-animation0-off"> |
|
<img src="./main/main/con1.png" alt="음성명작 페스티벌 잔치잔치 열렸네! - 포스터"> |
|
</a> |
|
<a href="" class="notice-banner-animation1-off"> |
|
<img src="./main/main/con2.png" alt="문예공모전 결과 발표 - 포스터"> |
|
</a> |
|
<a href="" class="notice-banner-animation2-off"> |
|
<img src="./main/main/con3.png" alt="명작 스토리 안심농가 방문 - 포스터"> |
|
</a> |
|
</div> |
|
</section> |
|
<!--메인 바텀 슬라이드--> |
|
<section class="bot-slider-sec bot-slider-fade-out"> |
|
<div class="bot-slider-box"> |
|
<div class="bot-slider-text-box"> |
|
<div class="text"> |
|
<span>음성명작페스티벌</span> |
|
<span><strong>둘러보기!</strong></span> |
|
<span>음성명작페스티벌</span> |
|
<span>백배 즐기기</span> |
|
</div> |
|
<div class="bot-slider-btn-box"> |
|
<button class="cusor-p bot-slider-btn bot-swiper-button-prev " id="prev"> |
|
<img src="./main/icon/card_left.png" alt="음성명작 페스티벌 둘러보기 이미지 넘기기 이전"> |
|
</button> |
|
<button class="cusor-p bot-slider-btn bot-swiper-button-next" id="next"> |
|
<img src="./main/icon/card_right.png" alt="음성명작 페스티벌 둘러보기 이미지 넘기기 다음"> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="bot-slider-outer"> |
|
<div class="swiper bot-swiper"> |
|
<div class="swiper-wrapper"> |
|
<a href="" class="swiper-slide"> |
|
<img src="./main/main/ban1.png" alt="축제공간구성 위치확인하고 빠르게 찾아가자 바로가기"> |
|
</a> |
|
<a href="" class="swiper-slide"> |
|
<img src="./main/main/ban2.png" alt="축제프로그램 다양한 공연과 체험 프로그램 바로가기"> |
|
</a> |
|
<a href="" class="swiper-slide"> |
|
<img src="./main/main/ban3.png" alt="지난이야기 음성명작 페스티벌 발자취 바로가기"> |
|
</a> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
<!--메인 협업사--> |
|
<section class="alliance-sec"> |
|
<div class="alliance-bar"> |
|
<a href=""><img src="./main/logo/btm_banner1.png" alt="음성군 홈페이지 바로가기"></a> |
|
<a href=""><img src="./main/logo/btm_banner2.png" alt="음성장터 바로가기"></a> |
|
<a href=""><img src="./main/logo/btm_banner3.png" alt="음성명작페스티벌 바로가기"></a> |
|
</div> |
|
</section> |
|
</main> |
|
<!--푸터--> |
|
<footer id="footer"> |
|
<div class="footer-box"> |
|
<div class="footer-logo"> |
|
<img src="./main/logo/footer_logo.png" alt="음성명작 페스티벌 로고"> |
|
</div> |
|
<ul class="footer-sns"> |
|
<li><a><img src="./main/icon/sns_insta_on.png" alt="인스타그램 바로가기"></a></li> |
|
<li><a><img src="./main/icon/sns_face_on.png" alt="인스타그램 바로가기"></a></li> |
|
<li><a><img src="./main/icon/sns_blog_on.png" alt="인스타그램 바로가기"></a></li> |
|
<li><a><img src="./main/icon/sns_youtube_on.png" alt="인스타그램 바로가기"></a></li> |
|
</ul> |
|
<div class="footer-text"> |
|
<span><strong>음성명작페스티벌 사업단</strong></span> |
|
<span>충청북도 음성군 음성읍 반기문로 27 2층</span> |
|
<span>사업자등록번호 : 308-82-73169 | 대표자 : 조용주</span> |
|
<span>Copyright ⓒ2020 EUMSEONG MYEONGJAK. ALL RIGHTS RESERVED.</span> |
|
</div> |
|
<div class="call-num"> |
|
<h1>대표전화</h1> |
|
<p><strong>043-873-8940</strong></p> |
|
<p>09:00 ~ 18:00 토·일요일·공휴일 휴무</p> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> |
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|
<script> |
|
var swiper = new Swiper(".mySwiper", { |
|
direction: 'horizontal', |
|
loop: true, |
|
speed: 1000, |
|
autoplay: { |
|
delay: 2000, |
|
}, |
|
setWrapperSize: true, |
|
autoHeight: true, |
|
pagination: { |
|
el: ".swiper-pagination", |
|
clickable: true, |
|
type: "bullets" |
|
}, |
|
breakpoints: { //반응형 조건 속성 |
|
320: { //640 이상일 경우 |
|
slidesPerView: 1, //레이아웃 2열 |
|
}, |
|
} |
|
}); |
|
var swiper = new Swiper(".bot-swiper", { |
|
direction: 'horizontal', |
|
pagination: false, |
|
loop: true, |
|
speed: 1000, |
|
autoplay: { |
|
delay: 2000, |
|
}, |
|
navigation: { |
|
nextEl: '.bot-swiper-button-next', |
|
prevEl: '.bot-swiper-button-prev', |
|
}, |
|
breakpoints: { //반응형 조건 속성 |
|
426: { //640 이상일 경우 |
|
slidesPerView: 2.2, //레이아웃 2열 |
|
}, |
|
320: { //640 이상일 경우 |
|
slidesPerView: 1, //레이아웃 2열 |
|
}, |
|
} |
|
}); |
|
</script> |
|
<script> |
|
$(document).ready(function () { |
|
$(".notice-text").each(() => { |
|
var length = 16; |
|
$(this).each(() => { |
|
if ($(this).text().length >= length) { |
|
$(this).text($(this).text().substr(0, length) + '...'); |
|
} |
|
}) |
|
}) |
|
|
|
$(".toggle-btn").click(() => { |
|
$(".m-menu-box").toggleClass("hide") |
|
}) |
|
$(".notice").removeClass("notice-fade-out") |
|
$(".notice").addClass("notice-fade-in") |
|
|
|
const bannerFn = function () { |
|
$(".banner a").each((index, item) => { |
|
$(item).removeClass(`notice-banner-animation${index}-off`) |
|
$(item).addClass(`notice-banner-animation${index}-on`) |
|
}) |
|
} |
|
setTimeout(bannerFn, 500) |
|
}) |
|
$(window).resize(function() { |
|
if ($(this).width() >= 426) { |
|
$(".m-menu-box").addClass("hide") |
|
}else if($(this).width() < 426) { |
|
console.log("작음"); |
|
$(".m-menu-box").addClass("hide") |
|
} |
|
}) |
|
</script> |
|
<script> |
|
const navScroll = document.querySelector("#scroll-nav"); |
|
const navSns = document.querySelectorAll("#nav .gnb-sns .gnb-sns-item") |
|
const arryNavSns = Array.from(navSns) |
|
const scrollNavSns = document.querySelectorAll("#scroll-nav .gnb-sns .gnb-sns-item") |
|
const arryScrollNavSns = Array.from(scrollNavSns) |
|
const snsKind = ['insta', 'face', 'blog', 'youtube'] |
|
const ON = "on" |
|
const OFF = "off" |
|
// SNS 호버 이벤트 |
|
const snsBg = (listArray)=>{ |
|
if(listArray) { |
|
listArray.forEach((element, index, array)=>{ |
|
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat` |
|
}) |
|
} |
|
} |
|
const mouseEnter = (listArray)=>{ |
|
listArray.forEach((element, index, array)=>{ |
|
element.addEventListener('mouseenter', ()=>{ |
|
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${ON}.png') no-repeat` |
|
}) |
|
}) |
|
} |
|
const mouseLeave = (listArray)=>{ |
|
listArray.forEach((element, index, array)=>{ |
|
element.addEventListener('mouseleave', ()=>{ |
|
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat` |
|
}) |
|
}) |
|
} |
|
|
|
snsBg(arryNavSns) |
|
mouseEnter(arryNavSns) |
|
mouseLeave(arryNavSns) |
|
snsBg(arryScrollNavSns) |
|
mouseEnter(arryScrollNavSns) |
|
mouseLeave(arryScrollNavSns) |
|
|
|
const scrollNavFn = () => { |
|
let Y = document.documentElement.scrollTop |
|
if (Y >= 300) { |
|
navScroll.classList.add("fixed") |
|
navScroll.classList.remove("hide") |
|
} else { |
|
navScroll.classList.remove("fixed") |
|
navScroll.classList.add("hide") |
|
} |
|
} |
|
const scrollBotSliderFn = () => { |
|
let Y = document.documentElement.scrollTop |
|
const botSliderSec = document.querySelector(".bot-slider-sec") |
|
const allianceSec = document.querySelector(".alliance-sec") |
|
const botSliderSecH = document.querySelector(".bot-slider-sec").scrollHeight |
|
if (Y >= botSliderSecH) { |
|
botSliderSec.classList.remove("bot-slider-fade-out") |
|
botSliderSec.classList.add("bot-slider-fade-in") |
|
allianceSec.classList.remove("bot-slider-fade-out") |
|
allianceSec.classList.add("bot-slider-fade-in") |
|
} else { |
|
botSliderSec.classList.remove("bot-slider-fade-in") |
|
botSliderSec.classList.add("bot-slider-fade-out") |
|
allianceSec.classList.remove("bot-slider-fade-in") |
|
allianceSec.classList.add("bot-slider-fade-out") |
|
} |
|
} |
|
|
|
const scrollFn = () => { |
|
scrollNavFn() |
|
scrollBotSliderFn() |
|
} |
|
|
|
document.addEventListener("scroll", scrollFn) |
|
|
|
</script> |
|
</body> |
|
|
|
</html> |