Line 1: | Line 1: | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
var $coverAboutTeam = $('#coverAboutTeam'), | var $coverAboutTeam = $('#coverAboutTeam'), | ||
− | + | $coverAboutAttribution = $('#coverAboutAttribution'), | |
− | + | $coverAbout = $('#coverAbout'); | |
$coverAboutAttribution.lettering(); // wrap <span class="charx"/ > around each character within the element | $coverAboutAttribution.lettering(); // wrap <span class="charx"/ > around each character within the element | ||
Line 8: | Line 8: | ||
var $coverAboutTeamSpans = $coverAboutTeam.find('span'), | var $coverAboutTeamSpans = $coverAboutTeam.find('span'), | ||
− | + | $coverAboutAttributionSpans = $coverAboutAttribution.find('span'), | |
− | + | tlCoverAbout = new TimelineMax({paused: true}), | |
− | + | $svgAbout = $('svg').drawsvg(), | |
− | + | $aboutTab = document.getElementById("coverAboutTab"), | |
− | + | p = 0, | |
− | + | arrowSel = 0, | |
− | + | coverWindowHeight = $(window).height(), | |
− | + | tlPlayDelay, | |
− | + | ArrowsDisappearDelay, | |
− | + | tlDuration = 0.1; | |
/*Variable for strand centering*/ | /*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*/ | /*Animation*/ | ||
tlCoverAbout | tlCoverAbout | ||
− | .staggerFrom($coverAboutTeamSpans, | + | .staggerFrom($coverAboutTeamSpans, tlDuration, {left:"-=10px", autoAlpha:0.2}, 0.05, 0) |
− | .staggerFrom($coverAboutAttributionSpans, | + | .staggerFrom($coverAboutAttributionSpans, tlDuration, {left:"-=10px", opacity:0.2}, 0.05, 0); |
$coverAbout.click(function(){console.log(1);}); | $coverAbout.click(function(){console.log(1);}); | ||
$coverAbout.hover( | $coverAbout.hover( | ||
Line 34: | Line 34: | ||
console.log("its on"); | console.log("its on"); | ||
$aboutTab.style.background = "url(https://static.igem.org/mediawiki/2016/4/4c/T--Hong_Kong_HKUST--singleStrand_focus.png) 0 0"; | $aboutTab.style.background = "url(https://static.igem.org/mediawiki/2016/4/4c/T--Hong_Kong_HKUST--singleStrand_focus.png) 0 0"; | ||
− | tlCoverAbout.play(); | + | aboutArrowsAppear(); |
+ | clearTimeout(ArrowsDisappearDelay); | ||
+ | if (p == 100){tlCoverAbout.play();} | ||
+ | else { | ||
+ | tlPlayDelay = setTimeout(function(){ tlCoverAbout.play(); }, 200-p); | ||
+ | } | ||
}, | }, | ||
function() { | function() { | ||
+ | var tlProgress = tlCoverAbout.progress(); | ||
console.log("its off"); | console.log("its off"); | ||
tlCoverAbout.reverse(); | tlCoverAbout.reverse(); | ||
+ | clearTimeout(tlPlayDelay); | ||
$aboutTab.style.background = "url(https://static.igem.org/mediawiki/2016/5/52/T--Hong_Kong_HKUST--singleStrand.png) 0 0"; | $aboutTab.style.background = "url(https://static.igem.org/mediawiki/2016/5/52/T--Hong_Kong_HKUST--singleStrand.png) 0 0"; | ||
− | aboutArrowsDisappear(); | + | if (tlProgress == 0) {aboutArrowsDisappear();} |
+ | else { | ||
+ | ArrowsDisappearDelay = setTimeout(function(){ aboutArrowsDisappear(); }, tlProgress*tlDuration+0.1); | ||
+ | } | ||
}); | }); | ||
var myArrow = setInterval(function(){ | var myArrow = setInterval(function(){ |
Revision as of 05:43, 17 August 2016
$(document).ready(function(){
var $coverAboutTeam = $('#coverAboutTeam'), $coverAboutAttribution = $('#coverAboutAttribution'), $coverAbout = $('#coverAbout');
$coverAboutAttribution.lettering(); // wrap around each character within the element
$coverAboutTeam.lettering();
var $coverAboutTeamSpans = $coverAboutTeam.find('span'), $coverAboutAttributionSpans = $coverAboutAttribution.find('span'), tlCoverAbout = new TimelineMax({paused: true}), $svgAbout = $('svg').drawsvg(), $aboutTab = document.getElementById("coverAboutTab"), 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.click(function(){console.log(1);}); $coverAbout.hover( function() { console.log("its on"); $aboutTab.style.background = "url() 0 0"; aboutArrowsAppear(); clearTimeout(ArrowsDisappearDelay); if (p == 100){tlCoverAbout.play();} else { tlPlayDelay = setTimeout(function(){ tlCoverAbout.play(); }, 200-p); } }, function() { var tlProgress = tlCoverAbout.progress(); console.log("its off"); tlCoverAbout.reverse(); clearTimeout(tlPlayDelay); $aboutTab.style.background = "url() 0 0"; if (tlProgress == 0) {aboutArrowsDisappear();} else { ArrowsDisappearDelay = setTimeout(function(){ aboutArrowsDisappear(); }, tlProgress*tlDuration+0.1); } }); 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); function aboutArrowsAppear(){ arrowSel = 1; } function aboutArrowsDisappear(){ arrowSel = 2; }
});