Airport Like Text Flip Animation with jQuery CSS3 splitFlap

Author: glix

Airport-Like-Text-Flip-Animation-with-jQuery-CSS3-splitFlap/.gitattributes

@@ -0,0 +1,22 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+
+# Custom for Visual Studio
+*.cs     diff=csharp
+*.sln    merge=union
+*.csproj merge=union
+*.vbproj merge=union
+*.fsproj merge=union
+*.dbproj merge=union
+
+# Standard to msysgit
+*.doc	 diff=astextplain
+*.DOC	 diff=astextplain
+*.docx diff=astextplain
+*.DOCX diff=astextplain
+*.dot  diff=astextplain
+*.DOT  diff=astextplain
+*.pdf  diff=astextplain
+*.PDF	 diff=astextplain
+*.rtf	 diff=astextplain
+*.RTF	 diff=astextplain

Airport-Like-Text-Flip-Animation-with-jQuery-CSS3-splitFlap/.gitignore

@@ -0,0 +1,4 @@
+Thumbs.db
+Desktop.ini
+.DS_Store
+.idea/

Airport-Like-Text-Flip-Animation-with-jQuery-CSS3-splitFlap/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 zemax
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Airport-Like-Text-Flip-Animation-with-jQuery-CSS3-splitFlap/README.md

@@ -0,0 +1,85 @@
+jquery-splitFlap
+================
+
+jQuery module to transform a div text into splitflap display (airport-like).
+
+[View the Demo →](http://htmlpreview.github.io/?https://github.com/zemax/jquery-splitFlap/blob/master/demo/index.html)
+
+How to use
+----------
+
+``` html
+<div class="my-splitflap">Hello World</div>
+``` 
+
+``` javascript
+$('.my-spliflap').splitFlap();
+```
+
+Options
+-------
+
+You can pass options to the function
+
+``` javascript
+// Default :
+$('.my-spliflap').splitFlap({
+	image:          'images/chars.png',
+	charsMap:       'ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789.,!?#@()+-=',
+	charWidth:      50,
+	charHeight:     100,
+	charSubstitute: ' ',
+	speed:          3,
+	speedVariation: 2,
+	text:           '',
+	textInit:       '',
+	autoplay:       true
+});
+```
+
+### image
+The path to the image used by the splitflap.
+
+You will certainly need to change *charsMap*, *charWidth* and *charHeight* if you change this.
+
+### charsMap
+The string represented in the image.
+
+### charWidth
+The width of a character in the image, in pixels.
+
+### charHeight
+The height of a character in the image, in pixels.
+
+### charSubstitute
+The character used when the string contains a character not found in the charsMap.
+
+### speed
+The speed of the rotation, in letter by seconds.
+
+### speedVariation
+Random speed added to the fixed speed.
+
+### text
+The destination text. If empty, the content of the element is used.
+
+### textInit
+The initial string the animation begin with.
+
+### autoplay
+If set to false, you'll need to start the animation manually (see below).
+
+Special options
+---------------
+
+If the string 'splitflap' is passed as options on an already existing Splitflaped div, the internal SplitFlap object is returned.
+
+With this object, you can start the animation manually by calling the animate() method.
+
+``` javascript
+// Initialise the animation
+$('.my-spliflap').splitFlap({autoplay: false});
+
+// Get the animation object and start it manually
+$('.my-spliflap').splitFlap('splitflap').animate();
+```

Airport-Like-Text-Flip-Animation-with-jQuery-CSS3-splitFlap/demo/css/layout.css

@@ -0,0 +1,30 @@
+body {
+	margin: 0;
+	padding: 0;
+	background: grey;
+	color: white;
+	
+	font-family: Tahoma, Geneva, sans-serif;
+	font-size: 24px;
+}
+
+.splitflap {
+	margin: 20px auto;
+	
+	-webkit-perspective-origin: top center;
+	   -moz-perspective-origin: top center;
+	    -ms-perspective-origin: top center;
+	        perspective-origin: top center;
+			
+	-webkit-perspective: 900px;
+	   -moz-perspective: 900px;
+	    -ms-perspective: 900px;
+	        perspective: 900px;
+}
+
+.splitflap .char {
+	-webkit-transform-style: preserve-3d;
+	   -moz-transform-style: preserve-3d;
+	    -ms-transform-style: preserve-3d;
+	        transform-style: preserve-3d;
+}

Airport-Like-Text-Flip-Animation-with-jQuery-CSS3-splitFlap/demo/images/chars.png

@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link type="text/css" rel="stylesheet" href="css/layout.css">
+<title>Split Flap</title>
+<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
+<script src="js/jquery/jquery.splitflap.js"></script>
+<script src="js/application/main.js"></script>
+</head>
+
+<body>
+	<div class="do-splitflap">Hello World !</div>
+	<div class="do-splitflap">Split Flap is fun</div>
+	<div class="click-splitflap"> #  It s nice  # </div>
+	<div class="empty-splitflap"></div>
+</body>
+</html>

Airport-Like-Text-Flip-Animation-with-jQuery-CSS3-splitFlap/demo/index.html

@@ -0,0 +1,20 @@
+(function ($) {
+	$(document).ready(function () {
+		$('.do-splitflap')
+				.splitFlap();
+
+		$('.click-splitflap')
+				.splitFlap({
+					textInit: 'Click me to start',
+					autoplay: false
+				})
+				.click(function () {
+					$(this).splitFlap('splitflap').animate();
+				});
+
+		$('.empty-splitflap')
+				.splitFlap({
+					text: 'This text was created from js'
+				});
+	});
+})(jQuery);