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

These buttons below are available on your PIP to navigate to each article on your PIP to see an introduction to the project. They could also be ANY buttons that you create for ANY of your websites.

Introduction
Self-Portrait
Narrative 1
Documentary
Conceptual
Profile
Narrative 2
Innovator
Portfolio
Old PIP

 

These buttons below would be SINGLE buttons on each of your PIP Articles that allow the viewer to navigate to your website. You can more elegantly navigate away from this webpage with

 

Note: The Projects buttons is an example of a Projects button that would be added to all your project websites so that the viewer can go back to your Project Info Page from your project websites. It must have an id="btnProjects" in order for the script to work.

 

Click here to download a practice file.

 


<!--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-animations.js"></script><!--REQUIRED for INTRO & OUTRO animations-->
<script>
//variables for INTRO animations - CHANGE AS DESIRED
var fadeTime=4000, flyTime = 1000, delayTime=250, easingMethod = "easeOutQuint";//time is in milliseconds
var p1name="Self-Portrait", p2name="Narrative1", p3name="Documentary", p4name="Conceptual",
  p5name="profile", p6name="narrative2", p7name="innovator", p8name="portfolio";
//variable for OUTRO animations - REQUIRED to put in your own username
var username="UsernamE";
$(document).ready(function() {//UNcomment one or a combo of the following below INTRO animations
          fadeFromWhite();
          //fadeFromBlack();
          //flyInLeft();
          flyInRight();
          //flyInTop();
});
function executeOutroAnimation(){//UNcomment one of the following below OUTRO animations
          //fadeToWhite();
          fadeToBlack();
          //flyOutLeft();
          //flyOutRight();
          flyOutTop();
}
</script>
<!--End of Intro and Outro Animations block of code-->