Why X

gistfile1.txt

var date = function(){

	$("#counter span").remove();
	$("#counter").append("<span>" + currentDate + "</span>");
};

var reasons = $("#reasons p");
var number = $("#number");
var anotherReason = $("#another-reason");
var randReasons = 0;
var randNumber = 0;

$(reasons).hide();

var reasonToggle = function(){
	randReasons = Math.floor((Math.random()*reasons.length)+1);
	randNumber = Math.floor((Math.random()*randReasons)*(Math.random()*randReasons)+27);

	$(number).html(randNumber);
	$(reasons[randReasons]).fadeIn();
};

reasonToggle();

$(anotherReason).on("click",function(e){
	e.preventDefault(); // remove the anchor click
	reasons = $("#reasons p"); // cache all of the paragraphs
	$(reasons).hide(); // hide all of the paragraphs
	randReasons = Math.floor((Math.random()*reasons.length -1)+1); // random number multiplied by number of paragraphs + 1
	randNumber = Math.floor((Math.random()*randReasons)*(Math.random()*randReasons)+27); // totally random number

	if ($(reasons[randReasons])){
		$(number).html(randNumber);
		$(reasons[randReasons]).show();
		// console.log($(reasons[randReasons]));
	}

});

var minutes=1000*60;
var hours=minutes*60;
var days=hours*24;
var years=days*365;
var d=new Date();
var t=d.getTime();

var y=Math.round(t/days);

var currentDate = y - 9788;

var iterator = currentDate - 300;

function myLoop () {
    setTimeout(function () {
        $("#counter span").remove();
        $("#counter").append("<span>" + iterator + "</span>");
        iterator++;
        if (iterator < currentDate) {
            myLoop();
        }
    }, 10);
}

var retina = window.devicePixelRatio > 1;

