Retro Looking Text Flip Effect with jQuery and CSS3 - bFlipText

File Size: 5.33 KB
Views Total: 4880
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Retro Looking Text Flip Effect with jQuery and CSS3 - bFlipText

bFlipText is a jQuery plugin which utilizes CSS3 magic to create retro looking flip effect on given text like the split flap display.

See also:

How to use it:

1. Load jQuery library and the jQuery bFlipText plugin's stylesheet & JavaScript into the webpage.

<link rel="stylesheet" href="jquery.bFlipText.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.bFlipText.js"></script>

2. Create an empty for the split flap display.

<div id="demo"></div>

3. Call the plugin on the empty container and specify the text on where you wish to apply the flip effect.

$('#demo').bFlipText({text: 'Text Here'});

4. Style the split flap display.

var my_style = {// CUSTOM STYLES HERE};
$('#demo').bFlipText({text: 'Text Here',css: my_style});

This awesome jQuery plugin is developed by bilalhdh. For more Advanced Usages, please check the demo page or visit the official website.