Last active
December 31, 2015 07:29
-
-
Save warpling/7954318 to your computer and use it in GitHub Desktop.
Bored during finals presentations? Stop redditing and start playing CSC Presentation Bingo!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes shake { | |
| 0%, 100% {-webkit-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} | |
| 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} | |
| } | |
| @-moz-keyframes shake { | |
| 0%, 100% {-moz-transform: translateX(0);} | |
| 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} | |
| 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} | |
| } | |
| @-o-keyframes shake { | |
| 0%, 100% {-o-transform: translateX(0);} | |
| 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);} | |
| 20%, 40%, 60%, 80% {-o-transform: translateX(10px);} | |
| } | |
| @keyframes shake { | |
| 0%, 100% {transform: translateX(0);} | |
| 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} | |
| 20%, 40%, 60%, 80% {transform: translateX(10px);} | |
| } | |
| .shake { | |
| -webkit-animation-name: shake; | |
| -moz-animation-name: shake; | |
| -o-animation-name: shake; | |
| animation-name: shake; | |
| } | |
| @-webkit-keyframes tada { | |
| 0% {-webkit-transform: scale(1);} | |
| 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} | |
| 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} | |
| 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} | |
| 100% {-webkit-transform: scale(1) rotate(0);} | |
| } | |
| @-moz-keyframes tada { | |
| 0% {-moz-transform: scale(1);} | |
| 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);} | |
| 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);} | |
| 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);} | |
| 100% {-moz-transform: scale(1) rotate(0);} | |
| } | |
| @-o-keyframes tada { | |
| 0% {-o-transform: scale(1);} | |
| 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);} | |
| 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);} | |
| 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);} | |
| 100% {-o-transform: scale(1) rotate(0);} | |
| } | |
| @keyframes tada { | |
| 0% {transform: scale(1);} | |
| 10%, 20% {transform: scale(0.9) rotate(-3deg);} | |
| 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} | |
| 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} | |
| 100% {transform: scale(1) rotate(0);} | |
| } | |
| .tada { | |
| -webkit-animation-name: tada; | |
| -moz-animation-name: tada; | |
| -o-animation-name: tada; | |
| animation-name: tada; | |
| } | |
| /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
| @-webkit-keyframes pulse { | |
| 0% { -webkit-transform: scale(1); } | |
| 50% { -webkit-transform: scale(1.1); } | |
| 100% { -webkit-transform: scale(1); } | |
| } | |
| @-moz-keyframes pulse { | |
| 0% { -moz-transform: scale(1); } | |
| 50% { -moz-transform: scale(1.1); } | |
| 100% { -moz-transform: scale(1); } | |
| } | |
| @-o-keyframes pulse { | |
| 0% { -o-transform: scale(1); } | |
| 50% { -o-transform: scale(1.1); } | |
| 100% { -o-transform: scale(1); } | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse { | |
| -webkit-animation-name: pulse; | |
| -moz-animation-name: pulse; | |
| -o-animation-name: pulse; | |
| animation-name: pulse; | |
| } | |
| @-webkit-keyframes hinge { | |
| 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } | |
| 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } | |
| 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } | |
| 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } | |
| 100% { -webkit-transform: translateY(700px); opacity: 0; } | |
| } | |
| @-moz-keyframes hinge { | |
| 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } | |
| 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } | |
| 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } | |
| 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } | |
| 100% { -moz-transform: translateY(700px); opacity: 0; } | |
| } | |
| @-o-keyframes hinge { | |
| 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } | |
| 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } | |
| 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } | |
| 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } | |
| 100% { -o-transform: translateY(700px); opacity: 0; } | |
| } | |
| @keyframes hinge { | |
| 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } | |
| 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } | |
| 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } | |
| 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } | |
| 100% { transform: translateY(700px); opacity: 0; } | |
| } | |
| .hinge { | |
| -webkit-animation-name: hinge; | |
| -moz-animation-name: hinge; | |
| -o-animation-name: hinge; | |
| animation-name: hinge; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <!-- Or you know... you could always just make terrible web apps | |
| oooo | |
| `888 | |
| 888 .oo. .oooo. oooo ooo .ooooo. ooo. .oo. | |
| 888P"Y88b `P )88b `88b..8P' d88' `88b `888P"Y88b | |
| 888 888 .oP"888 Y888' 888 888 888 888 | |
| 888 888 d8( 888 .o8"'88b 888 888 888 888 | |
| o888o o888o `Y888""8o o88' 888o `Y8bod8P' o888o o888o | |
| oooo | |
| `888 | |
| 888 .oo. .oooo. oooo ooo | |
| 888P"Y88b `P )88b `88b..8P' | |
| 888 888 .oP"888 Y888' | |
| 888 888 d8( 888 .o8"'88b | |
| o888o o888o `Y888""8o o88' 888o | |
| --> | |
| <style> | |
| h1, h2 { | |
| text-align: center; | |
| font-family: 'Lato', sans-serif; | |
| } | |
| .bingo-board { | |
| display: flex; | |
| padding: 0; | |
| margin: 0 auto; | |
| width: 85%; | |
| height: 85%; | |
| list-style: none; | |
| flex-wrap: wrap; | |
| flex-flow: flex-direction; | |
| justify-content: space-around; | |
| align-items: center; | |
| } | |
| .bingo-tile { | |
| background-color: tomato; | |
| background: linear-gradient(to bottom, #ffaf4b 0%,#ff920a 100%); | |
| box-sizing: border-box; | |
| padding: 10px; | |
| width: 32%; | |
| height: 32%; | |
| margin-top: 10px; | |
| line-height: 1.5em; | |
| color: white; | |
| font-family: 'Lato', sans-serif; | |
| font-weight: bold; | |
| font-size: 1.5em; | |
| font-size: 3vw; | |
| text-align: center; | |
| cursor: pointer; | |
| -webkit-transition: all 0.4s ease-out 0; | |
| } | |
| </style> | |
| <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" href="./animate-custom.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <h1>CSC Presentation bingo!</h1> | |
| <h2>Use for one presentation or for the entire class!</h2> | |
| <div class="bingo-board"> | |
| <div class="bingo-tile">Uses Star Trek theme</div> | |
| <div class="bingo-tile">Needs adaptor</div> | |
| <div class="bingo-tile">Embarassing desktop photo</div> | |
| <div class="bingo-tile">Can't get out of fullscreen</div> | |
| <div class="bingo-tile"><em>Free!</em><br/>Uses default black/white theme</div> | |
| <div class="bingo-tile">Reads more than three bullets verbatim</div> | |
| <div class="bingo-tile">Uses a gif!</div> | |
| <div class="bingo-tile">Accidental pun</div> | |
| <div class="bingo-tile">Makes three self-depricating comments</div> | |
| </div> | |
| <script type="text/javascript"> | |
| $(".bingo-tile").click(function() { | |
| console.log("+ " + $(this).text()); | |
| $(this).css("opacity", "0.2"); | |
| $(this).css("text-decoration", "line-through"); | |
| $(this).addClass("tada animated"); | |
| var that = this; | |
| setTimeout(function() {$(that).removeClass("tada animated");}, 1000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment