Line 90: | Line 90: | ||
/*Variable for strand centering*/ | /*Variable for strand centering*/ | ||
− | + | console.log(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); |
/*Animation*/ | /*Animation*/ |
Revision as of 11:18, 5 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, projectArrSel = 0, modelingArrSel = 0, HPArrSel = 0, achiArrSel = 0, labArrSel = 0, coverWindowHeight = $(window).height(), tlPlayDelay, aboutArrDisappearDelay, projectArrDisappearDelay, modelingArrDisappearDelay, HPArrDisappearDelay, achiArrDisappearDelay, labArrDisappearDelay, tlDuration = 0.1; var tlEntry = new TimelineMax(), $circleContainer = $("#circleContainer");
/*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*/
tlEntry .from($circleContainer, 1, {scale:0.1, rotation:-180, ease:Power4.easeIn}) .to($circleContainer, 2, {autoAlpha: 1}, 0) 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); $coverAbout.hover(function(){ coverHoverIn('About', '0 -365px')}, function(){coverHoverOut('About', '0 -365px')} ); $coverProject.hover( function(){coverHoverIn('Project', '0 -729px')}, function(){coverHoverOut('Project', '0 -729px')} ); $coverModeling.hover( function(){coverHoverIn('Modeling', '0 -1093px')}, function(){coverHoverOut('Modeling', '0 -1093px')} ); $coverHP.hover( function(){coverHoverIn('HP', '0 -1457px')}, function(){coverHoverOut('HP', '0 -1457px')} ); $coverAchievements.hover( function(){coverHoverIn('Achievements', '-700px -366px')}, function(){coverHoverOut('Achievements', '-700px -366px')} ); $coverLab.hover( function(){coverHoverIn('Lab', '-697px -729px')}, function(){coverHoverOut('Lab', '-697px -729px')} );
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); console.log("here"); if (pProject == 100){console.log("here2"); tlCoverProject.play();} else {console.log("here3"); 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; } } var myArrow = setInterval(function(){ drawAbout() drawProject() drawModeling() drawHP() drawAchi() drawLab() }, 1);
function drawAbout(){ if (aboutArrSel == 1) { if (pAbout == 100) {} else { pAbout+=1; $svgAbout.drawsvg('progress', pAbout/100); } } else if (aboutArrSel ==0){ if (pAbout == 0){} 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){} 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){} 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){} 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){} 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){} else { pLab-=1; $svgLab.drawsvg('progress', pLab/100); } } }
});