-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
parallax.js
86 lines (70 loc) · 2.12 KB
/
parallax.js
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
import { css, isVisible, parent, query, scrollParent, scrolledOver, toPx } from 'uikit-util';
import { resize, scroll, viewport } from '../api/observables';
import Parallax, { ease } from '../mixin/parallax';
export default {
mixins: [Parallax],
props: {
target: String,
viewport: Number, // Deprecated
easing: Number,
start: String,
end: String,
},
data: {
target: false,
viewport: 1,
easing: 1,
start: 0,
end: 0,
},
computed: {
target: ({ target }, $el) => getOffsetElement((target && query(target, $el)) || $el),
start({ start }) {
return toPx(start, 'height', this.target, true);
},
end({ end, viewport }) {
return toPx(
end || ((viewport = (1 - viewport) * 100) && `${viewport}vh+${viewport}%`),
'height',
this.target,
true,
);
},
},
observe: [
viewport(),
scroll({ target: ({ target }) => target }),
resize({ target: ({ $el, target }) => [$el, target, scrollParent(target, true)] }),
],
update: {
read({ percent }, types) {
if (!types.has('scroll')) {
percent = false;
}
if (!isVisible(this.$el)) {
return false;
}
if (!this.matchMedia) {
return;
}
const prev = percent;
percent = ease(scrolledOver(this.target, this.start, this.end), this.easing);
return {
percent,
style: prev === percent ? false : this.getCss(percent),
};
},
write({ style }) {
if (!this.matchMedia) {
this.reset();
return;
}
style && css(this.$el, style);
},
events: ['scroll', 'resize'],
},
};
// SVG elements do not inherit from HTMLElement
function getOffsetElement(el) {
return el ? ('offsetTop' in el ? el : getOffsetElement(parent(el))) : document.documentElement;
}