(One intermediate revision by the same user not shown) | |||
Line 1: | Line 1: | ||
− | |||
var $html_body = $('html,body'); | var $html_body = $('html,body'); | ||
var have_showed = false; | var have_showed = false; | ||
var nav_top = document.getElementById("nav-top"); | var nav_top = document.getElementById("nav-top"); | ||
− | var | + | var animation_lists = document.querySelectorAll("div.animation"); |
− | var | + | var length = animation_lists.length; |
− | var | + | var ticking = false; |
− | var | + | var scrollPosition = 0; |
− | var | + | var hasShown = new Array(length); |
− | var | + | var windowHeight = window.innerHeight; |
− | + | var V = (window.jQuery) ? ($.Velocity) : (Velocity); | |
− | + | for (var i = 0; i < length; i++) { | |
+ | hasShown[i] = false; | ||
+ | } | ||
$(document).foundation(); | $(document).foundation(); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
nav_top.onclick = function(e) { | nav_top.onclick = function(e) { | ||
Line 29: | Line 21: | ||
}, 500); | }, 500); | ||
}; | }; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | ||
− | if ( | + | window.addEventListener('scroll', function(e) { |
− | + | scrollPosition = window.pageYOffset; | |
− | + | if (!ticking) { | |
− | + | window.requestAnimationFrame(function() { | |
− | + | for (var i = 0; i < length; i++) { | |
− | + | if ((!hasShown[i]) && (scrollPosition > (animation_lists[i].offsetTop - windowHeight * 0.25))) { | |
− | + | var child = animation_lists[i].children; | |
− | + | V(child[0], 'transition.expandIn', { visibility: 'visible', dalay: 1000 }); | |
+ | V(child[1], 'transition.expandIn', { visibility: 'visible', dalay: 2000 }); | ||
+ | hasShown[i] = true; | ||
+ | } | ||
+ | } | ||
+ | ticking = false; | ||
+ | }); | ||
} | } | ||
+ | ticking = true; | ||
}) | }) | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |
Latest revision as of 19:42, 19 October 2016
var $html_body = $('html,body'); var have_showed = false; var nav_top = document.getElementById("nav-top"); var animation_lists = document.querySelectorAll("div.animation"); var length = animation_lists.length; var ticking = false; var scrollPosition = 0; var hasShown = new Array(length); var windowHeight = window.innerHeight; var V = (window.jQuery) ? ($.Velocity) : (Velocity); for (var i = 0; i < length; i++) {
hasShown[i] = false;
}
$(document).foundation();
nav_top.onclick = function(e) {
e.preventDefault(); $html_body.stop(true).animate({ scrollTop: 0 }, 500);
};
window.addEventListener('scroll', function(e) {
scrollPosition = window.pageYOffset; if (!ticking) { window.requestAnimationFrame(function() { for (var i = 0; i < length; i++) { if ((!hasShown[i]) && (scrollPosition > (animation_lists[i].offsetTop - windowHeight * 0.25))) { var child = animation_lists[i].children; V(child[0], 'transition.expandIn', { visibility: 'visible', dalay: 1000 }); V(child[1], 'transition.expandIn', { visibility: 'visible', dalay: 2000 }); hasShown[i] = true; } } ticking = false; }); } ticking = true;
})