참고 블로그
배너 : http://two-leaves.tistory.com/entry/간단한-슬라이드-배너만들기
메뉴바 : http://webdir.tistory.com/481
위는 완성한 결과물이다! 😆
배너는 일정 시간마다 자동으로 넘어 가게끔 슬라이드 효과를 나태냈고
상단 맨위 두번째 메뉴부분을 스크롤을 인식해서 일정 부분을 위로 스크롤시 나타나고
아래로 스크롤시 사라지게 나타냈다.
html과 css는 가볍게 훑어본 뒤 jQuery부분을 중점으로 다루겠다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <body> <!-- start --> <div id="wrap"> <!-- 고정바 --> <header id="tb"> <!-- 로고 --> <div id="logo"> <div> </div> <div> Music Player </div> </div> <!-- 검색바 --> <div id="search"> <input type="text" placeholder="Search..."></input> <div></div> </div> </header> <!-- 메뉴바 --> <header id="mb"> <div> Music Award <span></span> </div> <div> Album <span></span> </div> <div> Music <span></span> </div> </header> <!-- 광고 배너 --> <div id="banner"> <li> <img src="./icon/banner01.png" alt="" /> </li> <li> <img src="./icon/banner02.png" alt="" /> </li> <li> <img src="./icon/banner03.png" alt="" /> </li> </div> <div id="text"></div> </div> </body> | cs |
html 부분은 다음과 같고 css 부분에서는 알아야 할 것이
단지 고정바와 메뉴바가 position: fixed로 되어 있어야한다.
다음으로 대망의 자바 스크립트 😱
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | // 스크롤 체크 변수 var didScroll = false; var lastScrollTop = 0; var delta = 5; // 동작 구현 위치 var navbarHeight = $('#mb').outerHeight(); // 영향을 받을 요소를 선택 $(window).scroll(function(){ // 스크롤시 호출 didScroll = true; }) setInterval(function(){ // 스크롤 상태 체크 & 메뉴바 상태 변경 if( didScroll ) { // TODO 스크롤 중이라면 hasScrolled(); didScroll = false; } }, 250); // 슬라이드 배너 $(function() { $('#banner').ulslide({ height: 400, //슬라이드배너 세로사이즈 affect: 'slide', //'fade'로 변경시 이미지가 투명하게 사라지면서 다음이미지가 보여짐 axis: 'x', //슬라이드 방향 x=가로, y=세로 duration: 1000, autoslide: 4000 }); }); // 메뉴바 숨기기 & 나타내기 function hasScrolled(){ var st = $(this).scrollTop(); // 현재 스크롤 위치 if (Math.abs(lastScrollTop - st) <= delta) return; // delta 만큼 움직였는지 감지 if( st > lastScrollTop && st > navbarHeight ) { // Scroll Down $("#mb").css({ top: 0 }); } else { // Scroll Up if(st + $(window).height() < $(document).height()) { $("#mb").css({ top: 50 }); } } lastScrollTop = st; } | cs |
우선 슬라이드 배너 부분부터 알아보자 XD
보통 나와있는 방법이 top과 left를 조절하여 넘기는 방법이었는데
나는 ulslide라는 플러그인을 사용해서 간편하게 만들어봤다.
( 만들어져있는 스크립트는 무척 복잡하지만 ㅎㅎ.. )
첫번째로는 ulslide 자바스크립트를 다운해서 같은 폴더안에 넣어준뒤 html 해더 부분에 추가 해주어야한다!
자바스크립트는 참고사이트에서 받을 수 있다.
<script type="text/javascript" src="./jquery.ulslide.js"></script>
그리고 25줄 - 33줄을 보면 배너 함수가 있다.
나는 사용하지 않았는데 버튼을 누르면 해당 배너를 볼수 있는 ( 흔히 동그라미로 표시해 놓는 ? ) 친구를
만들고 싶다면 html에 뼈대를 만들고 속성으로 아래와 같이 사용하면된다.
navigator: 해당 태그
.
.
.
다음은 스크롤를 감지해서 메뉴를 나타내고 숨기는 코드 중 핵심 코드다.
참고 사이트에 워낙 설명이 잘 되어 있어서 자세한 설명은 생략하겠다 ..😐
다만 하면서 transition부분에 문제가 있었다. ( 나타나고 사라질때 애니메이션 적용이 안됐었음 )
1시간 정도 만지작 거리다가 아래와 같이 자바스크립트로 변경해주면 됐다.
참고 사이트에는 클래스를 추가해주는 방법이었는데 top부분을 변경해주었음에도 불구하고
다른 클래스라 transition이 변경 사항을 인식 못하는듯했다...( 물론 내가 잘못 했을 수도 :_I )
// 메뉴바 숨기기 & 나타내기function hasScrolled(){var st = $(this).scrollTop(); // 현재 스크롤 위치if (Math.abs(lastScrollTop - st) <= delta) return; // delta 만큼 움직였는지 감지if( st > lastScrollTop && st > navbarHeight ){// Scroll Down$("#mb").css({top: 0});}else{// Scroll Upif(st + $(window).height() < $(document).height()){$("#mb").css({top: 50});}}lastScrollTop = st;}
'~ 2024.08' 카테고리의 다른 글
| 반응형 웹의 짝꿍 플렉서블 박스(Flexible Box)에 대해 알아보자 (0) | 2018.08.29 |
|---|---|
| [ jQuery ] 슬라이드 배너 만들기 2편 (0) | 2018.08.28 |
| Input 태그 애니메이션 분석 편 (1) | 2018.07.16 |
| jQuery mouseover vs. mousenter 차이점에 대해 알아보기 😏 (2) | 2018.07.13 |
| jQuery 이벤트에 대해 알아보기 😉 (0) | 2018.07.11 |