[jquery] 페이드인 페이드아웃 배너 플러그인

페이드인-아웃 되는 배너를 넣고 싶을때 jquery 소스를 일일이 짜지 말고 플레이그라운드에서 만든 플러그인을 이용하시면 편리해요.

위 영상과 같은 효과를 낼수 있어요. 반응형으로 만들어진 사이트에서도 이용이 가능해하고요. 이미지경로를 설정만으로 자동으로 동작하고, 이미지가 바뀌는 시점도 시간으로 컨트롤 할 수 있어요.

여기에서 플러그인을 다운로드 할 수 있으니 다운로드 하셔서 따라 해보세요.

플러그인 이름은 bgSlideBanner.js 에요.

아! css 스타일은 작성 원하시는대로 해도 상관 없어서 따로 작성 안해 놨으니 참고하세요.

[버전]

1.0 버전

최초 작성

[사용법]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="http://cdn.play-ground.kr/js/bgSlideBanner_1.0.js"></script>

<script>

$(function(){

$('#main').bgSlideBanner({

delay:5000,

img:{1:'img1.jpg',2:'img2.jpg'}

});

});

</script>

<section id="main" style="background:url('/img1.jpg') no-repeat center center; background-size: cover;">

<h1>The Association of American State Offices In Korea</h1>

</section>

1. 다운로드 받은 플러그인을 연결하세요.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="http://cdn.play-ground.kr/js/bgSlideBanner_1.0.js"></script>

<script>

$(function(){

$('#main').bgSlideBanner({

delay:5000,

img:{1:'img1.jpg',2:'img2.jpg'}

});

});

</script>

<section id="main" style="background:url('/img1.jpg') no-repeat center center; background-size: cover;">

<h1>The Association of American State Offices In Korea</h1>

</section>

2. 원하는 영역에 백그라운드 스타일을 주세요. 백그라운드를 변경하면서 페이드인-아웃이 동작하기 때문에 스타일은 위와 같이 필수에요. 엘리먼트 아이디는 마음대로 하셔도 되요.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="http://cdn.play-ground.kr/js/bgSlideBanner_1.0.js"></script>

<script>

$(function(){

$('#main').bgSlideBanner({

delay:5000,

img:{1:'img1.jpg',2:'img2.jpg'}

});

});

</script>

<section id="main" style="background:url('/img1.jpg') no-repeat center center; background-size: cover;">

<h1>The Association of American State Offices In Korea</h1>

</section>

3. 하얗게 표시된 부분 처럼 작성해주면 끝나요. 좀더 상세히 설며드리면 delay 옵션은 1000 = 1초 로 배너가 보이고 얼마 있다가 사라질지를 결정하게 되고요. img 옵션은 배너에 페이드인-아웃 시킬 이미지 경로들을 규칙에 맞게 차례로 작성해주면 되세요. 

4. 이제 정상적으로 동작하는지 확인해보세요. 참고로 엘리먼트 높이가 안 잡혀있어서 안 보이는수가 있으니 그럴땐 css 스타일을 확인해 보세요. 구글 개발자 도구 보시는법 알죠?