Line 91: | Line 91: | ||
function() { | function() { | ||
console.log(500-p+"its on"); | console.log(500-p+"its on"); | ||
− | $aboutTab.style.background = "url(DNAStrandSpriteFocus.png) 0 -365px"; | + | $aboutTab.style.background = "url(https://static.igem.org/mediawiki/2016/3/36/T--Hong_Kong_HKUST--DNAStrandSpriteFocus.png) 0 -365px"; |
aboutArrowsAppear(); | aboutArrowsAppear(); | ||
clearTimeout(ArrowsDisappearDelay); | clearTimeout(ArrowsDisappearDelay); | ||
Line 104: | Line 104: | ||
tlCoverAbout.reverse(); | tlCoverAbout.reverse(); | ||
clearTimeout(tlPlayDelay); | clearTimeout(tlPlayDelay); | ||
− | $aboutTab.style.background = "url(DNAStrandSprite.png) 0 -365px"; | + | $aboutTab.style.background = "url(https://static.igem.org/mediawiki/2016/3/36/T--Hong_Kong_HKUST--DNAStrandSprite.png) 0 -365px"; |
if (tlProgress == 0) {aboutArrowsDisappear();} | if (tlProgress == 0) {aboutArrowsDisappear();} | ||
else { | else { |
Revision as of 11:06, 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() 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() 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);
});