Javascript: Polygon

Screen Shot 2013-12-09 at 6.25.27 PM

 

The Javascript in Polygon’s website is pretty cool, but is also a little distracting to me. I think that is the borderline that Java always straddles. When you first get to the page, the screen shot above is what you see, but as you scroll down you get to the actual page.

Screen Shot 2013-12-09 at 6.25.47 PM

 

I like that it seems like we have a cover page and are moving into a book, but I don’t think it necessarily matches with the rest of the website. The code is below.

// Check cookie outside DOM ready so there’s no flash
if (!$.cookie(‘console_launch_cover_both_nov-2013’)){
$(‘body’).addClass(‘polygon-cover-running’);
$(‘#polygon-fp-cover’).show();
$(‘#polygon-fp-cover’).height($(window).height());
} else {
$(‘#polygon-cover-teaser’).show();
$(‘#polygon-cover-teaser’).on(‘click’, function(e){
e.preventDefault();
$.removeCookie(‘console_launch_cover_both_nov-2013’, { path: ‘/’ });
document.location.reload();
});
}
$(function(){
var windowHeight;
var coverScrollDistance;
var mostRecentScrolledPosition;
var handleResize = function() {
windowHeight = $(window).height();
coverScrollDistance = windowHeight / 3;
var $cover = $(‘.m-fp-cover’);
$cover.height(windowHeight);
};
var coverSetup = function() {
var $cover = $(‘.m-fp-cover’);
var coverElement = $(‘.m-fp-cover’).get(0);
var $wrapper = $(‘.l-global-wrapper’);
var $body = $(‘body’);
handleResize();
$body.addClass(‘polygon-cover-running’);
$cover.height(windowHeight);
var mostRecentScrolledPosition = 0;
var wasAdded = false;
var wasRemoved = false;
var scrollHandler = function() {
mostRecentScrolledPosition = $(window).scrollTop();
setCoverPosition();
}
var setCoverPosition = function() {
// If we’ve scrolled more than the height of of the window than behave normally
if (mostRecentScrolledPosition > coverScrollDistance) {
if(!wasRemoved){
$body.removeClass(‘polygon-cover-running’);
$wrapper.removeClass(‘polygon-cover-running’);
$cover.css({‘margin-top’:’0′, ‘display’:’none’});
$wrapper.css(‘margin-top’, coverScrollDistance);
$.cookie(‘console_launch_cover_both_nov-2013’, ‘true’, { expires: 30, path: ‘/’ });
wasRemoved = true;
wasAdded = false; // reset this
}
} else if (mostRecentScrolledPosition >= 0) {
// This is where we move the cover
coverElement.style.top = -(mostRecentScrolledPosition * 2)+”px”;
if(!wasAdded){
$cover.css({‘display’:’block’});
$wrapper.css(‘margin-top’, ‘0’);
$wrapper.addClass(‘polygon-cover-running’);
$body.addClass(‘polygon-cover-running’);
wasAdded = true;
wasRemoved = false; // reset this
}
}
};
$(document).scroll(_.throttle(scrollHandler, 50));
$(‘.m-scroll-instructor’).on(‘click’, function(e){
e.preventDefault();
$(‘html,body’).animate({
scrollTop: windowHeight / 3
}, 800);
});
};
if(!$.cookie(‘console_launch_cover_both_nov-2013’) && !Vox.Environment.touch()) {
handleResize();
$(window).resize(_.debounce(handleResize, 300));
coverSetup();
} else if (Vox.Environment.touch()) {
$.cookie(‘console_launch_cover_both_nov-2013’, ‘true’, { expires: 30, path: ‘/’ });
}
if (navigator.msMaxTouchPoints > 0) {
$(‘.m-fp-cover’).css(‘position’, ‘static’);
}
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s