Line 2: | Line 2: | ||
var $coverAboutTeam = $('#coverAboutTeam'), | var $coverAboutTeam = $('#coverAboutTeam'), | ||
$coverAboutAttribution = $('#coverAboutAttribution'), | $coverAboutAttribution = $('#coverAboutAttribution'), | ||
− | $coverAbout = $('#coverAbout'); | + | $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 <span class="charx"/ > around each character within the element | $coverAboutAttribution.lettering(); // wrap <span class="charx"/ > around each character within the element | ||
$coverAboutTeam.lettering(); | $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'), | var $coverAboutTeamSpans = $coverAboutTeam.find('span'), | ||
$coverAboutAttributionSpans = $coverAboutAttribution.find('span'), | $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}), | tlCoverAbout = new TimelineMax({paused: true}), | ||
− | $svgAbout = $(' | + | 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(), | ||
+ | $svgProject = $('#svgProject').drawsvg(), | ||
+ | $svgModeling = $('#svgModeling').drawsvg(), | ||
+ | $svgHP = $('#svgHP').drawsvg(), | ||
+ | $svgAchievements = $('#svgAchievements').drawsvg(), | ||
+ | $svgLab = $('#svgLab').drawsvg(), | ||
$aboutTab = document.getElementById("coverAboutTab"), | $aboutTab = document.getElementById("coverAboutTab"), | ||
+ | $projectTab = document.getElementById("coverProjectTab"), | ||
+ | $modelingTab = document.getElementById("coverModelingTab"), | ||
+ | $hpTab = document.getElementById("coverHPTab"), | ||
+ | $achievementsTab = document.getElementById("coverAchievementsTab"), | ||
+ | $labTab = document.getElementById("coverLabTab"), | ||
p = 0, | p = 0, | ||
arrowSel = 0, | arrowSel = 0, | ||
Line 29: | Line 88: | ||
.staggerFrom($coverAboutTeamSpans, tlDuration, {left:"-=10px", autoAlpha:0.2}, 0.05, 0) | .staggerFrom($coverAboutTeamSpans, tlDuration, {left:"-=10px", autoAlpha:0.2}, 0.05, 0) | ||
.staggerFrom($coverAboutAttributionSpans, tlDuration, {left:"-=10px", opacity:0.2}, 0.05, 0); | .staggerFrom($coverAboutAttributionSpans, tlDuration, {left:"-=10px", opacity:0.2}, 0.05, 0); | ||
− | |||
$coverAbout.hover( | $coverAbout.hover( | ||
function() { | function() { | ||
console.log(500-p+"its on"); | console.log(500-p+"its on"); | ||
− | $aboutTab.style.background = "url( | + | $aboutTab.style.background = "url(DNAStrandSpriteFocus.png) 0 -365px"; |
aboutArrowsAppear(); | aboutArrowsAppear(); | ||
clearTimeout(ArrowsDisappearDelay); | clearTimeout(ArrowsDisappearDelay); | ||
Line 46: | Line 104: | ||
tlCoverAbout.reverse(); | tlCoverAbout.reverse(); | ||
clearTimeout(tlPlayDelay); | clearTimeout(tlPlayDelay); | ||
− | $aboutTab.style.background = "url( | + | $aboutTab.style.background = "url(DNAStrandSprite.png) 0 -365px"; |
if (tlProgress == 0) {aboutArrowsDisappear();} | if (tlProgress == 0) {aboutArrowsDisappear();} | ||
else { | else { | ||
Line 70: | Line 128: | ||
} | } | ||
}, 1); | }, 1); | ||
− | |||
− | |||
}); | }); |
Revision as of 10:52, 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'), $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}), 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(), $svgProject = $('#svgProject').drawsvg(), $svgModeling = $('#svgModeling').drawsvg(), $svgHP = $('#svgHP').drawsvg(), $svgAchievements = $('#svgAchievements').drawsvg(), $svgLab = $('#svgLab').drawsvg(), $aboutTab = document.getElementById("coverAboutTab"), $projectTab = document.getElementById("coverProjectTab"), $modelingTab = document.getElementById("coverModelingTab"), $hpTab = document.getElementById("coverHPTab"), $achievementsTab = document.getElementById("coverAchievementsTab"), $labTab = document.getElementById("coverLabTab"), p = 0, arrowSel = 0, coverWindowHeight = $(window).height(), tlPlayDelay, ArrowsDisappearDelay, tlDuration = 0.1;
/*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*/
tlCoverAbout .staggerFrom($coverAboutTeamSpans, tlDuration, {left:"-=10px", autoAlpha:0.2}, 0.05, 0) .staggerFrom($coverAboutAttributionSpans, tlDuration, {left:"-=10px", opacity:0.2}, 0.05, 0); $coverAbout.hover( function() { console.log(500-p+"its on"); $aboutTab.style.background = "url(DNAStrandSpriteFocus.png) 0 -365px"; aboutArrowsAppear(); clearTimeout(ArrowsDisappearDelay); if (p == 100){tlCoverAbout.play();} else { tlPlayDelay = setTimeout(function(){ tlCoverAbout.play(); }, 500-p); } }, function() { var tlProgress = tlCoverAbout.progress(); console.log("its off"); tlCoverAbout.reverse(); clearTimeout(tlPlayDelay); $aboutTab.style.background = "url(DNAStrandSprite.png) 0 -365px"; if (tlProgress == 0) {aboutArrowsDisappear();} else { ArrowsDisappearDelay = setTimeout(function(){ aboutArrowsDisappear(); }, (tlProgress*tlDuration+0.25)*1000); } }); var myArrow = setInterval(function(){ if (arrowSel == 1) { if (p == 100) {} else { p+=1; $svgAbout.drawsvg('progress', p/100); console.log(p); } } else if (arrowSel ==2){ if (p == 0){} else { p-=1; $svgAbout.drawsvg('progress', p/100); console.lo(p); } } }, 1);
});