To place cards on your website such that the front can be slid to reveal the back, use these scripts in the <head> section of your html page. Functionally, slide is similar to scroll. Difference is that only front of card slides. In scroll, entire card slides. Also scroll only allows left/up, slide offers left/down/up/right. Code-wise, slide is similar to fade. 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_slide_init() &n-; Init the card slide variables. You can override them afterwards. xa_card_slide_event='click'; Value is click or hover. xa_card_slide_speed='normal'; Value is slowest, slower, slow, normal, fast. Specify fast for superhero &n-; see below. xa_card_slide_type=['standard',up/down/left/right]; up/down/left/right is based on xa_card_type. up for Playing, left for Business. Value of first element is standard, superhero, or any transition-timing-function including cubic-bezier which gives you further control. cubic-bezier is used for superhero. standard is linear. xa_card_slide_percent_init &n-; sets the x,y slide percent. xa_card_slide_percent=[x,y]; Set on the front div. standard sets the transition-timing-function to linear. superhero sets it to cubic-bezier(1, .5, .5, 1). This makes the front of the card start slideing slowly, then speed up towards the end. up/down/left/right is the slideing direction. This should be left/right for business cards and up/down for playing.
xa_card_slide_build(card_front_img,card_front_info,card_back_info,xa_el) xa_card_slide_build will build a card which will slide 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_slide_build(card_front_img,card_front_info,card_back_info,"card01")</script><div id="card02" style="float:left;margin:.5em;"></div><script>xa_card_slide_build(card_front_img,card_front_info,card_back_info,"card02")</script>...</div>
Example: Select a slide type and click Submit. Then click on the card to slide.