Line 31: | Line 31: | ||
$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(); | tlCoverAbout.play(); | ||
− | console.log(tlCoverAbout.progress()); | + | console.log("progress is " + tlCoverAbout.progress()); |
}, | }, | ||
function() { | function() { |
Revision as of 11:04, 16 August 2016
$(document).ready(function(){
var $coverAboutTeam = $('#coverAboutTeam'),
$coverAboutAttribution = $('#coverAboutAttribution'),
$coverAbout = $('#coverAbout');
$coverAboutAttribution.lettering();
$coverAboutTeam.lettering(); // wrap around each character within header
var $coverAboutTeamSpans = $coverAboutTeam.find('span'),
$coverAboutAttributionSpans = $coverAboutAttribution.find('span'),
tlCoverAbout = new TimelineMax({
paused: true,
onStart: aboutArrowsAppear
}),
$svgAbout = $('svg').drawsvg(),
$aboutTab = document.getElementById("coverAboutTab"),
p = 0,
arrowSel = 0,
coverWindowHeight = $(window).height();
console.log(coverWindowHeight);
document.getElementById("content_wrapper").style.height = coverWindowHeight + "px";
var contentHeight = document.getElementById("content_wrapper").style.height; console.log(contentHeight);
tlCoverAbout .staggerFrom($coverAboutTeamSpans, 0.1, {left:"+=10px", autoAlpha:0.2}, 0.05, 0.8) .staggerFrom($coverAboutAttributionSpans, 0.1, {left:"+=10px", opacity:0.2}, 0.05, 0.8); $("#coverAbout").click(function(){console.log(1);}); $coverAbout.hover( function() { console.log("its on"); $aboutTab.style.background = "url() 0 0"; tlCoverAbout.play();
console.log("progress is " + tlCoverAbout.progress());
}, function() { console.log("its off"); tlCoverAbout.reverse(); $aboutTab.style.background = "url() 0 0"; setTimeout(aboutArrowsDisappear, 500); } ); 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; }
});