-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathflowup.js
executable file
·73 lines (63 loc) · 2.68 KB
/
flowup.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
/*
* FlowUp
*
* Based on Eric Wenn's PullupScroll https://github.com/ericwenn/pullupscroll)
* Changes include:
* - custom namespace for functions
* - Not dependent on "$" jquery namespace
* - Works better on items stacked on top of each other in chrome (does not flicker)
* - Added some custom options including durations and y-displacement
* - Added ability to control plugin via external CSS instead appending <head>
*
*/
var dgPull = dgPull || {};
(function($) {$(document).ready(function() {
$(window).scroll(dgPull.scrollFn);
});
})(jQuery);
(function ( $ ) {
$.fn.flowUp = function(e,options) {
var settings = $.extend({
// Default
translateY: 150,
duration: .8,
externalCSS: false
}, options);
$(e).addClass('pullup-element');
$(e).each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("already-visible");
}
else {
el.addClass('opaque');
}
});
// If external CSS is not used, add CSS to head
if(!settings.externalCSS)
{
$("head").append('<style>.come-in{opacity: 1; -ie-transform:translateY('+settings.translateY+'px);-webkit-transform:translateY('+settings.translateY+'px);transform:translateY('+settings.translateY+'px);-webkit-animation:come-in '+settings.duration+'s ease forwards;animation:come-in '+settings.duration+'s ease forwards}.come-in:nth-child(odd){-webkit-animation-duration:'+settings.duration+'s;animation-duration:'+settings.duration+'s}.already-visible{opacity: 1;-ie-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation:none;animation:none}@-webkit-keyframes come-in{to{-ie-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes come-in{to{-ie-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}} .opaque { opacity: 0; }</style>');
}
return this;
};
// TO DO: Take out of jQuery Namespace
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
}( jQuery ));
dgPull.scrollFn = function() {
jQuery(".pullup-element").each(function(i, el) {
var el = jQuery(el);
if (el.visible(true)) {
el.addClass("come-in");
el.removeClass("opaque");
}});
}