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 white
- Fade in from black
- Sequentially fly in elements like buttons from the top or left or right
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.
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
- Fade out to white
- Fade out to black
- Sequentially fly out elements like buttons toward the top or left or right
- Or a logical combo like Fade out to white with Fly out top, but not Fly out top and Fly out left
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="https://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-->