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

Line 29: Line 29:
 
         .staggerFrom($coverAboutTeamSpans, 0.1, {left:"-=10px", autoAlpha:0.2}, 0.05, 0.8)
 
         .staggerFrom($coverAboutTeamSpans, 0.1, {left:"-=10px", autoAlpha:0.2}, 0.05, 0.8)
 
         .staggerFrom($coverAboutAttributionSpans, 0.1, {left:"-=10px", opacity:0.2}, 0.05, 0.8);
 
         .staggerFrom($coverAboutAttributionSpans, 0.1, {left:"-=10px", opacity:0.2}, 0.05, 0.8);
     $("#coverAbout").click(function(){console.log(1);});
+
     $coverAbout.click(function(){console.log(1);});
 
     $coverAbout.hover(
 
     $coverAbout.hover(
 
         function() {
 
         function() {
Line 40: Line 40:
 
             tlCoverAbout.reverse();
 
             tlCoverAbout.reverse();
 
             $aboutTab.style.background = "url(https://static.igem.org/mediawiki/2016/5/52/T--Hong_Kong_HKUST--singleStrand.png) 0 0";
 
             $aboutTab.style.background = "url(https://static.igem.org/mediawiki/2016/5/52/T--Hong_Kong_HKUST--singleStrand.png) 0 0";
             setTimeout(aboutArrowsDisappear, 500);
+
             aboutArrowsDisappear();
         }
+
         });
    );
+
 
     var myArrow = setInterval(function(){  
 
     var myArrow = setInterval(function(){  
 
         if (arrowSel == 1) {
 
         if (arrowSel == 1) {
Line 61: Line 60:
 
         }
 
         }
 
     }, 1);
 
     }, 1);
     function aboutArrowsAppear(){
+
     function aboutArrowsAppear(){ arrowSel = 1; }
        arrowSel = 1;
+
     function aboutArrowsDisappear(){ arrowSel = 2; }
    }
+
     function aboutArrowsDisappear(){
+
        arrowSel = 2;
+
    }
+
 
});
 
});

Revision as of 04:28, 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,
             onStart: aboutArrowsAppear
         }),
         $svgAbout = $('svg').drawsvg(),
         $aboutTab = document.getElementById("coverAboutTab"),
         p = 0,
         arrowSel = 0,
         coverWindowHeight = $(window).height();

/*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, 0.1, {left:"-=10px", autoAlpha:0.2}, 0.05, 0.8)
       .staggerFrom($coverAboutAttributionSpans, 0.1, {left:"-=10px", opacity:0.2}, 0.05, 0.8);
   $coverAbout.click(function(){console.log(1);});
   $coverAbout.hover(
       function() {
           console.log("its on");
           $aboutTab.style.background = "url(T--Hong_Kong_HKUST--singleStrand_focus.png) 0 0";
           tlCoverAbout.play();
       },
       function() {
           console.log("its off");
           tlCoverAbout.reverse();
           $aboutTab.style.background = "url(T--Hong_Kong_HKUST--singleStrand.png) 0 0";
           aboutArrowsDisappear();
       });
   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; }

});