jquery-flapper
Version:
A split-flap (Solari) display for numbers and words using jQuery
151 lines (132 loc) • 4.7 kB
HTML
<html>
<head>
<title>FLAPPER DEMO</title>
<link href="css/flapper.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="transform/dist/jquery.transform-0.9.3.min.js"></script>
<script src="src/jquery.flapper.js"></script>
<script src="src/flapdemo.js"></script>
<style type="text/css">
body {
font-family: Roboto Condensed;
color: #333;
}
.page {
width: 1000px;
margin: 30px auto 0;
}
h1 {
text-align: center;
font-size: 24px;
}
.displays {
padding: 30px;
border: 10px solid #ccc;
background-color: #222;
border-radius: 30px;
box-shadow: 0 0 12px 4px #000 inset;
}
.flapper {
margin-bottom: 2px;
text-align: center;
}
.inputarea {
margin: 24px 0;
}
#typesomething,
#showme {
font-family: Roboto Condensed;
font-size: 18px;
padding: 14px;
background-color: #EEE;
color: #333;
border: 0;
height: 170px;
}
#typesomething {
width: 300px;
}
#showme:hover {
background-color: #DDD;
}
#showme:active {
background-color: #CCC;
}
div.inline {
display: inline-block;
vertical-align: bottom;
}
div.activity {
width: 12px;
height: 12px;
border-radius: 6px;
background-color: #250000;
position: relative;
top: 33px;
left: -15px;
}
div.activity.active {
background-color: #f00;
}
/* Greetz @deadlyicon
* https://gist.github.com/2191622
*/
#fork-me {
width: 180px;
height: 150px;
position: absolute;
top: 0px;
right: 0px;
overflow: hidden;
}
#fork-me a {
display: block;
position: absolute;
top: 35px;
right: -75px;
padding: 0.75em 4em;
background: #881c15;
-webkit-transform: rotate(40deg);
-moz-transform:rotate(40deg);
-o-transform:rotate(40deg);
-ms-transform:rotate(40deg);
color: white ;
font-weight: bold;
font-family: helvetica;
text-decoration: none;
border: 1px solid white;
box-shadow: 0 0 10px black;
text-shadow: 0 0 10px black;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="page">
<h1>FLAPPER DEMO</h1>
<div class="displays">
<div class="activity"></div><input class="display M" />
<div class="activity"></div><input class="display M" />
<div class="activity"></div><input class="display M" />
<div class="activity"></div><input class="display M" />
<div class="activity"></div><input class="display M" />
<div class="activity"></div><input class="display M" />
</div>
<div class="inputarea">
<div class="inline"><textarea id="typesomething" placeholder="Type Something Here..." rows="6" cols="20"></textarea></div>
<div class="inline"><button id="showme">And Click Here</button></div>
</div>
</div>
<div id="fork-me">
<a href="https://github.com/jayKayEss/Flapper">Fork me on GitHub</a>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-20194861-3', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>