Difference between revisions of "Template:Hong Kong HKUST/coverpageJS"
| Line 155: | Line 155: | ||
projectArrSel = 1; | projectArrSel = 1; | ||
clearTimeout(projectArrDisappearDelay); | clearTimeout(projectArrDisappearDelay); | ||
| − | + | if (pProject == 100){tlCoverProject.play();} | |
| − | if (pProject == 100){ | + | else {tlProjectDelay = setTimeout(function(){ tlCoverProject.play(); }, 500-pProject);} |
| − | else { | + | |
| − | + | ||
| − | + | ||
break; | break; | ||
case "Modeling": | case "Modeling": | ||
Revision as of 17:00, 7 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);
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;
}
}
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);
}
}
}
});
