Line 96: | Line 96: | ||
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+")"); | + | $circleContainer.css("transform", "scale("+coverWindowHeight/648+"), translate(-50%, -50%)"); |
/*Animation*/ | /*Animation*/ |
Revision as of 03:41, 12 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(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", "
");});
});