고정 헤더 영역
상세 컨텐츠
본문
[ skrollr | 스크롤 기반 애니메이션 > js ]
[ JavaScript ]
skrollr을 실행하려면
먼저 skrollr.min.js 파일을 문서의 맨 아래에 (닫는 '</body>' 바로 앞에) 넣고, skrollr.init ()를 호출하기를 바랍니다.
원한다면 <head></head>안에 넣을 수도 있지만 문서가 로드되면 'init()'을 호출해야합니다.
(예 : jQuery의 'ready' 이벤트 또는 'window.onload').
'init ()'에 가능한 skrollr 옵션은
### smoothScrolling=true/false
smoothScrolling은 애니메이션을 부드럽게합니다.
50 픽셀 아래로 스크롤하면 애니메이션이 새로운 위치로 점프하는 대신 전환됩니다.
설정은 'data-smooth-scrolling'을'on' 또는 'off'로 설정함으로써 요소마다 정의 할 수 있습니다.
### smoothScrollingDuration=200
스크롤 위치가 마지막으로 변경된 후 애니메이션이 실행되는 시간(초) 입니다.
### constants={}
정수를 값으로 포함하는 객체입니다. 키는`[a-z0-9_]`를 포함할 수 있습니다. 그들은 밑줄( _ )이 필요하지 않습니다.
예 :'data-_myconst-200' 과 'skrollr.init ({constants : {myconst : 300}})'는 'data-500'의 결과가 됩니다.
와
이 동일하다.
### forceHeight=true/false
forceHeight는 'true' 가 기본 설정값으로 되어있습니다.
'true' : 내 컨텐츠의 높이보다 더 길게 스크롤 한 후 애니메이션이 구현될 수 있도록 설정한다.
ex ) 예를들어 document 내에 컨텐츠 높이가 500px일때,
내가 1000px까지 스크롤한 후 애니메이션이 구현되길 바란다면
init(옵션) 안에 forceHeight:true를 넣은 후
<div data-1000="스타일:값"></div>를 넣는다면 1000px까지 스크롤 된 후 애니메이션이 그때 구현될 수 있도록 한다.
'false' : document를 조작하지 않고 자연스러운 스크롤바를 유지합니다.
### scale=1
애니메이션의 속도가 너무 빠르거나 느리면 스케일 값을 조정하십시오.
'스케일'은 absolute 모드의 키 프레임에만 영향을 미칩니다.
'forceHeight'가 false로 설정되면, 'scale' 값은 무시됩니다.
(그러니까 sacle=값을 사용하려면 forceHeight="true"로 설정이 되어있어야 한다.)
scale'은 constants에도 영향을 미친다.
### mobileCheck=function() {...}
모바일 디바이스에서 스크롤이 사용되어야 할 경우에 사용하는 함수입니다.
skrollr.init({
mobileCheck: function() {
return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
}
});
혹 모바일 디바이스에서 추가적으로 스크립트를 추가할 경우에는
skrollr.init({
mobileCheck: function(){
if((/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)){
// mobile device
}
}
});
이렇게 사용할 수 있다.
### mobileDeceleration=0.004
이 옵션은 skrollr에게 사용자가 모바일 디바이스에서 손가락을 뗀 후에 스크롤을 얼마나 빨리 또는 느리게 할지를 알려줍니다. (가속도 조절)
사용하지 않으려면 1로 설정하십시오.
### skrollrBody='skrollr-body'
### edgeStrategy='set'
### beforerender
### render
### keyframe
### easing
[ Public API ]
### refresh([elements])
### relativeToAbsolute(element, viewportAnchor, elementAnchor)
### getScrollTop()
### getMaxScrollTop()
### setScrollTop(top[, force = false])
### isMobile()
### animateTo(top[, options])
#### duration
#### easing
#### done
### stopAnimateTo()
### isAnimatingTo()
### on(name, fn)
### off(name)
### destroy()
'jquery test' 카테고리의 다른 글
| [ skrollr | 스크롤 기반 애니메이션 ] (0) | 2018.01.17 |
|---|---|
| [ skrollr | 스크롤 기반 애니메이션 | html ] (0) | 2018.01.17 |
| [ skrollr | 스크롤 기반 애니메이션 > 모바일디바이스 이슈 ] (0) | 2018.01.17 |
| eq().each() - type02 (0) | 2018.01.09 |
| .eq().each() - type01 (0) | 2018.01.09 |
댓글 영역