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

Line 1: Line 1:
 
var $nav_sidebar_content = $("#nav-sidebar-content");
 
var $nav_sidebar_content = $("#nav-sidebar-content");
−
var $body = $('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");
Line 25: Line 25:
 
nav_top.onclick = function(e) {
 
nav_top.onclick = function(e) {
 
     e.preventDefault();
 
     e.preventDefault();
−
     $body.stop(true).animate({
+
     $html_body.stop(true).animate({
 
         scrollTop: 0
 
         scrollTop: 0
−
     }, {
+
     }, 500);
−
        duration: 500,
+
−
        easing: 'linear'
+
−
    });
+
 
};
 
};
 
/*
 
/*
Line 112: Line 109:
 
     .setClassToggle("#nav-sidebar", "nav-sidebar-toggle")
 
     .setClassToggle("#nav-sidebar", "nav-sidebar-toggle")
 
     .addTo(controller);
 
     .addTo(controller);
−
*/
 

Revision as of 11:22, 10 October 2016

var $nav_sidebar_content = $("#nav-sidebar-content"); var $html_body = $('html,body'); var have_showed = false; var nav_top = document.getElementById("nav-top"); var nav_top_a = document.querySelector("#nav-top a"); var nav_link1 = document.getElementById("nav-link1"); var nav_link2 = document.getElementById("nav-link2"); var nav_link3 = document.getElementById("nav-link3"); var nav_link4 = document.getElementById("nav-link4"); var nav_link5 = document.getElementById("nav-link5");


$(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) { 

   e.preventDefault();
   $html_body.stop(true).animate({
       scrollTop: 0
   }, 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) {
       TweenMax.to("#nav-sidebar-content", 0.7, { x: 300 });
       TweenMax.to("main", 0.7, { x: 0 });
       TweenMax.to("#sticky-nav a", 0.7, { x: -150, ease: Power3.easeInOut });
       TweenMax.to("figure", 0.7, { opacity: 0, visibility: "hidden" });
       $("#nav-sidebar").toggleClass('open');
       //      $("body").toggleClass('disable-scroll');
       have_showed = false;
   }

})

$("#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);