(31 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
var $coverAboutTeam = $('#coverAboutTeam'), | var $coverAboutTeam = $('#coverAboutTeam'), | ||
$coverAboutAttribution = $('#coverAboutAttribution'), | $coverAboutAttribution = $('#coverAboutAttribution'), | ||
− | $coverAbout = $('#coverAbout') | + | $coverAbout = $('#coverAbout'), |
− | + | $coverProjectOverview = $('#coverProjectOverview'), | |
− | $ | + | $coverProjectIdea = $('#coverProjectIdea'), |
− | var $coverAboutTeamSpans = $coverAboutTeam.find('span'), | + | $coverProjectResults = $('#coverProjectResults'), |
+ | $coverProject = $('#coverProject'), | ||
+ | $coverModelingModel = $('#coverModelingModel'), | ||
+ | $coverModelingStability = $('#coverModelingStability'), | ||
+ | $coverModeling = $('#coverModeling'), | ||
+ | $coverHPIntroduction = $('#coverHPIntroduction'), | ||
+ | $coverHPProduct = $('#coverHPProduct'), | ||
+ | $coverHPInfo = $('#coverHPInfo'), | ||
+ | $coverHPLearning = $('#coverHPLearning'), | ||
+ | $coverHP = $('#coverHP'), | ||
+ | $coverAchievementsParts = $('#coverAchievementsParts'), | ||
+ | $coverAchievementsMedal = $('#coverAchievementsMedal'), | ||
+ | $coverAchievements = $('#coverAchievements'), | ||
+ | $coverLabProtocol = $('#coverLabProtocol'), | ||
+ | $coverLabSafety = $('#coverLabSafety'), | ||
+ | $coverLab = $('#coverLab'); | ||
+ | |||
+ | $coverAboutAttribution.lettering(); // wrap <span class="charx"/ > around each character within the element | ||
+ | $coverAboutTeam.lettering(); | ||
+ | $coverProjectOverview.lettering(); | ||
+ | $coverProjectIdea.lettering(); | ||
+ | $coverProjectResults.lettering(); | ||
+ | $coverModelingModel.lettering(); | ||
+ | $coverModelingStability.lettering(); | ||
+ | $coverHPIntroduction.lettering(); | ||
+ | $coverHPProduct.lettering(); | ||
+ | $coverHPInfo.lettering(); | ||
+ | $coverHPLearning.lettering(); | ||
+ | $coverAchievementsParts.lettering(); | ||
+ | $coverAchievementsMedal.lettering(); | ||
+ | $coverLabProtocol.lettering(); | ||
+ | $coverLabSafety.lettering(); | ||
+ | |||
+ | var $coverAboutTeamSpans = $coverAboutTeam.find('span'), //Get all letters in each subtaby as an array | ||
$coverAboutAttributionSpans = $coverAboutAttribution.find('span'), | $coverAboutAttributionSpans = $coverAboutAttribution.find('span'), | ||
− | tlCoverAbout = new TimelineMax({ | + | $coverProjectOverviewSpans = $coverProjectOverview.find('span'), |
− | + | $coverProjectIdeaSpans = $coverProjectIdea.find('span'), | |
− | + | $coverProjectResultsSpans = $coverProjectResults.find('span'), | |
− | }), | + | $coverModelingModelSpans = $coverModelingModel.find('span'), |
− | $svgAbout = $('svg').drawsvg(), | + | $coverModelingStabilitySpans = $coverModelingStability.find('span'), |
− | $ | + | $coverHPIntroductionSpans = $coverHPIntroduction.find('span'), |
− | + | $coverHPProductSpans = $coverHPProduct.find('span'), | |
− | + | $coverHPInfoSpans = $coverHPInfo.find('span'), | |
− | coverWindowHeight = $(window).height(); | + | $coverHPLearningSpans = $coverHPLearning.find('span'), |
− | console.log(coverWindowHeight); | + | $coverAchievementsPartsSpans = $coverAchievementsParts.find('span'), |
+ | $coverAchievementsMedalSpans = $coverAchievementsMedal.find('span'), | ||
+ | $coverLabProtocolSpans = $coverLabProtocol.find('span'), | ||
+ | $coverLabSafetySpans = $coverLabSafety.find('span'), | ||
+ | tlCoverAbout = new TimelineMax({paused: true}), //Declare animation timeline | ||
+ | tlCoverProject = new TimelineMax({paused: true}), | ||
+ | tlCoverModeling = new TimelineMax({paused: true}), | ||
+ | tlCoverHP = new TimelineMax({paused: true}), | ||
+ | tlCoverAchievements = new TimelineMax({paused: true}), | ||
+ | tlCoverLab = new TimelineMax({paused: true}), | ||
+ | $svgAbout = $('#svgAbout').drawsvg(), //Initialise svg drawing (also hide them when page loads) | ||
+ | $svgProject = $('#svgProject').drawsvg(), | ||
+ | $svgModeling = $('#svgModeling').drawsvg(), | ||
+ | $svgHP = $('#svgHP').drawsvg(), | ||
+ | $svgAchievements = $('#svgAchievements').drawsvg(), | ||
+ | $svgLab = $('#svgLab').drawsvg(), | ||
+ | pAbout = 0, //Arrows progress | ||
+ | pProject = 0, | ||
+ | pModeling = 0, | ||
+ | pHP = 0, | ||
+ | pAchi = 0, | ||
+ | pLab = 0, | ||
+ | aboutArrSel = 0, //Directs arrows movement | ||
+ | projectArrSel = 0, | ||
+ | modelingArrSel = 0, | ||
+ | HPArrSel = 0, | ||
+ | achiArrSel = 0, | ||
+ | labArrSel = 0, | ||
+ | coverWindowHeight = $(window).height(), | ||
+ | tlPlayDelay, | ||
+ | aboutArrDisappearDelay, //Variables for arrows shrinking | ||
+ | projectArrDisappearDelay, | ||
+ | modelingArrDisappearDelay, | ||
+ | HPArrDisappearDelay, | ||
+ | achiArrDisappearDelay, | ||
+ | labArrDisappearDelay, | ||
+ | tlDuration = 0.1; | ||
+ | var tlEntry = new TimelineMax(), | ||
+ | $circleContainer = $("#circleContainer"), | ||
+ | $tramWrapper = $("#tramWrapper") | ||
+ | $tram = $("#tram"); | ||
+ | |||
+ | /*Strand centering and scaling*/ | ||
+ | console.log(450/648*coverWindowHeight); | ||
document.getElementById("content_wrapper").style.height = coverWindowHeight + "px"; | document.getElementById("content_wrapper").style.height = coverWindowHeight + "px"; | ||
− | var contentHeight = document.getElementById("content_wrapper").style.height; | + | var contentHeight = document.getElementById("content_wrapper").style.height; |
− | console.log(contentHeight); | + | console.log(contentHeight); |
+ | $circleContainer.css("transform", "scale("+coverWindowHeight/648+") translate(-50%, -50%)"); | ||
+ | |||
+ | /*Animation*/ | ||
+ | //Entry animation | ||
+ | tlEntry | ||
+ | .from($circleContainer, 1, {scale:0.1, rotation:-180, ease:Power4.easeIn}) | ||
+ | .to($circleContainer, 2, {autoAlpha: 1}, 0) | ||
+ | .fromTo($tramWrapper, 2, {autoAlpha:0}, {autoAlpha:0}, 0) | ||
+ | .to($tramWrapper, 2, {autoAlpha:1}, 1.1) | ||
+ | .from($tram, 2, {top:"-=150px", scale:0.1}, 1.1); | ||
+ | //Staggered letters | ||
tlCoverAbout | tlCoverAbout | ||
− | .staggerFrom($coverAboutTeamSpans, | + | .staggerFrom($coverAboutTeamSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0) |
− | + | .staggerFrom($coverAboutAttributionSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0); | |
− | .staggerFrom($ | + | tlCoverProject |
− | + | .staggerFrom($coverProjectOverviewSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0) | |
− | $(" | + | .staggerFrom($coverProjectIdeaSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0) |
+ | .staggerFrom($coverProjectResultsSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0); | ||
+ | tlCoverModeling | ||
+ | .staggerFrom($coverModelingModelSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0) | ||
+ | .staggerFrom($coverModelingStabilitySpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0); | ||
+ | tlCoverHP | ||
+ | .staggerFrom($coverHPIntroductionSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0) | ||
+ | .staggerFrom($coverHPProductSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0) | ||
+ | .staggerFrom($coverHPInfoSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0) | ||
+ | .staggerFrom($coverHPLearningSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0); | ||
+ | tlCoverAchievements | ||
+ | .staggerFrom($coverAchievementsPartsSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0) | ||
+ | .staggerFrom($coverAchievementsMedalSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0); | ||
+ | tlCoverLab | ||
+ | .staggerFrom($coverLabProtocolSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0) | ||
+ | .staggerFrom($coverLabSafetySpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0); | ||
+ | //Tab hover effect | ||
$coverAbout.hover( | $coverAbout.hover( | ||
− | function() { | + | function(){ |
− | + | $("div",this).css("visibility", "visible"); | |
− | + | coverHoverIn('About', '0 -365px'); | |
− | + | }, | |
− | }, | + | function(){coverHoverOut('About', '0 -365px');} |
− | function() { | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
); | ); | ||
+ | $coverProject.hover( | ||
+ | function(){ | ||
+ | $("div",this).css("visibility", "visible"); | ||
+ | coverHoverIn('Project', '0 -729px'); | ||
+ | }, function(){coverHoverOut('Project', '0 -729px');} | ||
+ | ); | ||
+ | $coverModeling.hover( | ||
+ | function(){ | ||
+ | $("div",this).css("visibility", "visible"); | ||
+ | coverHoverIn('Modeling', '0 -1093px'); | ||
+ | }, | ||
+ | function(){coverHoverOut('Modeling', '0 -1093px');} | ||
+ | ); | ||
+ | $coverHP.hover( | ||
+ | function(){ | ||
+ | $("div",this).css("visibility", "visible"); | ||
+ | coverHoverIn('HP', '0 -1457px'); | ||
+ | }, function(){coverHoverOut('HP', '0 -1457px');} | ||
+ | ); | ||
+ | $coverAchievements.hover( | ||
+ | function(){ | ||
+ | $("div",this).css("visibility", "visible"); | ||
+ | coverHoverIn('Achievements', '-700px -366px'); | ||
+ | }, | ||
+ | function(){coverHoverOut('Achievements', '-700px -366px');} | ||
+ | ); | ||
+ | $coverLab.hover( | ||
+ | function(){ | ||
+ | $("div",this).css("visibility", "visible"); | ||
+ | coverHoverIn('Lab', '-697px -729px'); | ||
+ | }, | ||
+ | function(){coverHoverOut('Lab', '-697px -729px');} | ||
+ | ); | ||
+ | //Functions called when hovering the tabs | ||
+ | function coverHoverIn(coverTab, DNAposition){ | ||
+ | var $tab = document.getElementById("cover"+coverTab+"Tab"); | ||
+ | $tab.style.background = "url(https://static.igem.org/mediawiki/2016/f/ff/T--Hong_Kong_HKUST--DNAStrandSpriteFocus.png)" + DNAposition; | ||
+ | switch (coverTab) { | ||
+ | case "About": | ||
+ | aboutArrSel = 1; | ||
+ | clearTimeout(aboutArrDisappearDelay); | ||
+ | if (pAbout == 100){tlCoverAbout.play();} | ||
+ | else { | ||
+ | tlAboutDelay = setTimeout(function(){ tlCoverAbout.play(); }, 500-pAbout); | ||
+ | } | ||
+ | break; | ||
+ | case "Project": | ||
+ | projectArrSel = 1; | ||
+ | clearTimeout(projectArrDisappearDelay); | ||
+ | if (pProject == 100){tlCoverProject.play();} | ||
+ | else {tlProjectDelay = setTimeout(function(){ tlCoverProject.play(); }, 500-pProject);} | ||
+ | break; | ||
+ | case "Modeling": | ||
+ | modelingArrSel = 1; | ||
+ | clearTimeout(modelingArrDisappearDelay); | ||
+ | if (pModeling == 100){tlCoverModeling.play();} | ||
+ | else { | ||
+ | tlModelingDelay = setTimeout(function(){ tlCoverModeling.play(); }, 500-pModeling); | ||
+ | } | ||
+ | break; | ||
+ | case "HP": | ||
+ | HPArrSel = 1; | ||
+ | clearTimeout(HPArrDisappearDelay); | ||
+ | if (pHP == 100){tlCoverHP.play();} | ||
+ | else { | ||
+ | tlHPDelay = setTimeout(function(){ tlCoverHP.play(); }, 500-pHP); | ||
+ | } | ||
+ | break; | ||
+ | case "Achievements": | ||
+ | achiArrSel = 1; | ||
+ | clearTimeout(achiArrDisappearDelay); | ||
+ | if (pAchi == 100){tlCoverAchievements.play();} | ||
+ | else { | ||
+ | tlAchiDelay = setTimeout(function(){ tlCoverAchievements.play(); }, 500-pAchi); | ||
+ | } | ||
+ | break; | ||
+ | case "Lab": | ||
+ | labArrSel = 1; | ||
+ | clearTimeout(labArrDisappearDelay); | ||
+ | if (pLab == 100){tlCoverLab.play();} | ||
+ | else { | ||
+ | tlLabDelay = setTimeout(function(){ tlCoverLab.play(); }, 500-pLab); | ||
+ | } | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | function coverHoverOut(coverTab, DNAposition){ | ||
+ | var $tab = document.getElementById("cover"+coverTab+"Tab"); | ||
+ | $tab.style.background = "url(https://static.igem.org/mediawiki/2016/3/36/T--Hong_Kong_HKUST--DNAStrandSprite.png)" + DNAposition; | ||
+ | switch (coverTab) { | ||
+ | case "About": | ||
+ | var tlProgress = tlCoverAbout.progress(); | ||
+ | tlCoverAbout.reverse(); | ||
+ | clearTimeout(tlAboutDelay); | ||
+ | if (tlProgress == 0) {aboutArrSel = 0;} | ||
+ | else { | ||
+ | aboutArrDisappearDelay = setTimeout(function(){ aboutArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000); | ||
+ | } | ||
+ | break; | ||
+ | case "Project": | ||
+ | var tlProgress = tlCoverProject.progress(); | ||
+ | tlCoverProject.reverse(); | ||
+ | clearTimeout(tlProjectDelay); | ||
+ | if (tlProgress == 0) {projectArrSel = 0;} | ||
+ | else { | ||
+ | projectArrDisappearDelay = setTimeout(function(){ projectArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000); | ||
+ | } | ||
+ | break; | ||
+ | case "Modeling": | ||
+ | var tlProgress = tlCoverModeling.progress(); | ||
+ | tlCoverModeling.reverse(); | ||
+ | clearTimeout(tlModelingDelay); | ||
+ | if (tlProgress == 0) {modelingArrSel = 0;} | ||
+ | else { | ||
+ | modelingArrDisappearDelay = setTimeout(function(){ modelingArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000); | ||
+ | } | ||
+ | break; | ||
+ | case "HP": | ||
+ | var tlProgress = tlCoverHP.progress(); | ||
+ | tlCoverHP.reverse(); | ||
+ | clearTimeout(tlHPDelay); | ||
+ | if (tlProgress == 0) {HPArrSel = 0;} | ||
+ | else { | ||
+ | HPArrDisappearDelay = setTimeout(function(){ HPArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000); | ||
+ | } | ||
+ | break; | ||
+ | case "Achievements": | ||
+ | var tlProgress = tlCoverAchievements.progress(); | ||
+ | tlCoverAchievements.reverse(); | ||
+ | clearTimeout(tlAchiDelay); | ||
+ | if (tlProgress == 0) {achiArrSel = 0;} | ||
+ | else { | ||
+ | achiArrDisappearDelay = setTimeout(function(){ achiArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000); | ||
+ | } | ||
+ | break; | ||
+ | case "Lab": | ||
+ | var tlProgress = tlCoverLab.progress(); | ||
+ | tlCoverLab.reverse(); | ||
+ | clearTimeout(tlLabDelay); | ||
+ | if (tlProgress == 0) {labArrSel = 0;} | ||
+ | else { | ||
+ | labArrDisappearDelay = setTimeout(function(){ labArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000); | ||
+ | } | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | //Update the arrows constantly | ||
var myArrow = setInterval(function(){ | var myArrow = setInterval(function(){ | ||
− | if ( | + | drawAbout() |
− | if ( | + | drawProject() |
+ | drawModeling() | ||
+ | drawHP() | ||
+ | drawAchi() | ||
+ | drawLab() | ||
+ | }, 1); | ||
+ | //Functions controling the arrow drawing | ||
+ | function drawAbout(){ | ||
+ | if (aboutArrSel == 1) { | ||
+ | if (pAbout == 100) {} | ||
else { | else { | ||
− | + | pAbout+=1; | |
− | $svgAbout.drawsvg('progress', | + | $svgAbout.drawsvg('progress', pAbout/100); |
− | + | ||
} | } | ||
} | } | ||
− | else if ( | + | else if (aboutArrSel ==0){ |
− | if ( | + | if (pAbout == 0){ |
+ | if(tlCoverAbout.progress() == 0){ | ||
+ | $coverAbout.children(":first").siblings().css("visibility", "hidden"); | ||
+ | } | ||
+ | } | ||
else { | else { | ||
− | + | pAbout-=1; | |
− | $svgAbout.drawsvg('progress', | + | $svgAbout.drawsvg('progress', pAbout/100); |
− | + | ||
} | } | ||
} | } | ||
− | |||
− | |||
− | |||
} | } | ||
− | function | + | function drawProject(){ |
− | + | if (projectArrSel == 1) { | |
+ | if (pProject == 100) {} | ||
+ | else { | ||
+ | pProject+=1; | ||
+ | $svgProject.drawsvg('progress', pProject/100); | ||
+ | } | ||
+ | } | ||
+ | else if (projectArrSel ==0){ | ||
+ | if (pProject == 0){ | ||
+ | if(tlCoverProject.progress() == 0){ | ||
+ | $coverProject.children(":first").siblings().css("visibility", "hidden"); | ||
+ | } | ||
+ | } | ||
+ | else { | ||
+ | pProject-=1; | ||
+ | $svgProject.drawsvg('progress', pProject/100); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | function drawModeling(){ | ||
+ | if (modelingArrSel == 1) { | ||
+ | if (pModeling == 100) {} | ||
+ | else { | ||
+ | pModeling+=1; | ||
+ | $svgModeling.drawsvg('progress', pModeling/100); | ||
+ | } | ||
+ | } | ||
+ | else if (modelingArrSel ==0){ | ||
+ | if (pModeling == 0){ | ||
+ | if(tlCoverModeling.progress() == 0){ | ||
+ | $coverModeling.children(":first").siblings().css("visibility", "hidden"); | ||
+ | } | ||
+ | } | ||
+ | else { | ||
+ | pModeling-=1; | ||
+ | $svgModeling.drawsvg('progress', pModeling/100); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | function drawHP(){ | ||
+ | if (HPArrSel == 1) { | ||
+ | if (pHP == 100) {} | ||
+ | else { | ||
+ | pHP+=1; | ||
+ | $svgHP.drawsvg('progress', pHP/100); | ||
+ | } | ||
+ | } | ||
+ | else if (HPArrSel ==0){ | ||
+ | if (pHP == 0){ | ||
+ | if(tlCoverHP.progress() == 0){ | ||
+ | $coverHP.children(":first").siblings().css("visibility", "hidden"); | ||
+ | } | ||
+ | } | ||
+ | else { | ||
+ | pHP-=1; | ||
+ | $svgHP.drawsvg('progress', pHP/100); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | function drawAchi(){ | ||
+ | if (achiArrSel == 1) { | ||
+ | if (pAchi == 100) {} | ||
+ | else { | ||
+ | pAchi+=1; | ||
+ | $svgAchievements.drawsvg('progress', pAchi/100); | ||
+ | } | ||
+ | } | ||
+ | else if (achiArrSel ==0){ | ||
+ | if (pAchi == 0){ | ||
+ | if(tlCoverAchievements.progress() == 0){ | ||
+ | $coverAchievements.children(":first").siblings().css("visibility", "hidden"); | ||
+ | } | ||
+ | } | ||
+ | else { | ||
+ | pAchi-=1; | ||
+ | $svgAchievements.drawsvg('progress', pAchi/100); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | function drawLab(){ | ||
+ | if (labArrSel == 1) { | ||
+ | if (pLab == 100) {} | ||
+ | else { | ||
+ | pLab+=1; | ||
+ | $svgLab.drawsvg('progress', pLab/100); | ||
+ | } | ||
+ | } | ||
+ | else if (labArrSel ==0){ | ||
+ | if (pLab == 0){ | ||
+ | if(tlCoverLab.progress() == 0){ | ||
+ | $coverLab.children(":first").siblings().css("visibility", "hidden"); | ||
+ | } | ||
+ | } | ||
+ | else { | ||
+ | pLab-=1; | ||
+ | $svgLab.drawsvg('progress', pLab/100); | ||
+ | } | ||
+ | } | ||
} | } | ||
+ | //Tram animation | ||
+ | $('#tram') | ||
+ | .hover(function () {$(this).attr("src", "https://static.igem.org/mediawiki/2016/d/dd/T--Hong_Kong_HKUST--tram.gif");}, | ||
+ | function () {$(this).attr("src", "https://static.igem.org/mediawiki/2016/7/74/T--Hong_Kong_HKUST--tram.png");}); | ||
}); | }); |
Latest revision as of 08:28, 19 September 2016
$(document).ready(function(){
var $coverAboutTeam = $('#coverAboutTeam'), $coverAboutAttribution = $('#coverAboutAttribution'), $coverAbout = $('#coverAbout'), $coverProjectOverview = $('#coverProjectOverview'), $coverProjectIdea = $('#coverProjectIdea'), $coverProjectResults = $('#coverProjectResults'), $coverProject = $('#coverProject'), $coverModelingModel = $('#coverModelingModel'), $coverModelingStability = $('#coverModelingStability'), $coverModeling = $('#coverModeling'), $coverHPIntroduction = $('#coverHPIntroduction'), $coverHPProduct = $('#coverHPProduct'), $coverHPInfo = $('#coverHPInfo'), $coverHPLearning = $('#coverHPLearning'), $coverHP = $('#coverHP'), $coverAchievementsParts = $('#coverAchievementsParts'), $coverAchievementsMedal = $('#coverAchievementsMedal'), $coverAchievements = $('#coverAchievements'), $coverLabProtocol = $('#coverLabProtocol'), $coverLabSafety = $('#coverLabSafety'), $coverLab = $('#coverLab');
$coverAboutAttribution.lettering(); // wrap around each character within the element
$coverAboutTeam.lettering();
$coverProjectOverview.lettering();
$coverProjectIdea.lettering();
$coverProjectResults.lettering();
$coverModelingModel.lettering();
$coverModelingStability.lettering();
$coverHPIntroduction.lettering();
$coverHPProduct.lettering();
$coverHPInfo.lettering();
$coverHPLearning.lettering();
$coverAchievementsParts.lettering();
$coverAchievementsMedal.lettering();
$coverLabProtocol.lettering();
$coverLabSafety.lettering();
var $coverAboutTeamSpans = $coverAboutTeam.find('span'), //Get all letters in each subtaby as an array $coverAboutAttributionSpans = $coverAboutAttribution.find('span'), $coverProjectOverviewSpans = $coverProjectOverview.find('span'), $coverProjectIdeaSpans = $coverProjectIdea.find('span'), $coverProjectResultsSpans = $coverProjectResults.find('span'), $coverModelingModelSpans = $coverModelingModel.find('span'), $coverModelingStabilitySpans = $coverModelingStability.find('span'), $coverHPIntroductionSpans = $coverHPIntroduction.find('span'), $coverHPProductSpans = $coverHPProduct.find('span'), $coverHPInfoSpans = $coverHPInfo.find('span'), $coverHPLearningSpans = $coverHPLearning.find('span'), $coverAchievementsPartsSpans = $coverAchievementsParts.find('span'), $coverAchievementsMedalSpans = $coverAchievementsMedal.find('span'), $coverLabProtocolSpans = $coverLabProtocol.find('span'), $coverLabSafetySpans = $coverLabSafety.find('span'), tlCoverAbout = new TimelineMax({paused: true}), //Declare animation timeline tlCoverProject = new TimelineMax({paused: true}), tlCoverModeling = new TimelineMax({paused: true}), tlCoverHP = new TimelineMax({paused: true}), tlCoverAchievements = new TimelineMax({paused: true}), tlCoverLab = new TimelineMax({paused: true}), $svgAbout = $('#svgAbout').drawsvg(), //Initialise svg drawing (also hide them when page loads) $svgProject = $('#svgProject').drawsvg(), $svgModeling = $('#svgModeling').drawsvg(), $svgHP = $('#svgHP').drawsvg(), $svgAchievements = $('#svgAchievements').drawsvg(), $svgLab = $('#svgLab').drawsvg(), pAbout = 0, //Arrows progress pProject = 0, pModeling = 0, pHP = 0, pAchi = 0, pLab = 0, aboutArrSel = 0, //Directs arrows movement projectArrSel = 0, modelingArrSel = 0, HPArrSel = 0, achiArrSel = 0, labArrSel = 0, coverWindowHeight = $(window).height(), tlPlayDelay, aboutArrDisappearDelay, //Variables for arrows shrinking projectArrDisappearDelay, modelingArrDisappearDelay, HPArrDisappearDelay, achiArrDisappearDelay, labArrDisappearDelay, tlDuration = 0.1; var tlEntry = new TimelineMax(), $circleContainer = $("#circleContainer"), $tramWrapper = $("#tramWrapper") $tram = $("#tram");
/*Strand centering and scaling*/
console.log(450/648*coverWindowHeight); document.getElementById("content_wrapper").style.height = coverWindowHeight + "px"; var contentHeight = document.getElementById("content_wrapper").style.height; console.log(contentHeight); $circleContainer.css("transform", "scale("+coverWindowHeight/648+") translate(-50%, -50%)");
/*Animation*/ //Entry animation
tlEntry .from($circleContainer, 1, {scale:0.1, rotation:-180, ease:Power4.easeIn}) .to($circleContainer, 2, {autoAlpha: 1}, 0) .fromTo($tramWrapper, 2, {autoAlpha:0}, {autoAlpha:0}, 0) .to($tramWrapper, 2, {autoAlpha:1}, 1.1) .from($tram, 2, {top:"-=150px", scale:0.1}, 1.1);
//Staggered letters
tlCoverAbout .staggerFrom($coverAboutTeamSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0) .staggerFrom($coverAboutAttributionSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0); tlCoverProject .staggerFrom($coverProjectOverviewSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0) .staggerFrom($coverProjectIdeaSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0) .staggerFrom($coverProjectResultsSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0); tlCoverModeling .staggerFrom($coverModelingModelSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0) .staggerFrom($coverModelingStabilitySpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0); tlCoverHP .staggerFrom($coverHPIntroductionSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0) .staggerFrom($coverHPProductSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0) .staggerFrom($coverHPInfoSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0) .staggerFrom($coverHPLearningSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0); tlCoverAchievements .staggerFrom($coverAchievementsPartsSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0) .staggerFrom($coverAchievementsMedalSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0); tlCoverLab .staggerFrom($coverLabProtocolSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0) .staggerFrom($coverLabSafetySpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
//Tab hover effect
$coverAbout.hover( function(){ $("div",this).css("visibility", "visible"); coverHoverIn('About', '0 -365px'); }, function(){coverHoverOut('About', '0 -365px');} ); $coverProject.hover( function(){ $("div",this).css("visibility", "visible"); coverHoverIn('Project', '0 -729px'); }, function(){coverHoverOut('Project', '0 -729px');} ); $coverModeling.hover( function(){ $("div",this).css("visibility", "visible"); coverHoverIn('Modeling', '0 -1093px'); }, function(){coverHoverOut('Modeling', '0 -1093px');} ); $coverHP.hover( function(){ $("div",this).css("visibility", "visible"); coverHoverIn('HP', '0 -1457px'); }, function(){coverHoverOut('HP', '0 -1457px');} ); $coverAchievements.hover( function(){ $("div",this).css("visibility", "visible"); coverHoverIn('Achievements', '-700px -366px'); }, function(){coverHoverOut('Achievements', '-700px -366px');} ); $coverLab.hover( function(){ $("div",this).css("visibility", "visible"); coverHoverIn('Lab', '-697px -729px'); }, function(){coverHoverOut('Lab', '-697px -729px');} );
//Functions called when hovering the tabs
function coverHoverIn(coverTab, DNAposition){ var $tab = document.getElementById("cover"+coverTab+"Tab"); $tab.style.background = "url()" + DNAposition; switch (coverTab) { case "About": aboutArrSel = 1; clearTimeout(aboutArrDisappearDelay); if (pAbout == 100){tlCoverAbout.play();} else { tlAboutDelay = setTimeout(function(){ tlCoverAbout.play(); }, 500-pAbout); } break; case "Project": projectArrSel = 1; clearTimeout(projectArrDisappearDelay); if (pProject == 100){tlCoverProject.play();} else {tlProjectDelay = setTimeout(function(){ tlCoverProject.play(); }, 500-pProject);} break; case "Modeling": modelingArrSel = 1; clearTimeout(modelingArrDisappearDelay); if (pModeling == 100){tlCoverModeling.play();} else { tlModelingDelay = setTimeout(function(){ tlCoverModeling.play(); }, 500-pModeling); } break; case "HP": HPArrSel = 1; clearTimeout(HPArrDisappearDelay); if (pHP == 100){tlCoverHP.play();} else { tlHPDelay = setTimeout(function(){ tlCoverHP.play(); }, 500-pHP); } break; case "Achievements": achiArrSel = 1; clearTimeout(achiArrDisappearDelay); if (pAchi == 100){tlCoverAchievements.play();} else { tlAchiDelay = setTimeout(function(){ tlCoverAchievements.play(); }, 500-pAchi); } break; case "Lab": labArrSel = 1; clearTimeout(labArrDisappearDelay); if (pLab == 100){tlCoverLab.play();} else { tlLabDelay = setTimeout(function(){ tlCoverLab.play(); }, 500-pLab); } break; } } function coverHoverOut(coverTab, DNAposition){ var $tab = document.getElementById("cover"+coverTab+"Tab"); $tab.style.background = "url()" + DNAposition; switch (coverTab) { case "About": var tlProgress = tlCoverAbout.progress(); tlCoverAbout.reverse(); clearTimeout(tlAboutDelay); if (tlProgress == 0) {aboutArrSel = 0;} else { aboutArrDisappearDelay = setTimeout(function(){ aboutArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000); } break; case "Project": var tlProgress = tlCoverProject.progress(); tlCoverProject.reverse(); clearTimeout(tlProjectDelay); if (tlProgress == 0) {projectArrSel = 0;} else { projectArrDisappearDelay = setTimeout(function(){ projectArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000); } break; case "Modeling": var tlProgress = tlCoverModeling.progress(); tlCoverModeling.reverse(); clearTimeout(tlModelingDelay); if (tlProgress == 0) {modelingArrSel = 0;} else { modelingArrDisappearDelay = setTimeout(function(){ modelingArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000); } break; case "HP": var tlProgress = tlCoverHP.progress(); tlCoverHP.reverse(); clearTimeout(tlHPDelay); if (tlProgress == 0) {HPArrSel = 0;} else { HPArrDisappearDelay = setTimeout(function(){ HPArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000); } break; case "Achievements": var tlProgress = tlCoverAchievements.progress(); tlCoverAchievements.reverse(); clearTimeout(tlAchiDelay); if (tlProgress == 0) {achiArrSel = 0;} else { achiArrDisappearDelay = setTimeout(function(){ achiArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000); } break; case "Lab": var tlProgress = tlCoverLab.progress(); tlCoverLab.reverse(); clearTimeout(tlLabDelay); if (tlProgress == 0) {labArrSel = 0;} else { labArrDisappearDelay = setTimeout(function(){ labArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000); } break; } }
//Update the arrows constantly
var myArrow = setInterval(function(){ drawAbout() drawProject() drawModeling() drawHP() drawAchi() drawLab() }, 1);
//Functions controling the arrow drawing
function drawAbout(){ if (aboutArrSel == 1) { if (pAbout == 100) {} else { pAbout+=1; $svgAbout.drawsvg('progress', pAbout/100); } } else if (aboutArrSel ==0){ if (pAbout == 0){ if(tlCoverAbout.progress() == 0){ $coverAbout.children(":first").siblings().css("visibility", "hidden"); } } else { pAbout-=1; $svgAbout.drawsvg('progress', pAbout/100); } } } function drawProject(){ if (projectArrSel == 1) { if (pProject == 100) {} else { pProject+=1; $svgProject.drawsvg('progress', pProject/100); } } else if (projectArrSel ==0){ if (pProject == 0){ if(tlCoverProject.progress() == 0){ $coverProject.children(":first").siblings().css("visibility", "hidden"); } } else { pProject-=1; $svgProject.drawsvg('progress', pProject/100); } } } function drawModeling(){ if (modelingArrSel == 1) { if (pModeling == 100) {} else { pModeling+=1; $svgModeling.drawsvg('progress', pModeling/100); } } else if (modelingArrSel ==0){ if (pModeling == 0){ if(tlCoverModeling.progress() == 0){ $coverModeling.children(":first").siblings().css("visibility", "hidden"); } } else { pModeling-=1; $svgModeling.drawsvg('progress', pModeling/100); } } } function drawHP(){ if (HPArrSel == 1) { if (pHP == 100) {} else { pHP+=1; $svgHP.drawsvg('progress', pHP/100); } } else if (HPArrSel ==0){ if (pHP == 0){ if(tlCoverHP.progress() == 0){ $coverHP.children(":first").siblings().css("visibility", "hidden"); } } else { pHP-=1; $svgHP.drawsvg('progress', pHP/100); } } } function drawAchi(){ if (achiArrSel == 1) { if (pAchi == 100) {} else { pAchi+=1; $svgAchievements.drawsvg('progress', pAchi/100); } } else if (achiArrSel ==0){ if (pAchi == 0){ if(tlCoverAchievements.progress() == 0){ $coverAchievements.children(":first").siblings().css("visibility", "hidden"); } } else { pAchi-=1; $svgAchievements.drawsvg('progress', pAchi/100); } } } function drawLab(){ if (labArrSel == 1) { if (pLab == 100) {} else { pLab+=1; $svgLab.drawsvg('progress', pLab/100); } } else if (labArrSel ==0){ if (pLab == 0){ if(tlCoverLab.progress() == 0){ $coverLab.children(":first").siblings().css("visibility", "hidden"); } } else { pLab-=1; $svgLab.drawsvg('progress', pLab/100); } } }
//Tram animation
$('#tram') .hover(function () {$(this).attr("src", "");}, function () {$(this).attr("src", "");});
});