Line 1: | Line 1: | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
var $coverAboutTeam = $('#coverAboutTeam'), | var $coverAboutTeam = $('#coverAboutTeam'), | ||
− | + | $coverAboutAttribution = $('#coverAboutAttribution'), | |
− | + | $coverAbout = $('#coverAbout'); | |
− | $coverAboutAttribution | + | |
− | + | $coverAboutAttribution.lettering(); // wrap <span class="charx"/ > around each character within the element | |
+ | $coverAboutTeam.lettering(); | ||
+ | |||
var $coverAboutTeamSpans = $coverAboutTeam.find('span'), | 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); | + | |
− | + | /*Variable for strand centering*/ | |
− | var contentHeight = document.getElementById("content_wrapper").style.height; | + | console.log(coverWindowHeight); |
− | console.log(contentHeight); | + | document.getElementById("content_wrapper").style.height = coverWindowHeight + "px"; |
+ | var contentHeight = document.getElementById("content_wrapper").style.height; | ||
+ | console.log(contentHeight); | ||
+ | |||
+ | /*Animation*/ | ||
tlCoverAbout | tlCoverAbout | ||
− | .staggerFrom($coverAboutTeamSpans, 0.1, | + | .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); | |
− | .staggerFrom($coverAboutAttributionSpans, 0.1, | + | |
− | + | ||
$("#coverAbout").click(function(){console.log(1);}); | $("#coverAbout").click(function(){console.log(1);}); | ||
$coverAbout.hover( | $coverAbout.hover( |
Revision as of 03:30, 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, onStart: aboutArrowsAppear }), $svgAbout = $('svg').drawsvg(), $aboutTab = document.getElementById("coverAboutTab"), p = 0, arrowSel = 0, coverWindowHeight = $(window).height();
/*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, 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(); }, 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; }
});