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
Freestyle Logo

Font Size

+

-

Reset

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

Introduction
Article 1 Content
Article 1 Content
Article 1 Content
Article 1 Content
Article 1 Content
Projects

<!--Copy this Intro and Outro Animations block of code and paste it in UNDER your transit.js line in your html page-->
<script src="http://www.freestyleacademy.rocks/jquery/intro-outro-animations2.js"></script><!--REQUIRED for INTRO & OUTRO animations-->
<script>
//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
fadeFromColor();
$(".btn").css({"opacity":"0"});//only needed if flying buttons, comment out if not using flying buttons
setTimeout(function(){
//flyInLeft();
flyInRight();
//flyInTop();
}, fadeTime+delayFadeStart);
});
function executeOutroAnimation(){//UNcomment one of the following below OUTRO animations
//flyOutLeft();
//flyOutRight();
flyOutTop();
var totalBtns = $(".btn").length;
setTimeout(function(){
fadeToColor();
}, delayTime * totalBtns);//if NOT flying buttons, change delayTime * totalBtns to 0
}
</script>
<!--End of Intro and Outro Animations block of code-->