[jquery] trage animatie veel statestieken.
Ik gebruik http://www.chartjs.org/ voor het maken van mijn statestieken, echter kunnen dit er soms redelijk wat woren op 1 pagina. Nu is mijn vraag hoe ik er voor kan zorgen dat dit niet heel de pc trager maakt (alles tergelijk laden geeft problemen).
Ik zat te denken om ieder <script></script> blok na elkaar te laten starten maar ik zou niet weten hoe ik dit moet doen.
Kunnen jullie me op weg helpen of weten jullie een betere manier?
Mvg. Knipper
google eens op 'animate if in viewport'
Ik heb dit gevonden.
http://jsfiddle.net/moagrius/wN7ah/
Code (php)
1
2
3
2
3
$(document).on( 'scroll', 'body', function(){
console.log('Event Fired');
});
console.log('Event Fired');
});
en dan een each uitvoeren?
Code (php)
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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scroll demo</title>
<style>
p {
margin-bottom:100px;
}
span {
color: red;
display: none;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>Try scroll</div>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<script>
/*
In de HTML hierboven zien we acht paragrafen die ieder even dienst doen als een grafiek. de span binnen de paragraaf wordt met css verborgen gehouden.
De functie hieronder kijkt voor iedere paragraaf afzonderlijk of deze zichtbaar is in de viewport door de functie isOnScreen aan te roepen.
Als de functie TRUE teruggeeft dan wordt de span langzaam zichtbaar gemaakt. Dit moet de annimatie voor de grafiek voorstellen.
*/
function animateInsideViewport() {
$("p").each(function( i ) {
if($(this).isOnScreen())
$(this).find("span").show(10000);
})
}
// deze functie wordt automatisch aangeroepen als de pagina geladen is
$( document ).ready(function() {
animateInsideViewport();
});
// deze functie wordt telkens aangeroepen als er gescrolld wordt
$( window ).scroll(function() {
animateInsideViewport();
});
// functie die kijkt of een html element zichtbaar is in de viewport
$.fn.isOnScreen = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scroll demo</title>
<style>
p {
margin-bottom:100px;
}
span {
color: red;
display: none;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>Try scroll</div>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<script>
/*
In de HTML hierboven zien we acht paragrafen die ieder even dienst doen als een grafiek. de span binnen de paragraaf wordt met css verborgen gehouden.
De functie hieronder kijkt voor iedere paragraaf afzonderlijk of deze zichtbaar is in de viewport door de functie isOnScreen aan te roepen.
Als de functie TRUE teruggeeft dan wordt de span langzaam zichtbaar gemaakt. Dit moet de annimatie voor de grafiek voorstellen.
*/
function animateInsideViewport() {
$("p").each(function( i ) {
if($(this).isOnScreen())
$(this).find("span").show(10000);
})
}
// deze functie wordt automatisch aangeroepen als de pagina geladen is
$( document ).ready(function() {
animateInsideViewport();
});
// deze functie wordt telkens aangeroepen als er gescrolld wordt
$( window ).scroll(function() {
animateInsideViewport();
});
// functie die kijkt of een html element zichtbaar is in de viewport
$.fn.isOnScreen = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Hartelijk bedankt dat je tijd stak in het maken van het voorbeeld, het is heel handig.
Is het ook mogelijk om in de plaats van een each() op "script" te doen in plaats van "p" of een "script" een class te geven, en deze script tags uit te triggeren door het script?
HTML elementen: p, div, lu, li, span en zo verder
eigenlijk gelden de normale css regels.
Het vormt een soort while() lus die alle elementen één voor één behandelt. er wordt in mijn voorbeeld dus voor elke <p></p> element bekeken of deze zichtbaar is in het venster en zo ja dan wordt de animatie gestart.
Toevoeging op 04/05/2014 00:37:59:
Je kan gewoon de code in de each loop zetten die je wilt:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<p>Grafiek A</p>
<p>Grafiek B</p>
<script>
$("p").each(function( i ) {
// doe wat je wilt en vergeet niet dat $(this) naar het element wijst dat we nu behandelen. kijk maar:
alert($(this).html());
})
</script>
<p>Grafiek B</p>
<script>
$("p").each(function( i ) {
// doe wat je wilt en vergeet niet dat $(this) naar het element wijst dat we nu behandelen. kijk maar:
alert($(this).html());
})
</script>
Gewijzigd op 04/05/2014 00:30:11 door Frank Nietbelangrijk
en kan je dan in een pagina een aantal van deze script tags zetten met daar een code in zonder dat deze word uitgevoerd aan het begin van de pagina maar pas wanneer de each() deze triggert?
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
function doeiets(deze)
{
alert(deze.html());
}
<script>
$("p").each(function( i ) {
doeiets($(this));
})
</script>
{
alert(deze.html());
}
<script>
$("p").each(function( i ) {
doeiets($(this));
})
</script>
zoiets?
Code (php)
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
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
<p id="grafiek A">Grafiek - <span>Geanimeerd!</span></p>
<p id="grafiek B">Grafiek - <span>Geanimeerd!</span></p>
function doeiets1(deze)
{
alert(deze.html());
}
function doeiets2(deze)
{
alert(deze.html());
}
<script>
$("p").each(function( i ) {
switch($(this).attr("id"))
{
case 'grafiek A':
doeiets1($(this));
break;
case 'grafiek B':
doeiets2($(this));
break;
default:
break;
}})
</script>
<p id="grafiek B">Grafiek - <span>Geanimeerd!</span></p>
function doeiets1(deze)
{
alert(deze.html());
}
function doeiets2(deze)
{
alert(deze.html());
}
<script>
$("p").each(function( i ) {
switch($(this).attr("id"))
{
case 'grafiek A':
doeiets1($(this));
break;
case 'grafiek B':
doeiets2($(this));
break;
default:
break;
}})
</script>