스크롤시 fadeIn 하기 (jquery.fadein.js)
요즘 스크롤 했을 때 fadeIn 해서 나오는 방식이 유행인 것 같더라구요.
새로 사이트를 개편하면서 넣고 싶어서 관련 라이브러리를 찾아봤는데,
검색 능력이 안 좋은 건지 못 찾겠어서 직접 만들었습니다.
사용법
1. jquery.fade-in.js, jquery.fade-in.min.js 중 아무거나 넣습니다.
[code]<script src="jquery.fade-in.js"></script>[/code]
[code]<script src="jquery.fade-in.min.js"></script>[/code]
2. 스크롤시 fadeIn 하기를 원하는 요소 class에 fade-in 을 넣습니다.
[code]<div class="col-md-6 fade-in">fade-in을 원하는 div</div>[/code]
3. (선택) fadeIn 속도를 지정합니다. (이 과정을 생략한 경우 기본 500ms로 작동합니다.)
속도는 data-fade-in-speed 어트리뷰트를 통해 지정합니다.
[code]<div class="col-md-6 fade-in" data-fade-in-speed="800">fade-in을 원하는 div</div>[/code]
궁금한 사항 댓글로 남겨주세요.
댓글 12개
나연가온아빠
7년 전
좋은정보 감사합니다.
7년 전
유용한 기능이네요^^ 작업중인 사이트에 바로 적용해봤습니다. 감사합니다.
7년 전
유익한 정보 감사합니다.
7년 전
정말감사합니다.
7년 전
좋은 정보 감사합니다
7년 전
감사합니다
7년 전
감사합니다
7년 전
좋은 정보 감사합니다.
7년 전
감사합니다
야호123
6년 전
감사합니다
gimgim463
5년 전
감사합니다
2년 전
감사합니다!! ^-^
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2665 |
선택과집중
|
3개월 전 | 559 | |
| 2664 |
 GREENnBLUE |
3개월 전 | 609 | |
| 2663 |
GREENnBLUE |
3개월 전 | 565 | |
| 2662 |
선택과집중
|
3개월 전 | 495 | |
| 2661 | 3개월 전 | 579 | ||
| 2660 |
Modify
|
3개월 전 | 644 | |
| 2659 |
선택과집중
|
3개월 전 | 404 | |
| 2658 | 3개월 전 | 443 | ||
| 2657 |
 레이딩솔루션 |
4개월 전 | 955 | |
| 2656 |
선택과집중
|
4개월 전 | 537 | |
| 2655 | 4개월 전 | 394 | ||
| 2654 |
선택과집중
|
4개월 전 | 575 | |
| 2653 | 4개월 전 | 387 | ||
| 2652 | 4개월 전 | 437 | ||
| 2651 |
선택과집중
|
4개월 전 | 316 | |
| 2650 |
선택과집중
|
4개월 전 | 414 | |
| 2649 | 4개월 전 | 434 | ||
| 2648 |
welcome
|
4개월 전 | 537 | |
| 2647 |
디지털홍익인간
|
4개월 전 | 446 | |
| 2646 | 4개월 전 | 456 | ||
| 2645 |
선택과집중
|
4개월 전 | 501 | |
| 2644 | 4개월 전 | 448 | ||
| 2643 | 4개월 전 | 364 | ||
| 2642 | 4개월 전 | 348 | ||
| 2641 | 4개월 전 | 385 | ||
| 2640 | 4개월 전 | 1349 | ||
| 2639 |
 마르스컴퍼니 |
5개월 전 | 500 | |
| 2638 |
세르반데스
|
5개월 전 | 390 | |
| 2637 |
선택과집중
|
5개월 전 | 557 | |
| 2636 |
선택과집중
|
5개월 전 | 672 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기