Freestyle Academy

Back to list of all examples

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

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

$("#centeringDiv").fadeOut(1);//immediately fades OUT main content
"top":0,//sets coverAll to start at top of browser
"height":$(window).height()//sets height of coverAll to the browser height
$("#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>

This CSS is required - paste it in your styles sheet

#coverAll {
top:-100%;/*gets it out of the way so designing real content is easier*/
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*/