Difference between revisions of "Template:USTC-Software/js/mainpage"

 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
var $nav_sidebar_content = $("#nav-sidebar-content");
 
 
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 nav_top_a = document.querySelector("#nav-top a");
+
var animation_lists = document.querySelectorAll("div.animation");
−
var nav_link1 = document.getElementById("nav-link1");
+
var length = animation_lists.length;
−
var nav_link2 = document.getElementById("nav-link2");
+
var ticking = false;
−
var nav_link3 = document.getElementById("nav-link3");
+
var scrollPosition = 0;
−
var nav_link4 = document.getElementById("nav-link4");
+
var hasShown = new Array(length);
−
var nav_link5 = document.getElementById("nav-link5");
+
var windowHeight = window.innerHeight;
−
 
+
var V = (window.jQuery) ? ($.Velocity) : (Velocity);
−
 
+
for (var i = 0; i < length; i++) {
 +
    hasShown[i] = false;
 +
}
  
 
$(document).foundation();
 
$(document).foundation();
−
 
−
//var controller = new ScrollMagic.Controller();
 
−
/*
 
−
var tween1 = new TweenMax.from("#animation1", 0.7, { delay: 0.25, scale: 0.8, xPercent: -5, opacity: 0, ease: Power2.easeOut });
 
−
var tween2 = new TweenMax.from("#text1", 0.7, { scale: 0.7, opacity: 0, xPercent: -5, ease: Power2.easeOut });
 
−
var tween3 = new TweenMax.from("#animation2", 0.7, { delay: 0.25, xPercent: -20, opacity: 0, ease: Power2.easeOut });
 
−
var tween4 = new TweenMax.from("#text2", 0.7, { scale: 0.7, opacity: 0, ease: Power2.easeOut });
 
−
*/
 
−
 
  
 
nav_top.onclick = function(e) {
 
nav_top.onclick = function(e) {
Line 29: Line 21:
 
     }, 500);
 
     }, 500);
 
};
 
};
−
/*
 
−
nav_top_a.onclick = function(e) {
 
−
    e.preventDefault();
 
−
    TweenMax.to(window, .5, { scrollTo: { y: 0 } });
 
−
};
 
−
*/
 
−
/*
 
−
nav_link1.onclick = function(e) {
 
−
    e.preventDefault();
 
−
    TweenMax.to(window, .5, { scrollTo: { y: "#link1", offsetY: 30 } });
 
−
};
 
−
nav_link2.onclick = function(e) {
 
−
    e.preventDefault();
 
−
    TweenMax.to(window, .5, { scrollTo: { y: "#link2", offsetY: 30 } });
 
−
};
 
−
nav_link3.onclick = function(e) {
 
−
    e.preventDefault();
 
−
    TweenMax.to(window, .5, { scrollTo: { y: "#link3", offsetY: 30 } });
 
−
};
 
−
nav_link4.onclick = function(e) {
 
−
    e.preventDefault();
 
−
    TweenMax.to(window, .5, { scrollTo: { y: "#link4", offsetY: 30 } });
 
−
};
 
−
nav_link5.onclick = function(e) {
 
−
    e.preventDefault();
 
−
    TweenMax.to(window, .5, { scrollTo: { y: "#link5", offsetY: 30 } });
 
−
};
 
−
*/
 
−
/*
 
−
new ScrollMagic.Scene({ triggerElement: "#text1", triggerHook: "0.4", reverse: false })
 
−
    .setTween(tween1)
 
−
    .addTo(controller);
 
−
new ScrollMagic.Scene({ triggerElement: "#text1", triggerHook: "0.4", reverse: false })
 
−
    .setTween(tween2)
 
−
    .addTo(controller);
 
−
new ScrollMagic.Scene({ triggerElement: "#animation2", triggerHook: "0.4", reverse: false })
 
−
    .setTween(tween3)
 
−
    .addTo(controller);
 
−
new ScrollMagic.Scene({ triggerElement: "#animation2", triggerHook: "0.4", reverse: false })
 
−
    .setTween(tween4)
 
−
    .addTo(controller);
 
−
*/
 
  
−
$("figure#overlay").click(function() {
+
 
−
     if (have_showed) {
+
window.addEventListener('scroll', function(e) {
−
         TweenMax.to("#nav-sidebar-content", 0.7, { x: 300 });
+
    scrollPosition = window.pageYOffset;
−
        TweenMax.to("main", 0.7, { x: 0 });
+
     if (!ticking) {
−
        TweenMax.to("#sticky-nav a", 0.7, { x: -150, ease: Power3.easeInOut });
+
         window.requestAnimationFrame(function() {
−
        TweenMax.to("figure", 0.7, { opacity: 0, visibility: "hidden" });
+
            for (var i = 0; i < length; i++) {
−
        $("#nav-sidebar").toggleClass('open');
+
                if ((!hasShown[i]) && (scrollPosition > (animation_lists[i].offsetTop - windowHeight * 0.25))) {
−
        //      $("body").toggleClass('disable-scroll');
+
                    var child = animation_lists[i].children;
−
         have_showed = false;
+
                    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;
 
})
 
})
−
 
−
$("#nav-sidebar").click(function() {
 
−
    if (!have_showed) {
 
−
        TweenMax.to("#nav-sidebar-content", 0.7, { x: -300, ease: Power3.easeInOut });
 
−
        TweenMax.to("main", 0.7, { x: -150, ease: Power3.easeInOut });
 
−
        TweenMax.to("#sticky-nav a", 0.7, { x: -150, ease: Power3.easeInOut });
 
−
        TweenMax.to("figure", 0.7, { opacity: 1, visibility: "visible" });
 
−
        $(this).toggleClass('open');
 
−
        //    $("body").toggleClass('disable-scroll');
 
−
        have_showed = true;
 
−
    } else {
 
−
        TweenMax.to("#nav-sidebar-content", 0.7, { x: 0, ease: Power3.easeInOut });
 
−
        TweenMax.to("main", 0.7, { x: 0, ease: Power3.easeInOut });
 
−
        TweenMax.to("#sticky-nav a", 0.7, { x: 0, ease: Power3.easeInOut });
 
−
        TweenMax.to("figure", 1.5, { opacity: 0, visibility: "hidden" });
 
−
        $(this).toggleClass('open');
 
−
        //      $("body").toggleClass('disable-scroll');
 
−
        have_showed = false;
 
−
    }
 
−
});
 
−
 
−
 
−
/*
 
−
new ScrollMagic.Scene({ triggerElement: "#link1", triggerHook: "onLeave" })
 
−
    .setClassToggle("#nav-sidebar", "nav-sidebar-toggle")
 
−
    .addTo(controller);
 

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;

})