Difference between revisions of "Template:Hong Kong HKUST/coverpageJS"

Revision as of 06:34, 17 August 2016

$(document).ready(function(){

   var $coverAboutTeam = $('#coverAboutTeam'),
       $coverAboutAttribution = $('#coverAboutAttribution'),
       $coverAbout = $('#coverAbout');

   $coverAboutAttribution.lettering(); // wrap  around each character within the element
   $coverAboutTeam.lettering();

   var $coverAboutTeamSpans = $coverAboutTeam.find('span'),
       $coverAboutAttributionSpans = $coverAboutAttribution.find('span'),
       tlCoverAbout = new TimelineMax({paused: true}),
       $svgAbout = $('svg').drawsvg(),
       $aboutTab = document.getElementById("coverAboutTab"),
       p = 0,
       arrowSel = 0,
       coverWindowHeight = $(window).height(),
       tlPlayDelay,
       ArrowsDisappearDelay,
       tlDuration = 0.1;

/*Variable for strand centering*/

       console.log(coverWindowHeight);
       document.getElementById("content_wrapper").style.height = coverWindowHeight + "px";
       var contentHeight = document.getElementById("content_wrapper").style.height;
       console.log(contentHeight);

/*Animation*/

   tlCoverAbout
       .staggerFrom($coverAboutTeamSpans, tlDuration, {left:"-=10px", autoAlpha:0.2}, 0.05, 0)
       .staggerFrom($coverAboutAttributionSpans, tlDuration, {left:"-=10px", opacity:0.2}, 0.05, 0);
   $coverAbout.click(function(){console.log(1);});
   $coverAbout.hover(
       function() {
           console.log("its on");
           $aboutTab.style.background = "url() 0 0";
           aboutArrowsAppear();
           clearTimeout(ArrowsDisappearDelay);
           if (p == 100){tlCoverAbout.play();}
           else {
               tlPlayDelay = setTimeout(function(){ tlCoverAbout.play(); }, 500-p);
           }
       },
       function() {
           var tlProgress = tlCoverAbout.progress();
           console.log("its off");
           tlCoverAbout.reverse();
           clearTimeout(tlPlayDelay);
           $aboutTab.style.background = "url() 0 0";
           if (tlProgress == 0) {aboutArrowsDisappear();}
           else {
               ArrowsDisappearDelay = setTimeout(function(){ aboutArrowsDisappear(); }, tlProgress*tlDuration+0.5);
           }
       });
   var myArrow = setInterval(function(){ 
       if (arrowSel == 1) {
           if (p == 100) {}
           else {
               p+=1;
               $svgAbout.drawsvg('progress', p/100);
               console.log(p);
           }
       }
       else if (arrowSel ==2){
           if (p == 0){}
           else {
               p-=1;
               $svgAbout.drawsvg('progress', p/100);
               console.lo(p);
           }
       }
   }, 1);
   function aboutArrowsAppear(){ arrowSel = 1; }
   function aboutArrowsDisappear(){ arrowSel = 2; }

});