-
Notifications
You must be signed in to change notification settings - Fork 16
/
skrollr.javascript.txt
89 lines (81 loc) · 7.36 KB
/
skrollr.javascript.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
SKROLLR
skrollr.init([OBJ]) #Must be loaded after DOM init. Returns SKROLLR.
#HTML/CSS:
# - Scrollable content must be in container #skrollr-body (or OBJ.skrollrBody "ID")
# - position:fixed elements need to be outside #skrollr-body
# - adds .skrollr, .skrollr-desktop|mobile and remove .no-skrollr to #skrollr-body
# - adds .skrollable, .skrollable-before|between|after to children with data-NUM
#Version 0.6.29
data-NUM[-POSITION][-POS2]="..." #HTML attribute defining style="..." when:
# - NUM: scrolled NUM pixels from POSITION. NUM can be negative for interpolation purpose.
# - NUMp: same with %
# - POSITION can be:
# - start|end (def: "start"): top|bottom of page (document-wise)
# - POS[-POS2] (POS[2] is top|center|bottom): POS of page hits POS2 (def: same as POS)
# of element (or another element using data-anchor-target="SELECTOR")
#Transitions in-between (using CSS animations)
#"..." is "VAR:VAL":
# - if "@VAR:VAL" instead of "VAR:VAL", redefines HTML attribute @VAR instead of using CSS.
# - if "VAR:!VAL", does not interpolate. Useful when VAL contains numbers that should not
# be interpolated, e.g. numbers in a URL.
# - all VAL must have unit, and have unit for a given animation.
# - can animate COLOR, providing it uses rgb[a]() or hsl[a]()
#When using CSS transform: VAL, can use transform[EASE]: VAL, where EASE is CSS3 easing,
#e.g. bounce.
OBJ ==> #From the constructor:
# - constants.VAR STR|FUNC()->STR: use data-VAR as a macro -> data-STR
# - smoothScrolling BOOL (def: true): animations don't jump to new position, but
# transition to it (avoid usual flickering effect on parallaxes).
# Can disable|enable with HTML attribute data-smooth-scrolling="on|off"
# - smoothScrollingDuration NUM (def: 200)
# - scale NUM: multiply data-NUM, providing POSITION is start|end, and forceHeight true.
# - forceHeight BOOL (def: true): if container too short, enlarge it
# - mobileDeceleration (def: 0.04): change deceleration when releasing swipe on mobile.
# - edgeStrategy STR: what to do when going beyong start|end of animation:
# - "set" (def): do not move anymore
# - EASE_STR: same, but in-between use easing.
# EASE_STR can be:
# - OBJ.easing.EASE(NUM)->NUM2 (change current time percentage, can be below 0 or
# beyond 1)
# - "linear|quadratic|cubic|swing|sqrt|outCubic|bounce"
# - "start|end": no animation
# - "reset": remove any Skrollr effect/HTML
# - [before]render(OBJ2): OBJ2:
# - cur|last|maxTop NUM
# - direction "top|down"
# With "beforerender", returning false prevents rendering
# Can also use SKROLLR.on|off(...)
skrollr.get() #Returns SKROLLR
SKROLLR.destroy() #
SKROLLR.refresh
([ELEM|NODELIST|JQ[_ARR]]) #Must be called when DOM changed, including Skrollr HTML attributes.
SKROLLR.relativeToAbsolute
(ELEM, POS, POS2) #Returns NUM (px)
SKROLLR.get[Max]ScrollTop() #Current|max scrolling
SKROLLR.setScrollTop(NUM[,BOOL]) #Sets scrolling. If BOOL true, no animation.
SKROLLR.animateTo(NUM[,OBJ]) #Similar but with OBJ:
# - duration NUM (def: 1000)
# - easing EASE_STR (def: "linear")
# - done(BOOL): true if has been interrupted by stopAnimateTo()
SKROLLR.stopAnimateTo() #
SKROLLR.isAnimatingTo() #
SKROLLR.isMobile() #
SKROLLR MENU ==> #Makes it possible to use HTML anchors with Skrollr. Must be loaded after Skrollr.
#Version 1.0.1
skrollr.menu(SKROLLR[, OBJ]) #OBJ:
# - animate BOOL (def: true): use animateTo()
# - easing EASE_STR
# - duration NUM|FUNC(OLD_SCROLL_TOP, NEW_SCROLL_TOP)->NUM (def: 500)
# Can also use HTML attribute data-menu-duration="NUM" on element with "ID".
# - handleLink("ID")->NUM: manually returns offset according to anchor
# - complexLinks BOOL (def: false): works even if search string in URL
# - scale NUM: must use same scale NUM as SKROLLR
# - change("ID", NEW_SCROLL_TOP): when getting on a new "ID"
#Can also add HTML attributes:
# - data-menu-top="NUM[p]" to <a> to force specific scrolling.
# - data-menu-offset="NUM[p]": to element with "ID", so that it scrolls down "NUM[p]" after
# being hit (after putting top of element to top of viewport)
# - data-menu-ignore: ignore current element with "ID"
SKROLLR.menu.click(ELEM) #Programatic click