-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery.cntl.js
76 lines (50 loc) · 2.14 KB
/
jquery.cntl.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
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
(function($) {
$.fn.cntl = function( options ) {
/* default settings */
var settings = $.extend({
revealbefore : 200, /* this is the amount of "scroll padding" to allow (the more, the later the state will be revealed) */
anim_class : 'cntl-animate', /* the anim class, this class should have animation rules in css */
onreveal : null /* a callback once the state has been revealed */
}, options);
return this.each( function() {
var statelist = $(this).find('.cntl-state');
var bar_fill = $(this).find('.cntl-bar-fill');
var states = [];
var tbf = 0;
function setupElements( )
{
for (var i = 0; i < statelist.length; i++) {
states[i] = {};
states[i]['top'] = $(statelist[i]).offset().top + settings.revealbefore;
states[i]['elm'] = $(statelist[i]);
};
revealElements();
}
function revealElements( )
{
var windowtop = $(window).scrollTop();
var windowbtm = windowtop + $(window).height();
for( var i = 0; i < states.length; i++) {
if( states[i].top > windowtop && states[i].top < windowbtm )
{
if (
!states[i].elm.hasClass( settings.anim_class ) &&
$.isFunction( settings.onreveal ) )
{
settings.onreveal.call( this, states[i].elm );
}
states[i].elm.addClass( settings.anim_class );
var h = states[i].elm.position().top;
if( h > tbf )
{
tbf = h;
}
bar_fill.height( tbf );
}
};
}
$(window).on('scroll',revealElements);
$(window).on('load',setupElements)
});
}
}(jQuery));