Code - jhleem/egov

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> <%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <% /** * @Class Name : index.jsp * @Description : index page * @Modification Information * @ * @ 수정일 수정자 수정내용 * @ ------ ------ ----------------- * @ 2022. 2. 14. 임종호 최초 작성 * */ %> <div class="swiper main_slide"> <div class="swiper-wrapper">  <div class="swiper-slide bg_box"> <img src="/images/user/main_bg.jpg" alt=""> <div class="inner"><em title="cross street">cross street</em> <strong>허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경</strong> <p>조선 시대 가장 존경받는 정승이 누구인지 물어보면 누구나 이견 없이 황희 정승을 꼽을 것이다.<br> 황희는 현재의 국무총리 역할인 조선 시대 정승이었던 좌의정, 우의정, 영의정을 무려 25년 가까이 수행하였다.</p> <button onClick="location.href='/content/common/article_view.html'">show more</button> </div> </div> <div class="swiper-slide bg_box"> <img src="/images/user/main_bg.jpg" alt=""> <div class="inner"><em title="cross street">cross street</em> <strong>허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경</strong> <p>조선 시대 가장 존경받는 정승이 누구인지 물어보면 누구나 이견 없이 황희 정승을 꼽을 것이다.<br> 황희는 현재의 국무총리 역할인 조선 시대 정승이었던 좌의정, 우의정, 영의정을 무려 25년 가까이 수행하였다.</p> <button onClick="location.href='/content/common/article_view.html'">show more</button> </div> </div> <div class="swiper-slide bg_box"> <img src="/images/user/main_bg.jpg" alt=""> <div class="inner"><em title="cross street">cross street</em> <strong>허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경</strong> <p>조선 시대 가장 존경받는 정승이 누구인지 물어보면 누구나 이견 없이 황희 정승을 꼽을 것이다.<br> 황희는 현재의 국무총리 역할인 조선 시대 정승이었던 좌의정, 우의정, 영의정을 무려 25년 가까이 수행하였다.</p> <button onClick="location.href='/content/common/article_view.html'">show more</button> </div> </div>  </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination rellax" data-rellax-speed="2.3"></div> </div> <div class="main_content"> <div class="inner">  <div class="rellax" data-rellax-speed="4"> <div class="hotClick"> <div class="title_wrap"> <h2>hot click</h2> </div> <ol> <li><a href="javascript:void(0)" title="APCTP 2021 올해의 과학도서">APCTP 2021 올해의 과학도서</a></li> <li><a href="javascript:void(0)" title="APCTP 2021 올해의 과학도서">APCTP 2021 올해의 과학도서</a></li> <li><a href="javascript:void(0)" title="APCTP 2021 올해의 과학도서">APCTP 2021 올해의 과학도서</a></li> <li><a href="javascript:void(0)" title="APCTP 2021 올해의 과학도서">APCTP 2021 올해의 과학도서</a></li> <li><a href="javascript:void(0)" title="APCTP 2021 올해의 과학도서">APCTP 2021 올해의 과학도서</a></li> <li><a href="javascript:void(0)" title="APCTP 2021 올해의 과학도서">APCTP 2021 올해의 과학도서</a></li> <li><a href="javascript:void(0)" title="APCTP 2021 올해의 과학도서">APCTP 2021 올해의 과학도서</a></li> <li><a href="javascript:void(0)" title="APCTP 2021 올해의 과학도서">APCTP 2021 올해의 과학도서</a></li> <li><a href="javascript:void(0)" title="APCTP 2021 올해의 과학도서">APCTP 2021 올해의 과학도서</a></li> <li><a href="javascript:void(0)" title="APCTP 2021 올해의 과학도서">APCTP 2021 올해의 과학도서</a></li> </ol> </div> </div>   <div class="article_list main_wrap rearticle rellax" data-rellax-speed="3"> <div class="title_wrap"> <h2>recent articles</h2> <button type="button" class="showmore" >show more<span class="icon-arrow-r"></span></button> </div> <ul> <li> <a href="/content/common/article_view.html" class="bg_box" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경" > <img src="/images/user/sample1.jpg" alt="우주이미지"> </a> <a href="#!" class="category">Cross Street</a> <a href="#!" class="title textover" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경">허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경</a> <p class="by"> <a href="/content/common/writer_list.html" title="작가 정보" class="writer">강성주</a><em>국립과천과학관</em></p> <p class="text"> <a href="/content/common/article_view.html" class="textover" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경">조선 시대 가장 존경받는 정승이 누구인지 물어보면 누구나 이견 없이 황희 정승을 꼽을 것이다. 황희는 현재의 국무총리 역할인 조선 시대 정승이었던 좌의정, 우의정, 영의정을 무려 25년 가까이 수행하였다. 황희는 현재의 국무총리 역할인 조선 시대 정승이었던 좌의정, 우의정, 영의정을 무려 25년 가까이 수행하였다.</a> </p> </li> <li> <a href="/content/common/article_view.html" class="bg_box" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경" > <img src="/images/user/sample1.jpg" alt="우주이미지"> </a> <a href="#!" class="category">Cross Street</a> <a href="#!" class="title textover" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경">허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경</a> <p class="by"> <a href="/content/common/writer_list.html" title="작가 정보" class="writer">강성주</a><em>국립과천과학관</em></p> <p class="text"> <a href="/content/common/article_view.html" class="textover" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경">조선 시대 가장 존경받는 정승이 누구인지 물어보면 누구나 이견 없이 황희 정승을 꼽을 것이다. 황희는 현재의 국무총리 역할인 조선 시대 정승이었던 좌의정, 우의정, 영의정을 무려 25년 가까이 수행하였다. 황희는 현재의 국무총리 역할인 조선 시대 정승이었던 좌의정, 우의정, 영의정을 무려 25년 가까이 수행하였다.</a> </p> </li> <li> <a href="/content/common/article_view.html" class="bg_box" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경" > <img src="/images/user/sample1.jpg" alt="우주이미지"> </a> <a href="#!" class="category">Cross Street</a> <a href="#!" class="title textover" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경">허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경</a> <p class="by"> <a href="/content/common/writer_list.html" title="작가 정보" class="writer">강성주</a><em>국립과천과학관</em></p> <p class="text"> <a href="/content/common/article_view.html" class="textover" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경">조선 시대 가장 존경받는 정승이 누구인지 물어보면 누구나 이견 없이 황희 정승을 꼽을 것이다. 황희는 현재의 국무총리 역할인 조선 시대 정승이었던 좌의정, 우의정, 영의정을 무려 25년 가까이 수행하였다. 황희는 현재의 국무총리 역할인 조선 시대 정승이었던 좌의정, 우의정, 영의정을 무려 25년 가까이 수행하였다.</a> </p> </li> </ul> </div>   <div class="article_list main_wrap rellax videos" data-rellax-speed="2"> <div class="title_wrap"> <h2>videos</h2> <button type="button" class="showmore">show more<span class="icon-arrow-r"></span></button> </div> <ul> <li><div class="video_box bg_box"><button type="button" class="btn_video" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경 재생"><em class="blind">재생</em></button><img src="/images/user/sample1.jpg" alt="우주이미지"></div><a href="#!" class="title textover" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경">허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경</a> <p class="time">05:00</p> </li> <li><div class="video_box bg_box"><button type="button" class="btn_video" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경 재생"><em class="blind">재생</em></button><img src="/images/user/sample1.jpg" alt="우주이미지"></div><a href="#!" class="title textover" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경">허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경</a> <p class="time">05:00</p> </li> <li><div class="video_box bg_box"><button type="button" class="btn_video" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경 재생"><em class="blind">재생</em></button><img src="/images/user/sample1.jpg" alt="우주이미지"></div><a href="#!" class="title textover" title="허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경">허블 우주망원경의 업적 그리고 천문학의 새로운 역사의 시작, 제임스 웹 우주망원경</a> <p class="time">05:00</p> </li> </ul> </div>   <div class="banner main_wrap rellax" data-rellax-speed="1"> <ul> <li> <div class="title_wrap"> <h2>APCTP's choice</h2> </div> <a href="javascript:void(0)" title="올해의 과학도서"><img src="/images/user/book1.png" alt=""> <div class="bg_box"><img src="/images/user/banner1.jpg" alt="">올해의 과학도서</div> </a></li> <li> <div class="title_wrap"> <h2>book report</h2> </div> <a href="javascript:void(0)" title="올해의 과학도서"><img src="/images/user/book2.png" alt=""> <div class="bg_box"><img src="/images/user/banner2.jpg" alt="">올해의 과학도서<br> 청소년 독후감 대회 수상작</div> </a></li> </ul> </div>   <div class="notice main_wrap rellax" data-rellax-speed="0"> <div class="title_wrap"> <h2><a href="/content/common/notice_list.html" title="뉴스바로가기" >news & notice</a></h2> <button type="button" class="showmore" onClick="location.href='/content/common/notice_list.html'" title="뉴스바로가기">show more<span class="icon-arrow-r"></span></button> </div> <div class="swiper news_slide"> <div class="swiper-wrapper">  <div class="swiper-slide"><a href="/content/common/notice_list.html" class="textover" title="[과학 커뮤니케이선 강연] 2021 APCTP 공통 과학 (올해의 과학도서 저자 인터뷰프로그램) 개최">[과학 커뮤니케이선 강연] 2021 APCTP 공통 과학 (올해의 과학도서 저자 인터뷰프로그램) 개최(올해의 과학도서 저자 인터뷰프로그램) 개최</a> <em>2022.01.17</em> </div> <div class="swiper-slide"><a href="/content/common/notice_list.html" class="textover" title="[과학 커뮤니케이선 강연] 2021 APCTP 공통 과학 (올해의 과학도서 저자 인터뷰프로그램) 개최">[과학 커뮤니케이선 강연] 2021 APCTP 공통 과학 (올해의 과학도서 저자 인터뷰프로그램) 개최</a> <em>2022.01.17</em> </div> <div class="swiper-slide"><a href="/content/common/notice_list.html" class="textover" title="[과학 커뮤니케이선 강연] 2021 APCTP 공통 과학 (올해의 과학도서 저자 인터뷰프로그램) 개최">[과학 커뮤니케이선 강연] 2021 APCTP 공통 과학 (올해의 과학도서 저자 인터뷰프로그램) 개최</a> <em>2022.01.17</em> </div> <div class="swiper-slide"><a href="/content/common/notice_list.html" class="textover" title="[과학 커뮤니케이선 강연] 2021 APCTP 공통 과학 (올해의 과학도서 저자 인터뷰프로그램) 개최">[과학 커뮤니케이선 강연] 2021 APCTP 공통 과학 (올해의 과학도서 저자 인터뷰프로그램) 개최</a> <em>2022.01.17</em> </div> <div class="swiper-slide"><a href="/content/common/notice_list.html" class="textover" title="[과학 커뮤니케이선 강연] 2021 APCTP 공통 과학 (올해의 과학도서 저자 인터뷰프로그램) 개최">[과학 커뮤니케이선 강연] 2021 APCTP 공통 과학 (올해의 과학도서 저자 인터뷰프로그램) 개최</a> <em>2022.01.17</em> </div> <div class="swiper-slide"><a href="/content/common/notice_list.html" class="textover" title="[과학 커뮤니케이선 강연] 2021 APCTP 공통 과학 (올해의 과학도서 저자 인터뷰프로그램) 개최">[과학 커뮤니케이선 강연] 2021 APCTP 공통 과학 (올해의 과학도서 저자 인터뷰프로그램) 개최</a> <em>2022.01.17</em> </div>  </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> </div> </div>  </div> <div class="bg_box bg_wave"> <img src="/images/user/main_bgwave.svg" alt=""> </div> </div> <script> $(function(){ var controller = new ScrollMagic.Controller(); // build tween var tween = TweenMax.to(".main_slide", 0.5, {opacity: "0"}), height = $(".main_slide").outerHeight() / 2; var wave = TweenMax.to(".bg_wave", 0.5, {opacity: "1"}), waveHeight = $(".bg_wave").outerHeight(); // slide var scene = new ScrollMagic.Scene({triggerElement: ".main_slide", triggerHook:'.2'}) .duration("45%") .offset(height) .setTween(tween) //.addIndicators({name: "main_slide"}) .addTo(controller); //bg wave var sceneWave = new ScrollMagic.Scene({triggerElement: ".videos", triggerHook:'.2'}) .duration(waveHeight) .setTween(wave) //.addIndicators({name: "wave"}) .addTo(controller) var revealElements = $(".title_wrap, .hotClick, .main_wrap") for (var i=0; i<revealElements.length; i++) { var scene2 = new ScrollMagic.Scene({ triggerElement: revealElements[i], triggerHook: 0.7 }) .setClassToggle(revealElements[i], "active") // add class toggle .addTo(controller) //.addIndicators({name: "each"}) } }); </script> <script type="text/javascript" src="<c:url value='/js/user/rellax.js'><c:param name="dt" value="${nowDate}"/></c:url>"></script> <script> var rellax = new Rellax('.rellax'); //parallax </script>