-
Notifications
You must be signed in to change notification settings - Fork 1
/
parallaxify.js
49 lines (30 loc) · 1.35 KB
/
parallaxify.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
// Licensed under MIT by Carson Burke @MarvinTMB
// Not exactly the most efficient parallax implementation, but it should work fine enough
// Use (css) classes parallaxify for <img /> tags, and parallaxifyBg for background images
window.addEventListener("load", parallax)
window.addEventListener("scroll", parallax)
function parallax() {
function getPosition(item) {
let top = (item.getBoundingClientRect().top / window.innerHeight * 100).toFixed(2)
return top
}
let itemsToParallax = document.getElementsByClassName("parallaxify")
for (let item of itemsToParallax) {
if (!item.dataset.speedMultiplier) {
item.dataset.speedMultiplier = "0.7"
}
item.style.transform = "translate3d(0, " + getPosition(item) * item.dataset.speedMultiplier + "px, 0)"
}
let imagesToParallax = document.getElementsByClassName("parallaxifyBg")
for (let item of imagesToParallax) {
function getPosition(item) {
let top = (item.getBoundingClientRect().top / window.innerHeight * 100).toFixed(2)
return top
}
if (!item.dataset.speedMultiplier) {
item.dataset.speedMultiplier = "3"
}
item.style.backgroundAttachment = "fixed"
item.style.backgroundPositionY = getPosition(item) * item.dataset.speedMultiplier + "px"
}
}