if($("body").hasClass("why-x")){
	var headTop = $("header").height();
	var topTop = $("#top").height();
	var totalTop = (headTop + topTop);

	var bottom = $("#bottom");
	var brand = $("#brand");
	var xdesign = $("#xdesign");
	var sweetSpot = $("#sweet-spot");
	var yourBrand = $("#your-brand");
	
	var bigResults = $("#big-results");
	
	var lightBulb = $("#big-ideas figure");
	var bigCopy = $("#big-ideas article");
	var bigIdeas = $("#big-ideas");
	
	var bigIdeasRow = $("#big-copy,#big-dial");
	var bigResultsList = $("#big-results ul");
	var bigResultsListItems = $("#big-results ul li");
	var dial = $("#dial");

	var awards = $("#awards");
	var trophies = $("#trophies");

	var reasons = $("#reasons");

	var longest = $("#longest");
	var counter = $("#counter");

	var why = $("#why");

	var width = "";
	var height = "";
	var time = "";
	
	var firstTrigger = (0.33 * (headTop + topTop));
	var firstTriggerStop = false;

	var secondTriggerStop = false;

	var thirdTrigger = totalTop + 200;
	var thirdTriggerStop = false;
	var thirdTriggerStop2 = false;

	var fourthTrigger = thirdTrigger + 350;
	var fourthTriggerStop = false;
	var fourthTriggerStop2 = false;
	
	var fifthTriggerStop = false;
	var fifthTrigger = 1850;

	var listTrigger = 2250;
	var listTrigger2 = 2500;
	var listTrigger3 = 2750;
	var listTrigger4 = 2950;
	var listTrigger5 = 3150;

	var listTriggerStop = false;
	var listTriggerStop2 = false;
	var listTriggerStop3 = false;
	var listTriggerStop4 = false;
	var listTriggerStop5 = false;

	var sixthTrigger = 3750;
	var sixthTriggerStop = false;

	var seventhTrigger = 4550;
	var seventhTriggerStop = false;

	var eighthTrigger = 5700;
	var eighthTriggerStop = false;
			
	width = Math.round(0.23 * $("#your-brand").width());
	height = $(window).height();

	if(retina){
		width = Math.round(0.27 * $("#your-brand").width());
	}

	$(window).scroll(function(){

		var scrollHeight = $(this).scrollTop();

		// ******* First Action

		if (scrollHeight > firstTrigger && !firstTriggerStop ){

			firstTriggerStop = true;
			
			time = 600;

			$(yourBrand).height(height * 1.5).addClass("absolute");

			$(brand).animate({
				left : width
			},time/6);

			$(xdesign).animate({
				right : width
			},time/6);

			$(sweetSpot).fadeIn();

			if(!retina){
				
			}

		}

		if (scrollHeight < firstTrigger && firstTriggerStop ){
			firstTriggerStop = false;

			$(brand).animate({
				left : 0
			},time);

			$(xdesign).animate({
				right : 0
			},time);

			$(sweetSpot).fadeOut();

			$(yourBrand).height(0).removeClass("absolute");
		}

		var bOffsetLeft = ($(brand).offset().left);
		var xOffsetLeft = ($(xdesign).offset().left);

		//******* Second Trigger

		if (scrollHeight > totalTop + 50 && !secondTriggerStop ){
			secondTriggerStop = true;

			$(brand).css({
				"position" : "fixed",
				"left" : bOffsetLeft,
				"top" : 40
			});

			$(xdesign).css({
				"position" : "fixed",
				"left" : xOffsetLeft,
				"top" : 40
			});

			$(sweetSpot).css({
				"position" : "fixed",
				"left" : 0,
				"top" : 164,
				"width" : "100%"
			});

			$(yourBrand).height(height*2);
			$(bottom).height(8000);

			if(retina){
				$(sweetSpot).css({
					"top" : 141
				});
			}
		}

		if (scrollHeight < totalTop + 50 && secondTriggerStop ){
			secondTriggerStop = false;

			$(brand).css({
				"position" : "absolute",
				"left" : width,
				"top" : 0
			});

			$(xdesign).css({
				"position" : "absolute",
				"left" : "",
				"top" : 0,
				"right" : width
			});

			$(sweetSpot).css({
				"position" : "relative",
				"left" : 0,
				"top" : 125,
				"width" : "100%"
			});

			$(yourBrand).height(height);

		}

		//******* Third Trigger

		if (scrollHeight > thirdTrigger && !thirdTriggerStop){
			thirdTriggerStop = true;

			$("#your-brand aside h2").fadeIn(100);
			$("#your-brand aside p").fadeIn(1000);
		}

		if (scrollHeight < thirdTrigger && thirdTriggerStop){
			thirdTriggerStop = false;

			$("#your-brand aside h2").fadeOut(1000);
			$("#your-brand aside p").fadeOut(100);
		}

		if (scrollHeight > thirdTrigger + 50 && !thirdTriggerStop2){
			thirdTriggerStop = true;

			$("#your-brand aside").css({
				"position" : "fixed",
				"top" : 420,
				"width" : "100%",
				"left" : 0
			});

			if(retina){
				$("#your-brand aside").css({
					"top" : "auto",
					"bottom" : "2%"
				});
			}
		}

		if (scrollHeight < thirdTrigger + 50  && thirdTriggerStop2){
			thirdTriggerStop = false;

			$("#your-brand aside").css({
				"position" : "absolute",
				"top" : 570,
				"width" : "100%"
			});
		}

		//******* Fourth Trigger

		if (scrollHeight > fourthTrigger && !fourthTriggerStop){
			fourthTriggerStop = true;
			$(bigIdeas).css({
				"height" : height,
				"top" : 0
			});
		}

		if (scrollHeight < fourthTrigger && fourthTriggerStop){
			fourthTriggerStop = false;
			$(bigIdeas).css({
				"height" : 0,
				"top" : height
			});
		}

		if (scrollHeight > fourthTrigger + 100 && !fourthTriggerStop2){
			fourthTriggerStop2 = true;
			$(lightBulb).show().animate({
				"height" : "100%"
			},300);
			$(bottom).css({
				"margin-bottom" : "600px"
			});
			$(bigCopy).show().animate({
				"height": "400px",
				"padding-bottom" : "60px"
			},700);
			//console.log(fourthTriggerStop2);
		}

		if (scrollHeight < fourthTrigger + 100 && fourthTriggerStop2){
			fourthTriggerStop2 = false;
			$(lightBulb).animate({
				"height" : "0"
			},300);
			$(bottom).css({
				"margin-bottom" : "0"
			});
			$(bigCopy).animate({
				"height": "0",
				"padding-bottom" : "0"
			},700);
			//console.log(fourthTriggerStop2);
		}

		if(scrollHeight > fifthTrigger && fifthTriggerStop === false){
			fifthTriggerStop = true;
			$(bigResults)
				.animate({
					"height" : height,
					"top" : 0,
					"padding-top" : "100px"
				},500,function(){
					$(bigIdeasRow).show();
					$("#big-copy h2").slideDown(300,function(){
						$("#big-copy p").slideDown(500);
					});
					$("#big-dial figure img, #big-dial figure span").show(function(){
						$("#big-dial figure").fadeIn();
					});
				});
		}

		if(scrollHeight < fifthTrigger && fifthTriggerStop){
			fifthTriggerStop = false;
			$(bigIdeasRow).hide();
			$("#big-copy p").slideUp(300,function(){
				$("#big-copy h2").slideUp();
			});
			$("#big-dial figure img, #big-dial figure span").slideUp(function(){
				$("#big-dial figure").fadeOut(300,function(){
					$(bigResults).animate({
						"height" : 0,
						"padding-top" : "0",
						"top" : "auto",
						"bottom" : 0
					});
				});
			});
		}
		//console.log(listTriggerStop);
		
		if(scrollHeight > listTrigger && !listTriggerStop){
			listTriggerStop = true;
			//console.log(bigResultsListItems[0]);
			$(bigResultsListItems[0]).css({
				"display" : "inline-block"
			});
			$(dial).addClass("rotate-one");
		}

		if(scrollHeight < listTrigger){
			$(bigResultsListItems[0]).css({
				"display" : "none"
			});
			$(dial).removeClass("rotate-one");
		}

		if(scrollHeight > listTrigger2 && !listTriggerStop2){
			listTriggerStop2 = true;
			$(bigResultsListItems[1]).css({
				"display" : "inline-block"
			});
			$(dial).addClass("rotate-two");
		}

		if(scrollHeight < listTrigger2 && listTriggerStop2){
			listTriggerStop = false;
			$(bigResultsListItems[1]).css({
				"display" : "none"
			});
			$(dial).removeClass("rotate-two");
		}

		if(scrollHeight > listTrigger3 && !listTriggerStop3){
			listTriggerStop3 = true;
			$(bigResultsListItems[2]).css({
				"display" : "inline-block"
			});
			$(dial).addClass("rotate-three");
		}

		if(scrollHeight < listTrigger3 && listTriggerStop3){
			listTriggerStop3 = false;
			$(bigResultsListItems[2]).css({
				"display" : "none"
			});
			$(dial).removeClass("rotate-three");
		}

		if(scrollHeight > listTrigger4 && !listTriggerStop4){
			listTriggerStop4 = true;
			$(bigResultsListItems[3]).css({
				"display" : "inline-block"
			});
			$(dial).addClass("rotate-four");
		}

		if(scrollHeight < listTrigger4 && listTriggerStop4){
			listTriggerStop4 = false;
			$(bigResultsListItems[3]).css({
				"display" : "none"
			});
			$(dial).removeClass("rotate-four");
		}

		if(scrollHeight > listTrigger5 && !listTriggerStop5){
			listTriggerStop5 = true;
			$(bigResultsListItems[4]).css({
				"display" : "inline-block"
			});
			$(dial).addClass("rotate-five");
		}

		if(scrollHeight < listTrigger5 && listTriggerStop5){
			listTriggerStop5 = false;
			$(bigResultsListItems[4]).css({
				"display" : "none"
			});
			$(dial).removeClass("rotate-five");
		}

		//****** Begin Awards
		if(scrollHeight > sixthTrigger && !sixthTriggerStop){
			sixthTriggerStop = true;
			$(awards).animate({
				"height" : height,
				"top" : 0,
				"width" : "100%"
			},500,function(){
				$(trophies).slideDown(600);
			});
		}

		if(scrollHeight < sixthTrigger && sixthTriggerStop){
			sixthTriggerStop = false;
			$(trophies).slideUp(500,function(){
				$(awards).animate({
					"height" : 0,
					"top" : height,
					"width" :0
				});
			});
		}

		//***** Begin Longest Clients

		if (scrollHeight > seventhTrigger && !seventhTriggerStop){
			seventhTriggerStop = true;
			
			date();
			
			if(!retina){
				$(longest).animate({
				"height" : height,
				"padding-top" : 110
				},1000,function(){
					$(longest).children("div.row").slideDown(300,function(){
						$(counter).animate({
							"height":83
						},50,function(){
							$(counter).delay(100).animate({
								"height":166
							},50,function(){
								$(counter).addClass("no-skew");
								myLoop();
							});
						});
					});
				});
			}
			if(retina){
				$(longest).animate({
				"height" : height,
				"padding-top" : 0
				},1000,function(){
					$(longest).children("div.row").slideDown(300,function(){
						$(counter).animate({
							"height":83
						},100,function(){
							$(counter).addClass("no-skew").animate({
								"height":166
							});
						});
					});
				});
			}
		}

		if (scrollHeight < seventhTrigger && seventhTriggerStop){
			seventhTriggerStop = false;
			$(longest).children("div.row").slideUp(200,function(){
				$(longest).animate({
					"height" : 0,
					"padding-top" : 0
				},1000);
			});
		}

		//***** Begin Why

		if (scrollHeight > eighthTrigger && !eighthTriggerStop){
			eighthTriggerStop = true;
			$(why).animate({
				"left" : "0",
				"width" : "100%"
			},400,function(){
				$(why).children("aside").slideDown(200,function(){
					$(reasons).fadeIn(500,function(){
						$(why).children("ul").slideDown();
						if($(window).height() < 700 && $("body").hasClass("why-x")){
							$("body.why-x #bottom #why ul").css({
								"bottom": 50
							});
						}
					});
				});
			});
		}

		if (scrollHeight < eighthTrigger && eighthTriggerStop){
			eighthTriggerStop = false;
			$(why).children("ul").slideUp(200,function(){
				$(reasons).fadeOut(300,function(){
					$(why).animate({
						"left" : "100%",
						"width" : 0
					});
				});
			});
		}
		
	});

}