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
- <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);//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;
}