스크롤시 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 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2635 | 5개월 전 | 598 | ||
| 2634 | 5개월 전 | 589 | ||
| 2633 |
 bank365 |
6개월 전 | 500 | |
| 2632 | 6개월 전 | 558 | ||
| 2631 |
세르반데스
|
6개월 전 | 529 | |
| 2630 | 6개월 전 | 715 | ||
| 2629 | 6개월 전 | 401 | ||
| 2628 | 6개월 전 | 406 | ||
| 2627 |
이슈DEV
|
6개월 전 | 628 | |
| 2626 |
welcome
|
6개월 전 | 636 | |
| 2625 |
이슈DEV
|
6개월 전 | 441 | |
| 2624 | 6개월 전 | 399 | ||
| 2623 | 6개월 전 | 487 | ||
| 2622 | 6개월 전 | 340 | ||
| 2621 |
 cdisk1 |
6개월 전 | 354 | |
| 2620 | 6개월 전 | 462 | ||
| 2619 | 6개월 전 | 457 | ||
| 2618 | 6개월 전 | 546 | ||
| 2617 | 6개월 전 | 668 | ||
| 2616 | 7개월 전 | 572 | ||
| 2615 | 7개월 전 | 400 | ||
| 2614 |
바닐라코드
|
7개월 전 | 721 | |
| 2613 | 7개월 전 | 586 | ||
| 2612 | 7개월 전 | 720 | ||
| 2611 | 7개월 전 | 953 | ||
| 2610 | 7개월 전 | 499 | ||
| 2609 | 7개월 전 | 644 | ||
| 2608 | 7개월 전 | 621 | ||
| 2607 | 7개월 전 | 567 | ||
| 2606 | 7개월 전 | 591 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기