Useful Stuff About:
Landing Page V1

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

<script src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/transit.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/ui.js"></script>

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


$("#centeringDiv").fadeOut(1);//immediately fades OUT main content
$("#coverAll").css({
    "top":0,//sets coverAll to start at top of browser
    "height":$(window).height()//sets height of coverAll to the browser height
});
$("#nameBox").click(function(){
	$("#nameBox").hide("explode", {pieces:100} , 1000);//ANY transition function will work
	$("#centeringDiv").delay(500).fadeIn(3000);//after some delay, main content is faded IN
	$("#coverAll").delay(500).fadeOut(3000,function(){// fades OUT coverAll to reveal main content
		$("#coverAll").remove();//AFTER fading out, coverAll is removed	
	});
});

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%;
	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*/
	display: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;/*REQUIRED for horizontal and vertical centering*/
	font-size:4em;
	cursor:pointer;
	z-index:200001;
	text-align:center;
}

Useful Stuff About: Landing Page V1

Useful Stuff About:
Landing Page V1