To place cards on your website such that the front can be filtered (brightness, contrast, ...) to reveal the back, use these scripts in the <head> section of your html page. xa_animate_init() &n-; Init the overall animation xa_card_init() &n-; Init the cards xa_card_size_init() &n-; Init the card size xa_card_filter_init() &n-; Init the card filter variables. You can override them afterwards. xa_card_filter_event='click'; Value is click or hover. xa_card_filter_speed='normal'; Value is slowest, slower, slow, normal, fast. Slowest seems to work best for the filter method. xa_card_filter_type=['standard',out, nearzero, fade percent]; out is 100% fade (using opacity filter), nearzero is 80% fade. Value of first element is standard, flash, pulse, or any transition-timing-function including cubic-bezier which gives you further control. cubic-bezier is used for flash and pulse. standard is linear. xa_card_filter_attributes=[]; xa_card_filter_attributes is set to an empty array. You can add filters, by setting the array to include any combination of these filters: [blur, brightness, darkness, contrast, similarity, grayscale, hue-rotate, invert, saturate, sepia]. darkness is the opposite of brightness, don&';t use them both together. similarity is the opposite of contrast, don&';t use them both together. hue-rotate filters through all 360 degrees of hue-rotation. Also available, are hue-rotate1 through hue-rotate6. hue-rotate1 is 60 degrees, hue-rotate2 is 120 degrees, etc. Use only one hue-rotate... filter, if any. hue-rotate1 is yellow, 2 is green, 3 is aqua, 4 is blue, 5 is violet, 6 is red. The opacity filter is added to other filters you specify, if any. If you do not specify any filters, the opacity filter is used. Other filters default to using a similar percent to the opacity filter. You can override this. xa_card_filter_percent_init &n-; sets the from, to filter percent. out filters transparency (opposite of opacity) at 100%. nearzero filters 80%. You can also specify the transparent percent. Other filters are set to corresponding values based on this percentage. xa_card_filter_percent=[[from,to],[from,to],...]; From/to percentages are set for each filter.
xa_card_filter_build(card_front_img,card_front_info,card_back_info,xa_el) xa_card_filter_build will build a card which will apply the filters when the user clicks or hovers to reveal the back of the card. This function will build the card where you specify, with the info you want.
card_front_img is the url of the image for the front of the card. For business cards, the img covers 1/2 of the card. For playing cards, the img covers the entire card, except the space for the lines specified for the title by xa_card_title_lines. card_front_info is an array of the info/title placement and the info or title. The placement is top, bottom, left, or right. For business cards, placement is typically left or right. For playing cards, placement is typically top or bottom and is for a title. For playing cards, the title is assumed to be 2 lines which goes above or below the card. For business cards the info (or title) goes within the card. The info is vertically centered by counting the number of <br>'s within the info. I could have gotten more fancy with this, but decided to keep it simple. card_back_info is the info on the back of the card. The info on the back of the card typically contains <p> and other simple html tags. You can include styles, and whatever. xa_el is the element (normally a div) which will contain the card. card01 in this example.
The entire card deck should look something like: <div><div id="card01" style="float:left;margin:.5em;"></div><script>xa_card_filter_build(card_front_img,card_front_info,card_back_info,"card01")</script><div id="card02" style="float:left;margin:.5em;"></div><script>xa_card_filter_build(card_front_img,card_front_info,card_back_info,"card02")</script>...</div>
Example: Select a filter type (select a value from both lines). Then check any filters from the third line. Multiple filters are fine. None uses the opacity filter. (Opacity is added to the selected filters, if any.) Click Submit. Then click on the card to filter. Because you are selecting filters, rather than setting them in the <head> section of your html, the first click of the card will not represent what you will normally see. The other clicks will be what you will see. Speed is set to slowest.