Ik heb een script die een typewriter nadoet, alleen deze wil ik maar 1x uitvoeren.
Nu ben ik een leek op javascript gebied, dus kom er bijna niet uit.
Wie o wie kan mij helpen of in ieder geval uitleg geven om mij op het goede pad te zetten.
Gaat overigens om dit script:
http://codepen.io/hi-im-si/pen/DHoup
Nu ben ik een leek op javascript gebied, dus kom er bijna niet uit.
Wie o wie kan mij helpen of in ieder geval uitleg geven om mij op het goede pad te zetten.
Gaat overigens om dit script:
http://codepen.io/hi-im-si/pen/DHoup
JavaScript:
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
| var TxtType = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 200; this.txt = ''; this.tick(); this.isDeleting = false; }; TxtType.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; var that = this; var delta = 200 - Math.random() * 100; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta); }; window.onload = function() { var elements = document.getElementsByClassName('typewrite'); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-type'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtType(elements[i], JSON.parse(toRotate), period); } } // INJECT CSS var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".typewrite > .wrap { border-right: 2px solid #000000}"; document.body.appendChild(css); }; |
[ Voor 0% gewijzigd door .oisyn op 18-06-2016 20:51 ]