So I was at LILiK , our nerds lab at University, and we were preparing some slides for the LILiK day, an event we made to promote our lab. My slides title are “to Css3 or to jQuery? that is the question…” and I decided to make a little demo to show how they cooperate together.
What a better example than a cult…
batman preview red phone
…like BATMAN!
Batman Logo
I’ve tried to include some css3 feature, like animations and some new properties.
I’ve added even a good old fashioned sound taken from an episode of the old Batman tv show with html5 <audio> tag.
Everything glued together with some strong javascript.
First the code and after the demo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<!DOCTYPE html> <html> <head> <title>CSS3 vs jQuery</title> <style type="text/css"> html,body{ position: relative; height: 100%; width: 100%; background: #000; } #square{ height: 50px; width: 100px; background: rgb(150,20,20); position: relative; background: url("batman.png"); background-size: 100% 100%; opacity: 0; margin: auto; top: 200px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .showing{ opacity:1 !important; } .hidden{ opacity:0 !important; } .squareanimated{ -webkit-animation: myanim 1.3s ease; -moz-animation: myanim 1.3s ease; -o-animation: myanim 1.3s ease; animation: myanim 1.3s ease; } .simlink:active > #square{ } @-webkit-keyframes myanim { 0% { } 50% { -webkit-transform: scale(15,15) rotate(1080deg); } 100% { -webkit-transform: scale(1,1) ; } } #panic{ position: relative; height: 340px; width: 340px; margin: auto; background:url("panic.png") bottom no-repeat; opacity: 1; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; color: white; font-family: futura; text-align: center; font-size: 20px; } #batmanaudio{ opacity: 0; } </style> <script type="text/javascript"> function playPause() { var song = document.getElementsByTagName('audio')[0]; if (song.paused) song.play(); else song.pause(); var d = document.getElementById("square"); d.className = d.className + " showing squareanimated"; var e = document.getElementById("panic"); e.className = e.className + "hidden"; song.addEventListener('ended', switchDisplays); } function switchDisplays(){ var d = document.getElementById("square"); d.className = ""; var e = document.getElementById("panic"); e.className = ""; } </script> </head> <body> <a href="#" class = "simlink"><div id = "square"></div></a> <audio preload="auto" controls id="batmanaudio"> <source src="batman.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> <div id = "panic" onclick="playPause()"> There's only one man who can solve this problem... </div> </body> </html> |
The DEMO
Have fun, and don’t forget to use when you need some help.
Comments
No comments yet.