What you need:
– Basic knowledge in HTML and CSS.
– A Mac and Xcode (no programming skills required) for exporting the app.

Card-Flip Effect

This module provides a card flip effect. It uses the 3D rotation class for jQuery from http://www.zachstronaut.com/projects/rotate3di/. Cards can be placed in “medium-column”, “large-column” and “full-column” columns. They work in a desktop browser as well as on iOS devices and the implementation consists of three parts:

Part 1 – Enabling the required javascript libraries in the section

In order to work properly, you must include two javascript libraries in the section:

<!--Card Flip Effect-->
<script type="text/javascript" src="js/jquery-css-transform.js"></script>
<script type="text/javascript" src="js/rotate3Di.js"></script>

Part 2 – Build your cards

A card has a front and a back side. Take a look at the markup, it’s pretty self explanatory. The styling of the cards are stored in “card-flip.css”. Feel free to modify them according to your needs. You can include as many cards on one page as you like.

<div class="card-flip">

    <div class="front">
        <div class="flip-arrow"><img src="images/flip-arrow.png" width="49" height="48" /></div>
            <div class="card-flip-text">
           		 <p>Front. Insert here text / images.</p>
            </div><!--Div card-flip-text-->
        </div><!--Div front-->

     <div class="back">
        <div class="flip-arrow-back"><img src="images/flip-arrow-back.png" width="49" height="48" /></div>
            <div class="card-flip-text">
            	<p>Back. Insert here text / images. </p>
            </div><!--Div card-flip-text-->
        </div><!--Div back-->

</div><!--Div card-flip-->

Part 3 – Initiate the card-flip effect

AFTER the markup of all your cards, you have to initiate the effect:

<!--Initiate Card-Flip-Script after all cards have been loaded-->
<script type="text/javascript" src="js/card-flip.js"></script>

Laker is now on github! Please discuss issues, suggestions or tipps in the github forums of Laker. Thanks! ;)

Leave a comment, suggestion or question.

You must be logged in to post a comment.