Freestyle Academy

Back to list of all examples

Useful Stuff About:
Landing Page V2

The landing page animation has 2 parts - a div that covers your whole page and another div that contains the name to be clicked. This effect requires these scripts

Paste the following in your .js file just under the 1st "use strict".


$("#centeringDiv").fadeOut(1);//Make all content transparent
$("#coverAll").css({
    "top":0,//set coverAll to start at top of browser
    "height":$(window).height()//give coverAll the height of the browser
});
$("#nameBox").click(function(){
	$("#nameBox").transition({
		y:"-=400px"	//Shifts nameBox up
	}, 2000, "easeOutExpo");//ANY transition function will work
	$("#centeringDiv").delay(500).fadeIn(3000);//fades IN main content after some delay
	$("#coverAll").delay(500).fadeOut(3000,function(){//fades OUT coverAll
		$("#coverAll").remove();	//removes coverAll AFTER the fade is complete
	});
});

This HTML is required - paste it in just under the <body> tag in the html page


<div id="coverAll">
  <div id="nameBox">Freestyle Academy</div>
</div>

This CSS is required - paste it in your styles sheet


#coverAll {
	width:100%;
	height:100%;
	background-color:rgba(200,200,200,1.00);
	position:absolute;
	top:-100%;/*gets it out of the way so designing real content is easier*/
	left:0;
	display:-webkit-flex;/*REQUIRED for Safari, Chrome, Opera*/
	dislay:flex;/*REQUIRED for Firefox*/
	align-content:center;/*REQUIRED vertical centering*/
	z-index:20000;/*ensures to be on top of everything*/
}
#nameBox {
	width: 800px;
	height: 150px;
	background-color: rgba(44,119,5,1.00);
	border-radius: 50px;
	margin: auto !important;/*REQUIRED for horizontal and vertical centering to browser window*/
	font-size:4em;
	cursor:pointer;
	z-index:20001;
	text-align:center;
}