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

(Created page with "$(document).ready(function(){ var $coverAboutTeam = $('#coverAboutTeam'), $coverAboutAttribution = $('#coverAboutAttribution'), $coverAbout = $('#coverAbou...")
 
Line 24: Line 24:
 
         function() {
 
         function() {
 
             console.log("its on");
 
             console.log("its on");
             $aboutTab.style.background = "url(singleStrand_focus.png) 0 0";
+
             $aboutTab.style.background = "url(https://static.igem.org/mediawiki/2016/4/4c/T--Hong_Kong_HKUST--singleStrand_focus.png) 0 0";
 
             tlCoverAbout.play();
 
             tlCoverAbout.play();
 
         },
 
         },
Line 30: Line 30:
 
             console.log("its off");
 
             console.log("its off");
 
             tlCoverAbout.reverse();
 
             tlCoverAbout.reverse();
             $aboutTab.style.background = "url(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);
 
             setTimeout(aboutArrowsDisappear, 500);
 
         }
 
         }

Revision as of 12:37, 8 August 2016

$(document).ready(function(){

   var $coverAboutTeam = $('#coverAboutTeam'),
       $coverAboutAttribution = $('#coverAboutAttribution'),
       $coverAbout = $('#coverAbout');
   $coverAboutAttribution.lettering();
   $coverAboutTeam.lettering(); // wrap  around each character within header
   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;
   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";
           setTimeout(aboutArrowsDisappear, 500);
       }
   );
   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.log(p);
           }
       }
   }, 1);
   function aboutArrowsAppear(){
       arrowSel = 1;
   }
   function aboutArrowsDisappear(){
       arrowSel = 2;
   }

});