-
Notifications
You must be signed in to change notification settings - Fork 0
/
animate-words.js
44 lines (30 loc) · 1.05 KB
/
animate-words.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
import scaleAlpha from './scale-alpha.js'
export default function animateWords (el, opts={}) {
const options = JSON.parse(JSON.stringify(opts))
const spans = []
let accum = 0 // ms in the accumulator
const appendText = function (text) {
const words = text.trim().split(' ')
const pageBgColor = window.getComputedStyle(document.body, null).getPropertyValue('background-color')
for (let i=0; i < words.length; i++) {
let span = document.createElement('span')
span.innerText = words[i] + ' '
spans.push(span)
el.appendChild(span)
}
}
// @param int dt time elapsed in milliseconds
const step = function (dt) {
accum += dt
const amount = 1 - (accum / options.duration)
for (let i=0; i < spans.length; i++)
spans[i].style.backgroundColor = scaleAlpha(options.color, amount)
}
const _setup = function () {
const pageBgColor = window.getComputedStyle(document.body, null).getPropertyValue('background-color')
accum = 0
el.innerHTML = ''
}
_setup()
return { appendText, step }
}