JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size




Back to list of all examples

Useful Stuff About:

Intro and Outro Animations

Webpages can more elegantly appear rather than just appear suddenly. You can alternatively use jquery to make your pages load into the browser with

Article 1 Content
Article 1 Content
Article 1 Content
Article 1 Content
Article 1 Content

<!--Copy this Intro and Outro Animations block of code and paste it in UNDER your transit.js line in your html page-->
<script src=""></script><!--REQUIRED for INTRO & OUTRO animations-->
//variables for INTRO animations - CHANGE AS DESIRED
var fadeTime=4000, flyTime = 1000, delayFadeStart = 1500, delayTime=250, easingMethod = "easeOutQuint";//time is in milliseconds
//variable for OUTRO animations - REQUIRED to put in your own username
var username="AdamP", fadeColor="#00FF1A";
$(document).ready(function() {//UNcomment one or a combo of the following below INTRO animations
$(".btn").css({"opacity":"0"});//only needed if flying buttons, comment out if not using flying buttons
}, fadeTime+delayFadeStart);
function executeOutroAnimation(){//UNcomment one of the following below OUTRO animations
var totalBtns = $(".btn").length;
}, delayTime * totalBtns);//if NOT flying buttons, change delayTime * totalBtns to 0
<!--End of Intro and Outro Animations block of code-->