첨부파일 https://eond.com/jquery/398991

Github

https://github.com/Q42/delighters


Demo

http://www.bestjquery.com/?zEyuV1UF


Delighters

Add CSS animations to delight users as they scroll down. A tiny javascript library by Q42. It was written by Martin Kool.

See the demo here


Usage

  1. Include the script.
<script type="text/javascript" src="delighters.js">
  1. Add delighter attributes
<div class="foo" data-delighter>
  1. Style the delighter (or its children) using built-in classes .started and .ended

When the library loads, each [data-delighter] gets the .delighter class.

.foo.delighter {  transition: all .3s ease-out;  transform: translateX(-100%);  opacity: 0; }

The .started class is set when the top of [data-delighter] element is at 0.75 of the viewport (where 0 is top and 1 is bottom).

.foo.delighter.started {  transform: none;  opacity: 1; }

An extra .ended class is set when the bottom of [data-delighter] element is at 0.75 of the viewport (where 0 is top and 1 is bottom).

.foo.delighter.started.ended {  border: solid red 10px; }

How it works

  • Delighters.js toggles classes when you scroll down. You do the rest!
  • Each delighter gets a .started class when its top raises above 75% of the browser's viewport height
  • When the bottom of the delighter is at 75%, an extra class .ended is added
  • You can change any of these like so: data-delighter="start:0.5;end:0.95;
  • Remember: 0 = top, 1 = bottom
  • Values outside the viewport are allowed, such as start:1.2;end:-0.3

Debugging

  • Set the data-delighter="debug" flag to enable debugging for that delighter
  • This will give the delighter a red outline
  • Also, a dotted red hint line is shown when the delighter is within the viewport
  • The hint line is positioned at the defined start, which by default is 0.75
  • The line is removed when the bottom of the delighter is above the end position, by default also 0.75

Customizing

By default, delighters.js intializes automatically when the DOM is ready, and with the following configuration:

  options = {    attribute:  'data-delighter',    classNames: ['delighter', 'started', 'ended'],    start:      0.75, // default start threshold    end:        0.75, // default end threshold    autoInit:   true  // initialize when DOMContentLoaded  }

You can customize any or all of the above properties using:

  Delighters.config({        // set the default start threshold at the bottom    start: 1,    // let's call Delighters.init() manually later    autoInit: false     // ... etc ...  })



코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 2 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
121 [슬라이더 플러그인] slick slider 사용방법 2018/08/15 0
120 [기초활용] [jQuery] each, loop, setInterval 활용 파일 2018/05/28 0
119 [팁] 자바스크립트 키코드, 키 이벤트 2018/05/27 0
118 [기초활용] 모달창 만들기 2017/12/21 0
117 [기초활용] Modal (모달창) 2018/05/27 0
116 [팁] [jQuery] 페이징 만들기 2015/08/31 0
115 [슬라이더 플러그인] 병풍 스크립트 2018/04/19 0
114 [슬라이더 플러그인] carousel slider 2018/04/17 0
현재글 [화면전환 스크롤] Delighters : CSS Animations on Page Scroll 2018/04/13 0
112 [기초활용] Add smooth scrolling to page anchors 2018/04/13 0
111 [기타 플러그인] macy.js (masonry 벽돌 레이아웃) 파일 2018/01/15 0
110 [슬라이더 플러그인] Camera Slider jquery 2015/11/15 0
109 [기초활용] jquery popup layer 2017/12/21 0
108 [기초활용] jquery 가나다 정렬 2017/12/20 0
107 [기초활용] [jquery] 폰트 사이즈 조절 버튼 페이지 이동시에 변수 초기화 문제 2017/12/20 0
106 [기초활용] 스크롤 내려오면 멈추는 스크립트 2017/11/16 0
105 $.browser.msie undefined 오류 2017/08/23 0
104 [화면전환 스크롤] 패럴렉스 스크롤링 플러그인 2017/03/31 0
103 [기초활용] 비밀글 jQuery style 찾기 2017/03/31 0

해시태그 디렉터리