Difference between revisions of "Template:Hong Kong HKUST/coverpageJS"
| Line 87: | Line 87: | ||
tlDuration = 0.1; | tlDuration = 0.1; | ||
var tlEntry = new TimelineMax(), | var tlEntry = new TimelineMax(), | ||
| − | $ | + | $circleContainer = $("#circleContainer"), |
$tramWrapper = $("#tramWrapper") | $tramWrapper = $("#tramWrapper") | ||
$tram = $("#tram"); | $tram = $("#tram"); | ||
| 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+") translate(-50%, -50%)"); |
/*Animation*/ | /*Animation*/ | ||
//Entry animation | //Entry animation | ||
tlEntry | tlEntry | ||
| − | .from($ | + | .from($circleContainer, 1, {scale:0.1, rotation:-180, ease:Power4.easeIn}) |
| − | .to($ | + | .to($circleContainer, 2, {autoAlpha: 1}, 0) |
.fromTo($tramWrapper, 2, {autoAlpha:0}, {autoAlpha:0}, 0) | .fromTo($tramWrapper, 2, {autoAlpha:0}, {autoAlpha:0}, 0) | ||
.to($tramWrapper, 2, {autoAlpha:1}, 1.1) | .to($tramWrapper, 2, {autoAlpha:1}, 1.1) | ||
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", "
");});
});
