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

Fade in from any color
Sequentially fly in elements like buttons from the top or left or right

Introduction

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="https://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-->