스크롤시 fadeIn 하기 (jquery.fadein.js) > 그누보드5 팁자료실

그누보드5 팁자료실

스크롤시 fadeIn 하기 (jquery.fadein.js) 정보

스크롤시 fadeIn 하기 (jquery.fadein.js)

첨부파일

첨부파일 jquery.fade-in.js (1.1K) 37회 다운로드 2018-02-08 22:24:53
첨부파일 jquery.fade-in.min.js (929byte) 14회 다운로드 2018-02-08 22:24:53

본문

요즘 스크롤 했을 때 fadeIn 해서 나오는 방식이 유행인 것 같더라구요.

새로 사이트를 개편하면서 넣고 싶어서 관련 라이브러리를 찾아봤는데,

검색 능력이 안 좋은 건지 못 찾겠어서 직접 만들었습니다.

 

사용법

 

1. jquery.fade-in.js, jquery.fade-in.min.js 중 아무거나 넣습니다.

<script src="jquery.fade-in.js"></script>
<script src="jquery.fade-in.min.js"></script>

 

2. 스크롤시 fadeIn 하기를 원하는 요소 class에 fade-in 을 넣습니다.

<div class="col-md-6 fade-in">fade-in을 원하는 div</div>

 

3. (선택) fadeIn 속도를 지정합니다. (이 과정을 생략한 경우 기본 500ms로 작동합니다.)

속도는 data-fade-in-speed 어트리뷰트를 통해 지정합니다.

<div class="col-md-6 fade-in" data-fade-in-speed="800">fade-in을 원하는 div</div>

 

궁금한 사항 댓글로 남겨주세요.

추천6

댓글 전체

전체 1,188 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

진행중 포인트경매

  1. 유니티3D UI 에센셜 두가지 책을 경매 합니다.

    참여32 회 시작18.08.17 05:58 종료18.08.22 05:58

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT