Index: base3.10/src/main/webapp/css/user/common.css =================================================================== --- base3.10/src/main/webapp/css/user/common.css (revision 96) +++ base3.10/src/main/webapp/css/user/common.css (revision 97) @@ -171,7 +171,7 @@ .bg_wave { opacity:0; pointer-events:none; z-index:0; } /* footer */ -.footer { width:100%; padding:50px 0; background:#fafafa; } +.footer { width:100%; padding:50px 0; background:#fafafa; position:relative; } .footer_content { display:flex; justify-content:space-between; } .footer_left { width:calc(100% - 250px); } .footer_logo { display: flex; align-items: center; border-bottom:1px solid #ddd; margin-bottom:20px; padding-bottom:20px; } @@ -182,12 +182,15 @@ .footer_text strong { margin-bottom:5px; display: block; color:#333; } /* skip top */ -.skip_top { width:60px; height:60px; border-radius:100px; background:#0032c3; position:relative;float:right;border:none; transform: translateY(-80px); overflow:hidden;z-index:9; } -.skip_top::before { content:''; width:14px; height:2px; background:#fff; display:inline-block; position:absolute; top:-15px; left:50%; transform: translateX(-50%); pointer-events:none;} -.skip_top:hover::before { top:20px; transition:all 0.8s; } -.skip_top::after { content:''; width:14px; height:15px; background:url(/images/user/skip_top.svg) 50% 50% no-repeat; background-size:contain;position:absolute; display:inline-block; top:50%; left:50%; transform: translate(-50%, -50%); pointer-events: none; } -.skip_top:hover::after { animation:skip 1s both ease-in-out;} +.skip_top { width:50px; height:50px; border-radius:100px; background:#0032c3; position:relative;border:none; opacity:0; position:fixed; bottom:30px; right:30px; overflow:hidden;z-index:9; transform: translateY(50%); transition:all 0.3s; } +.skip_top::before, .skip_top::after { content:''; width:14px; height:15px; background:url(/images/user/skip_top.svg) 50% 50% no-repeat; background-size:contain;position:absolute; display:inline-block; left:50%; transform: translate(-50%, -50%); pointer-events: none; } +.skip_top::before { top:50%; } +.skip_top::after { top:150%; } .skip_top:hover { box-shadow: 0 0 30px 0 rgb(34 86 203 / 80%); border:1px solid #001d70; } +.skip_top:hover::before { top:-150%;transition:all 0.5s; } +.skip_top:hover::after { top:50%;transition:all 0.5s; } +.skip_top.float { position:fixed; transform: translateY(0%); opacity:1; } +.skip_top.fix { position:absolute; bottom:auto; top:-25px; } @keyframes skip { from { opacity:0; transform: translate(-50%, -50%); } 20% { opacity:0; transform: translate(-50%, 250%); } 50% { opacity:1; transform: translate(-50%, -50%); } to { transform: translate(-50%, -50%); } } Index: base3.10/src/main/webapp/WEB-INF/tiles/template/defaultFooter.jsp =================================================================== --- base3.10/src/main/webapp/WEB-INF/tiles/template/defaultFooter.jsp (revision 96) +++ base3.10/src/main/webapp/WEB-INF/tiles/template/defaultFooter.jsp (revision 97) @@ -50,6 +50,21 @@ </div> <!-- Modal end --> +<script> +var controller = new ScrollMagic.Controller(); +// skip top 설정 +var skip = new ScrollMagic.Scene({triggerElement: "body", triggerHook:'0'}) + .setClassToggle(".skip_top", "float") + .offset(200) + .addTo(controller) + //.addIndicators({name: "float"}); + +var skip = new ScrollMagic.Scene({triggerElement: ".footer", triggerHook:'1'}) + .setClassToggle(".skip_top", "fix") + .offset(50) + .addTo(controller) + //.addIndicators({name: "skip"}); +</script> <script src="<c:url value='/js/user/designJS.js'><c:param name="dt" value="${nowDate}"/></c:url>"></script> <script> // 사용자 권한가져오기