Really Useful Javascript Animation


by Dale Stubbart

Expressive Animated Websites

To make certain that you&';re up-to-date with the latest changes to my Expressive Websites Javscript Library, and I will send you updates when I make changes.

Changes
Version 1.7 - Added greeting_horizontal and greeting_vertical to card types as these are probably the preferred card types for open method.
Modularized code more, creating common routines between methods.
Added xa_card_method variable in each method init, e.g. xa_card_rotate_init. This was needed for the common routines.
Version 1.6.1 - Corrected filter to work on first click, rather than only on subsequent clicks. Had to set to complete filter on the front of the card, rather than just opacity.
Version 1.6 - Added Filter method
Version 1.5.2 - Slower, Slowest were only working for rotate - fixed for others
Version 1.5.1 - Added Slower, Slowest
Version 1.5 - Added Card Open. Also corrected generic timing functions.
Version 1.4.2 - Added Card Rotate: switch
Version 1.4.1 - Added Card Fade: pulse
Version 1.4 - Added Card Fade
Version 1.3 - Renamed slide to scroll
Version 1.2.5 - Allowed Rotate:Degrees to specify > 360 degrees, must still be integer>0
Version 1.2.4 - Added Card Rotate:Dancer
Version 1.2.3 - Improved Superhero
Version 1.2.2 - Added Card Slide method Superhero
Version 1.2.1 - Corrected rotate speed - slow and fast were reversed
Version 1.2 - Added Card Slide method
Version 1.1.1 - Added global var xa_card_title_lines to make that more flexible - only applies to playing cards.
Version 1.1 - Rewrote to separate functions by method, rather than trying to have one generic routine
xa_flipcard_init became xa_card_init. Added xa_card_size_init, xa_card_rotate_init, xa_card_rotate_degrees_init. Five inits make the head section a little longer, but allow changes to defaults between routines.
xa_flipcard became xa_card_rotate_build. Version 1.0 - Added xa_animate_init(), xa_flipcard_init(), xa_flipcard().

If you want your website to be more expressive - with simple animation - please use my xa_animate.js javascript library. If you do use xa_animate.js, etc., attributions are helpful, links are more helpful, posting articles is most helpful, and donations (link at top of page) are always helpful. (Helpful to me and to others who could benefit from this library. Donations offset my webhosting and usage costs which go up when more people use my code.)
xa_animate.js contains several functions which are explained below. You have two options for using xa_animate.js. You can download files to your desktop and upload them to your website, or you can link directly to my code.
Downloading ... Your code is static until you download again. If I change the code, it doesn&';t affect you.
Click on the files below to download them. Then, upload them to your website. Finally, place <script src="yourpath/xa_animate.js"></script>. yourpath is where you upload these to on your website.
If you just want to point to my code without downloading and uploading, place https://stubbart.com/computer_consulting/code/ in place of yourpath/ above.
Whether you download or point directly to my code, please so that I can inform you of updates.

Files to Download:
Animation function library
xa_animate also executes functions in x_press. Make sure you download or point to those files also (the ones which are appropriate). xa_animate.js contains functions for simple animations. This file is quite small and will load fast.

Animations provided - Cards
Cards are playing cards, business cards, or greeting cards. Cards can be used for key people in your company. I use them for Casts of Characters in my books.Playing cards are vertical, business cards are horizontal. Cards have an picture on the front and additional info on the back. The user click on the card or hovers over a card to switch between front and back of card. Playing cards have a title above or below the picture. Business Cards can have info to the left or right of the picture. This info can be the title, but could also include contact info (or anything else). Informational lines must be separated by <br>. In other words, they must not wrap. (Otherwise, I can&';t easily tell how many lines there are.) Number of title lines on a playing card is variable xa_card_title_lines. All titles are the same number of lines. Cards be be transformed by Rotating, Scrolling the front of the card. Follow those links for that documentation.

Global Variables are set in xa_..._init functions. You can override those variables after you execute that function. Init routines are typically executed in the <head> section of an html page.
xa_animate.js is composed of animation functions, card functions, and card transformation method functions. Animation functions are the outermost, then card functions, then card transformation method functions.

xa_animate_init

In the <head> section of your html page, call xa_animate_init(). No parameters are passed. This sets xa_animate_version to the current version of this javascript library.

xa_card_init

In the <head> section of your html page, call xa_card_init(). No parameters are passed. This sets the default values for: xa_card_type='business'; Value is business, playing, greeting_horizontal, greeting_vertical.
xa_card_title_lines=0; Number of lines in title, does not apply to business cards. Typically 2.
xa_card_background_color=''; Value is any html/css value for any color. All cards have a background color. If you don&';t override the default, and it will be the background color of the div where the card is being built.

In the <head> section of your html page, call xa_card_size_init(). No parameters are passed. This sets the default values for: xa_card_size=['width:wpx;height:hpx',w,h]; w is width, h is height. Size is based on xa_card_type. The first element of the array is for the style. The second and third, width and height are for calculations.

You will probably use xa_card_rotate_build with multiple cards. I use it with my books on my website for Casts of Characters.
Cards are business cards or playing cards. An image and a title/info is displayed on the front of the card.

Each card has an id. Call xa_card_rotate_build (or other card build routine) as <div id="card01"></div><script>xa_card_rotate_build(card_front_img,card_front_info,card_back_info,xa_el)</script>. I find it helpful to number the card ids. This id is used as the first part of the id of divs which are built inside that div (card01) to display the card. That is, it is used in these divs &n-; card01_container, card01_side, card01_rotater / card01_scroller, card01_front, card01_back.
The background color if not set, would be the background color of card01 in this case. I use whitesmoke as the background color for magic cards. You might want to use a background color which is slightly darker or lighter than the background color of card01. For a darker color:
x=x_color('card01','background');// get the background color of card01
x=x_color_shift(x,-16,-16,-16); // shift color by adding -16 to red, green, and blue
xa_card_background_color=x;

For a lighter color:
x=x_color('card01','background');
x=x_color_shift(x,16,16,16);
xa_card_background_color=x;

x_color and x_color_shift are functions in x_press. See that documentation for more information.
Typically, the values set by the init routine are set once for each deck of cards. Typically, there is only one deck per webpage. So they can be set in the <head> section.

Rotating, Scrolling, Fading, Sliding, Opening, Filtering (As in Camera Filter). A deeper look at how this works