-
Notifications
You must be signed in to change notification settings - Fork 0
/
parallax.js
51 lines (38 loc) · 1.45 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
import { dom, animate, article } from '/app/index.js';
import Plugin from '/app/src/plugin.js'
article.register('.parallax', class Parallax extends Plugin {
constructor(args) {
super(args);
console.log(this);
this.style = {y: 0};
this.bind({ offscreen: 'render', scroll: 'render', resize: 'render', });
}
render(rect = this.rect()) {
let pos = rect.top - this.style.y;
// let wHeight = window.innerHeight * .3;
// let wHeight = window.innerHeight * .3;
if (pos < 0) { // && pos > -wHeight) {
// console.log(this.el, pos, this.style.y);
// this.style.y = -pos;
// this.style.y = -pos * .3;
// let wHeight = window.innerHeight * .3;
// this.style.y = animate.cubicOut(0, wHeight, -1 * pos / window.innerHeight);
// console.log(this.index(), this.style.y);
// // moving up 15%
// // fading out
// opacity: cp.easing.easeInQuint(time, 1, -0.35, 1),
// // moving backward
let time = -1 * pos / window.innerHeight;
let slide = animate.circOut(0, window.innerHeight * .3);
this.style.y = slide(time);
let fade = animate.quintIn(1, 0.2);
//console.log(this.index(), pos, fade(time));
// this.css({opacity: fade(time)});
// cp.easing.easeOutCirc(time, 0, this.height * -0.1, 2),
// opacity: cp.easing.easeInQuint(time, 1, -0.35, 1),
}
this.setTransform(this.style);
// let y = this.rect()
// this.style.y
}
});