├── b1.png ├── b2.png ├── b3.png ├── b4.png ├── b5.png ├── b6.png ├── b7.png ├── bd1.jpg ├── hbd.mp3 ├── bulb.png ├── vine.png ├── banner.png ├── bulb_red.png ├── cake128.png ├── favicon.ico ├── uggreen.png ├── bulb_blue.png ├── bulb_green.png ├── bulb_pink.png ├── bulb_orange.png ├── bulb_yellow.png ├── Balloon-Border.png ├── README.md ├── package.json ├── .gitignore ├── loading.css ├── cake.less ├── effect.js ├── index.html └── stylesheet.css /b1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/b1.png -------------------------------------------------------------------------------- /b2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/b2.png -------------------------------------------------------------------------------- /b3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/b3.png -------------------------------------------------------------------------------- /b4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/b4.png -------------------------------------------------------------------------------- /b5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/b5.png -------------------------------------------------------------------------------- /b6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/b6.png -------------------------------------------------------------------------------- /b7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/b7.png -------------------------------------------------------------------------------- /bd1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/bd1.jpg -------------------------------------------------------------------------------- /hbd.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/hbd.mp3 -------------------------------------------------------------------------------- /bulb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/bulb.png -------------------------------------------------------------------------------- /vine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/vine.png -------------------------------------------------------------------------------- /banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/banner.png -------------------------------------------------------------------------------- /bulb_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/bulb_red.png -------------------------------------------------------------------------------- /cake128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/cake128.png -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/favicon.ico -------------------------------------------------------------------------------- /uggreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/uggreen.png -------------------------------------------------------------------------------- /bulb_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/bulb_blue.png -------------------------------------------------------------------------------- /bulb_green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/bulb_green.png -------------------------------------------------------------------------------- /bulb_pink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/bulb_pink.png -------------------------------------------------------------------------------- /bulb_orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/bulb_orange.png -------------------------------------------------------------------------------- /bulb_yellow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/bulb_yellow.png -------------------------------------------------------------------------------- /Balloon-Border.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayusharma/birthday/HEAD/Balloon-Border.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Happy Birthday 2 | 3 | A Happy Birthday animation design in CSS3, HTML5. 4 | 5 | URL: http://ayusharma.github.io/birthday/ 6 | 7 | Technology Used: HTML5 CSS3 jQuery GNU/Linux Digital Ocean as VPS GIMP 8 | 9 | # Setup 10 | 11 | ## If you have python installed: 12 | ``` 13 | cd Birthday 14 | ``` 15 | 16 | && 17 | 18 | ``` 19 | python -m SimpleHTTPServer --port 8081 20 | ``` 21 | 22 | visit http://localhost:8081 in your browser. 23 | 24 | ## If you have nodejs installed 25 | ``` 26 | npm install 27 | ``` 28 | && 29 | 30 | ``` 31 | npm run server-node 32 | ``` 33 | visit http://localhost:8081 in your browser. 34 | 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "birthday", 3 | "version": "1.0.0", 4 | "description": "Birthday greetings..", 5 | "main": " ", 6 | "scripts": { 7 | "server-node": "http-server -p 8081" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/ayusharma/birthday.git" 12 | }, 13 | "keywords": [ 14 | "Birthday" 15 | ], 16 | "author": "Ayush Sharma", 17 | "license": "WTFPL", 18 | "bugs": { 19 | "url": "https://github.com/ayusharma/birthday/issues" 20 | }, 21 | "homepage": "https://github.com/ayusharma/birthday#readme", 22 | "dependencies": { 23 | "http-server": "^0.11.1" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # parcel-bundler cache (https://parceljs.org/) 61 | .cache 62 | 63 | # next.js build output 64 | .next 65 | 66 | # nuxt.js build output 67 | .nuxt 68 | 69 | # vuepress build output 70 | .vuepress/dist 71 | 72 | # Serverless directories 73 | .serverless/ 74 | 75 | # FuseBox cache 76 | .fusebox/ 77 | 78 | #DynamoDB Local files 79 | .dynamodb/ -------------------------------------------------------------------------------- /loading.css: -------------------------------------------------------------------------------- 1 | /* Absolute Center CSS Spinner */ 2 | .loading { 3 | position: fixed; 4 | z-index: 99999; 5 | height: 2em; 6 | width: 2em; 7 | overflow: show; 8 | margin: auto; 9 | top: 0; 10 | left: 0; 11 | bottom: 0; 12 | right: 0; 13 | } 14 | 15 | /* Transparent Overlay */ 16 | .loading:before { 17 | content: ''; 18 | display: block; 19 | position: fixed; 20 | top: 0; 21 | left: 0; 22 | width: 100%; 23 | height: 100%; 24 | background-color: rgba(0,0,0,0.3); 25 | } 26 | 27 | /* :not(:required) hides these rules from IE9 and below */ 28 | .loading:not(:required) { 29 | /* hide "loading..." text */ 30 | font: 0/0 a; 31 | color: transparent; 32 | text-shadow: none; 33 | background-color: transparent; 34 | border: 0; 35 | } 36 | 37 | .loading:not(:required):after { 38 | content: ''; 39 | display: block; 40 | font-size: 10px; 41 | width: 1em; 42 | height: 1em; 43 | margin-top: -0.5em; 44 | -webkit-animation: spinner 1500ms infinite linear; 45 | -moz-animation: spinner 1500ms infinite linear; 46 | -ms-animation: spinner 1500ms infinite linear; 47 | -o-animation: spinner 1500ms infinite linear; 48 | animation: spinner 1500ms infinite linear; 49 | border-radius: 0.5em; 50 | -webkit-box-shadow: #FFF 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, #FFF -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; 51 | box-shadow: #FFF 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, #FFF -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; 52 | } 53 | 54 | /* Animation */ 55 | 56 | @-webkit-keyframes spinner { 57 | 0% { 58 | -webkit-transform: rotate(0deg); 59 | -moz-transform: rotate(0deg); 60 | -ms-transform: rotate(0deg); 61 | -o-transform: rotate(0deg); 62 | transform: rotate(0deg); 63 | } 64 | 100% { 65 | -webkit-transform: rotate(360deg); 66 | -moz-transform: rotate(360deg); 67 | -ms-transform: rotate(360deg); 68 | -o-transform: rotate(360deg); 69 | transform: rotate(360deg); 70 | } 71 | } 72 | @-moz-keyframes spinner { 73 | 0% { 74 | -webkit-transform: rotate(0deg); 75 | -moz-transform: rotate(0deg); 76 | -ms-transform: rotate(0deg); 77 | -o-transform: rotate(0deg); 78 | transform: rotate(0deg); 79 | } 80 | 100% { 81 | -webkit-transform: rotate(360deg); 82 | -moz-transform: rotate(360deg); 83 | -ms-transform: rotate(360deg); 84 | -o-transform: rotate(360deg); 85 | transform: rotate(360deg); 86 | } 87 | } 88 | @-o-keyframes spinner { 89 | 0% { 90 | -webkit-transform: rotate(0deg); 91 | -moz-transform: rotate(0deg); 92 | -ms-transform: rotate(0deg); 93 | -o-transform: rotate(0deg); 94 | transform: rotate(0deg); 95 | } 96 | 100% { 97 | -webkit-transform: rotate(360deg); 98 | -moz-transform: rotate(360deg); 99 | -ms-transform: rotate(360deg); 100 | -o-transform: rotate(360deg); 101 | transform: rotate(360deg); 102 | } 103 | } 104 | @keyframes spinner { 105 | 0% { 106 | -webkit-transform: rotate(0deg); 107 | -moz-transform: rotate(0deg); 108 | -ms-transform: rotate(0deg); 109 | -o-transform: rotate(0deg); 110 | transform: rotate(0deg); 111 | } 112 | 100% { 113 | -webkit-transform: rotate(360deg); 114 | -moz-transform: rotate(360deg); 115 | -ms-transform: rotate(360deg); 116 | -o-transform: rotate(360deg); 117 | transform: rotate(360deg); 118 | } 119 | } -------------------------------------------------------------------------------- /cake.less: -------------------------------------------------------------------------------- 1 | 2 | 3 | //////////////////////////////////////////// var 4 | 5 | @D:300px; // Control diameter 6 | 7 | /////////////////////////////////////////// 8 | 9 | 10 | 11 | /* ============================================== POSITION 12 | */ 13 | 14 | .cake{ 15 | position:absolute; 16 | display:none; 17 | // top:30%; 18 | left:50%; 19 | margin-left:-(@D/2); 20 | width:@D; height:@D; 21 | } 22 | 23 | /* ============================================== BASE 24 | */ 25 | 26 | .cake:after{ 27 | background:rgba(255,255,255,1); 28 | border-radius:@D; 29 | content:""; 30 | position:absolute; 31 | bottom:0; left:0; 32 | width:@D; height:@D/50; 33 | } 34 | 35 | .cake:before{ 36 | 37 | } 38 | 39 | /* ============================================== Candle 40 | */ 41 | 42 | .velas{ 43 | background:rgba(255,255,255,1); 44 | border-radius:100%; 45 | position:absolute; 46 | top:50%; left:50%; 47 | margin-left:-(@D/2)/20; 48 | margin-top:-(@D/2)/6; 49 | width:@D/20; height:@D/6; 50 | } 51 | 52 | .velas:after, 53 | .velas:before{ 54 | background:rgba(255,0,0,0.4); 55 | content:""; 56 | position:absolute; 57 | width:100%; height:@D/45; 58 | } 59 | 60 | .velas:after{ 61 | top:25%; left:0; 62 | } 63 | 64 | .velas:before{ 65 | top:45%; left:0; 66 | } 67 | 68 | /* ============================================== Fire 69 | */ 70 | 71 | .fuego{ 72 | display:none; 73 | border-radius:100%; 74 | box-shadow:0 0 40px 10px rgba(248,233,209,0.2); 75 | position:absolute; 76 | top:-12px; left:50%; 77 | margin-left:-(@D/2)/15; 78 | //margin-top:-(@D/2)/10; 79 | width:@D/15; height:@D/8; 80 | } 81 | 82 | .fuego:nth-child(1){ 83 | -webkit-animation:fuego 2s infinite; 84 | -moz-animation:fuego 2s infinite; 85 | -o-animation:fuego 2s infinite; 86 | -ms-animation:fuego 2s infinite; 87 | animation:fuego 2s infinite; 88 | 89 | } 90 | 91 | .fuego:nth-child(2){ 92 | -webkit-animation:fuego 1.5s infinite; 93 | -moz-animation:fuego 1.5s infinite; 94 | -o-animation:fuego 1.5s infinite; 95 | -ms-animation:fuego 1.5s infinite; 96 | animation:fuego 1.5s infinite; 97 | 98 | } 99 | 100 | .fuego:nth-child(3){ 101 | -webkit-animation:fuego 1s infinite; 102 | -moz-animation:fuego 1s infinite; 103 | -o-animation:fuego 1s infinite; 104 | -ms-animation:fuego 1s infinite; 105 | animation:fuego 1s infinite; 106 | } 107 | 108 | .fuego:nth-child(4){ 109 | -webkit-animation:fuego 0.5s infinite; 110 | -moz-animation:fuego 0.5s infinite; 111 | -o-animation:fuego 0.5s infinite; 112 | -ms-animation:fuego 0.5s infinite; 113 | animation:fuego 0.5s infinite; 114 | } 115 | 116 | .fuego:nth-child(5){ 117 | -webkit-animation:fuego 0.2s infinite; 118 | -moz-animation:fuego 0.2s infinite; 119 | -o-animation:fuego 0.2s infinite; 120 | -ms-animation:fuego 0.2s infinite; 121 | animation:fuego 0.2s infinite; 122 | } 123 | 124 | /* ============================================== Animation Fire 125 | */ 126 | 127 | @-webkit-keyframes fuego{ 128 | 0%{ 129 | background:rgba(254,248,97,0.5); 130 | -webkit-transform:translateY(0) scale(1); 131 | } 132 | 50%{ 133 | background:rgba(255,50,0,0.1); 134 | -webkit-transform:translateY(-(@D/5)) scale(0); 135 | } 136 | 100%{ 137 | background:rgba(254,248,97,0.5); 138 | -webkit-transform:translateY(0) scale(1); 139 | } 140 | } 141 | @-moz-keyframes fuego{ 142 | 0%{ 143 | background:rgba(254,248,97,0.5); 144 | -moz-transform:translateY(0) scale(1); 145 | } 146 | 50%{ 147 | background:rgba(255,50,0,0.1); 148 | -moz-transform:translateY(-(@D/5)) scale(0); 149 | } 150 | 100%{ 151 | background:rgba(254,248,97,0.5); 152 | -moz-transform:translateY(0) scale(1); 153 | } 154 | } 155 | @-o-keyframes fuego{ 156 | 0%{ 157 | background:rgba(254,248,97,0.5); 158 | -o-transform:translateY(0) scale(1); 159 | } 160 | 50%{ 161 | background:rgba(255,50,0,0.1); 162 | -o-transform:translateY(-(@D/5)) scale(0); 163 | } 164 | 100%{ 165 | background:rgba(254,248,97,0.5); 166 | -o-transform:translateY(0) scale(1); 167 | } 168 | } 169 | @-ms-keyframes fuego{ 170 | 0%{ 171 | background:rgba(254,248,97,0.5); 172 | -ms-transform:translateY(0) scale(1); 173 | } 174 | 50%{ 175 | background:rgba(255,50,0,0.1); 176 | -ms-transform:translateY(-(@D/5)) scale(0); 177 | } 178 | 100%{ 179 | background:rgba(254,248,97,0.5); 180 | -ms-transform:translateY(0) scale(1); 181 | } 182 | } 183 | 184 | @keyframes fuego{ 185 | 0%{ 186 | background:rgba(254,248,97,0.5); 187 | transform:translateY(0) scale(1); 188 | } 189 | 50%{ 190 | background:rgba(255,50,0,0.1); 191 | transform:translateY(-(@D/5)) scale(0); 192 | } 193 | 100%{ 194 | background:rgba(254,248,97,0.5); 195 | transform:translateY(0) scale(1); 196 | } 197 | } 198 | 199 | /* ============================================== Frosting 200 | */ 201 | 202 | .cobertura{ 203 | background:rgba(236,231,227,1); 204 | border-radius:@D/2; 205 | position:absolute; 206 | top:60%; left:50%; 207 | margin-left:-(@D/2)/1.8; 208 | margin-top:-(@D/2)/10; 209 | width:@D/1.8; height:@D/8; 210 | z-index:10; 211 | } 212 | 213 | .cobertura:after, 214 | .cobertura:before{ 215 | background:rgba(236,231,227,1); 216 | border-radius:@D; 217 | content:""; 218 | position:absolute; 219 | width:@D/20; height:@D/10; 220 | } 221 | 222 | .cobertura:after{ 223 | top:@D/15; right:@D/7; 224 | } 225 | 226 | .cobertura:before{ 227 | top:@D/10; right:@D/11; 228 | } 229 | 230 | /* ============================================== BIZCOCHO 231 | */ 232 | 233 | .bizcocho{ 234 | background:rgba(109,56,38,1); 235 | position:absolute; 236 | bottom:0; left:50%; 237 | margin-left:-(@D/2)/2; 238 | width:@D/2; height:@D/3; 239 | } 240 | 241 | .bizcocho:after, 242 | .bizcocho:before{ 243 | background:rgba(236,231,227,0.6); 244 | content:""; 245 | position:absolute; 246 | width:100%; height:@D/20; 247 | } 248 | 249 | .bizcocho:after{ 250 | top:30%; left:0; 251 | } 252 | 253 | .bizcocho:before{ 254 | top:60%; left:0; 255 | } 256 | 257 | /* ============================================== TEXT 258 | */ 259 | 260 | h1, 261 | p{ 262 | font-family: 'Lato', sans-serif; 263 | font-weight: 300; 264 | font-style:italic; 265 | text-align:center; 266 | width:100%; 267 | -webkit-user-select: none; 268 | -moz-user-select: none; 269 | -ms-user-select: none; 270 | user-select: none; 271 | } 272 | -------------------------------------------------------------------------------- /effect.js: -------------------------------------------------------------------------------- 1 | $(window).load(function(){ 2 | $('.loading').fadeOut('fast'); 3 | $('.container').fadeIn('fast'); 4 | }); 5 | $('document').ready(function(){ 6 | var vw; 7 | $(window).resize(function(){ 8 | vw = $(window).width()/2; 9 | $('#b1,#b2,#b3,#b4,#b5,#b6,#b7').stop(); 10 | $('#b11').animate({top:240, left: vw-350},500); 11 | $('#b22').animate({top:240, left: vw-250},500); 12 | $('#b33').animate({top:240, left: vw-150},500); 13 | $('#b44').animate({top:240, left: vw-50},500); 14 | $('#b55').animate({top:240, left: vw+50},500); 15 | $('#b66').animate({top:240, left: vw+150},500); 16 | $('#b77').animate({top:240, left: vw+250},500); 17 | }); 18 | 19 | $('#turn_on').click(function(){ 20 | $('#bulb_yellow').addClass('bulb-glow-yellow'); 21 | $('#bulb_red').addClass('bulb-glow-red'); 22 | $('#bulb_blue').addClass('bulb-glow-blue'); 23 | $('#bulb_green').addClass('bulb-glow-green'); 24 | $('#bulb_pink').addClass('bulb-glow-pink'); 25 | $('#bulb_orange').addClass('bulb-glow-orange'); 26 | $('body').addClass('peach'); 27 | $(this).fadeOut('slow').delay(5000).promise().done(function(){ 28 | $('#play').fadeIn('slow'); 29 | }); 30 | }); 31 | $('#play').click(function(){ 32 | var audio = $('.song')[0]; 33 | audio.play(); 34 | $('#bulb_yellow').addClass('bulb-glow-yellow-after'); 35 | $('#bulb_red').addClass('bulb-glow-red-after'); 36 | $('#bulb_blue').addClass('bulb-glow-blue-after'); 37 | $('#bulb_green').addClass('bulb-glow-green-after'); 38 | $('#bulb_pink').addClass('bulb-glow-pink-after'); 39 | $('#bulb_orange').addClass('bulb-glow-orange-after'); 40 | $('body').css('backgroud-color','#FFF'); 41 | $('body').addClass('peach-after'); 42 | $(this).fadeOut('slow').delay(6000).promise().done(function(){ 43 | $('#bannar_coming').fadeIn('slow'); 44 | }); 45 | }); 46 | 47 | $('#bannar_coming').click(function(){ 48 | $('.bannar').addClass('bannar-come'); 49 | $(this).fadeOut('slow').delay(6000).promise().done(function(){ 50 | $('#balloons_flying').fadeIn('slow'); 51 | }); 52 | }); 53 | 54 | function loopOne() { 55 | var randleft = 1000*Math.random(); 56 | var randtop = 500*Math.random(); 57 | $('#b1').animate({left:randleft,bottom:randtop},10000,function(){ 58 | loopOne(); 59 | }); 60 | } 61 | function loopTwo() { 62 | var randleft = 1000*Math.random(); 63 | var randtop = 500*Math.random(); 64 | $('#b2').animate({left:randleft,bottom:randtop},10000,function(){ 65 | loopTwo(); 66 | }); 67 | } 68 | function loopThree() { 69 | var randleft = 1000*Math.random(); 70 | var randtop = 500*Math.random(); 71 | $('#b3').animate({left:randleft,bottom:randtop},10000,function(){ 72 | loopThree(); 73 | }); 74 | } 75 | function loopFour() { 76 | var randleft = 1000*Math.random(); 77 | var randtop = 500*Math.random(); 78 | $('#b4').animate({left:randleft,bottom:randtop},10000,function(){ 79 | loopFour(); 80 | }); 81 | } 82 | function loopFive() { 83 | var randleft = 1000*Math.random(); 84 | var randtop = 500*Math.random(); 85 | $('#b5').animate({left:randleft,bottom:randtop},10000,function(){ 86 | loopFive(); 87 | }); 88 | } 89 | 90 | function loopSix() { 91 | var randleft = 1000*Math.random(); 92 | var randtop = 500*Math.random(); 93 | $('#b6').animate({left:randleft,bottom:randtop},10000,function(){ 94 | loopSix(); 95 | }); 96 | } 97 | function loopSeven() { 98 | var randleft = 1000*Math.random(); 99 | var randtop = 500*Math.random(); 100 | $('#b7').animate({left:randleft,bottom:randtop},10000,function(){ 101 | loopSeven(); 102 | }); 103 | } 104 | 105 | $('#balloons_flying').click(function(){ 106 | $('.balloon-border').animate({top:-500},8000); 107 | $('#b1,#b4,#b5,#b7').addClass('balloons-rotate-behaviour-one'); 108 | $('#b2,#b3,#b6').addClass('balloons-rotate-behaviour-two'); 109 | // $('#b3').addClass('balloons-rotate-behaviour-two'); 110 | // $('#b4').addClass('balloons-rotate-behaviour-one'); 111 | // $('#b5').addClass('balloons-rotate-behaviour-one'); 112 | // $('#b6').addClass('balloons-rotate-behaviour-two'); 113 | // $('#b7').addClass('balloons-rotate-behaviour-one'); 114 | loopOne(); 115 | loopTwo(); 116 | loopThree(); 117 | loopFour(); 118 | loopFive(); 119 | loopSix(); 120 | loopSeven(); 121 | 122 | $(this).fadeOut('slow').delay(5000).promise().done(function(){ 123 | $('#cake_fadein').fadeIn('slow'); 124 | }); 125 | }); 126 | 127 | $('#cake_fadein').click(function(){ 128 | $('.cake').fadeIn('slow'); 129 | $(this).fadeOut('slow').delay(3000).promise().done(function(){ 130 | $('#light_candle').fadeIn('slow'); 131 | }); 132 | }); 133 | 134 | $('#light_candle').click(function(){ 135 | $('.fuego').fadeIn('slow'); 136 | $(this).fadeOut('slow').promise().done(function(){ 137 | $('#wish_message').fadeIn('slow'); 138 | }); 139 | }); 140 | 141 | 142 | $('#wish_message').click(function(){ 143 | vw = $(window).width()/2; 144 | 145 | $('#b1,#b2,#b3,#b4,#b5,#b6,#b7').stop(); 146 | $('#b1').attr('id','b11'); 147 | $('#b2').attr('id','b22') 148 | $('#b3').attr('id','b33') 149 | $('#b4').attr('id','b44') 150 | $('#b5').attr('id','b55') 151 | $('#b6').attr('id','b66') 152 | $('#b7').attr('id','b77') 153 | $('#b11').animate({top:240, left: vw-350},500); 154 | $('#b22').animate({top:240, left: vw-250},500); 155 | $('#b33').animate({top:240, left: vw-150},500); 156 | $('#b44').animate({top:240, left: vw-50},500); 157 | $('#b55').animate({top:240, left: vw+50},500); 158 | $('#b66').animate({top:240, left: vw+150},500); 159 | $('#b77').animate({top:240, left: vw+250},500); 160 | $('.balloons').css('opacity','0.9'); 161 | $('.balloons h2').fadeIn(3000); 162 | $(this).fadeOut('slow').delay(3000).promise().done(function(){ 163 | $('#story').fadeIn('slow'); 164 | }); 165 | }); 166 | 167 | $('#story').click(function(){ 168 | $(this).fadeOut('slow'); 169 | $('.cake').fadeOut('fast').promise().done(function(){ 170 | $('.message').fadeIn('slow'); 171 | }); 172 | 173 | var i; 174 | 175 | function msgLoop (i) { 176 | $("p:nth-child("+i+")").fadeOut('slow').delay(800).promise().done(function(){ 177 | i=i+1; 178 | $("p:nth-child("+i+")").fadeIn('slow').delay(1000); 179 | if(i==50){ 180 | $("p:nth-child(49)").fadeOut('slow').promise().done(function () { 181 | $('.cake').fadeIn('fast'); 182 | }); 183 | 184 | } 185 | else{ 186 | msgLoop(i); 187 | } 188 | 189 | }); 190 | // body... 191 | } 192 | 193 | msgLoop(0); 194 | 195 | }); 196 | }); 197 | 198 | 199 | 200 | 201 | //alert('hello'); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Happy Birthday 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 | 38 |
39 |

H

40 |
41 |
42 |

B

43 |
44 |
45 |

D

46 |
47 |
48 |

X

49 |
50 |
51 |

O

52 |
53 |
54 |

L

55 |
56 |
57 |

A

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 |

Today is...

108 |

as beautiful as other days

109 |

but you realize

110 |

another year has gone

111 |

in a blink of the eyes

112 |

however

113 |

Do you know..?

114 |

today is just special

115 |

so special to you

116 |

that's why

117 |

Let's make it...

118 |

the best celebration ever

119 |

and let me share...

120 |

a piece of happiness to you

121 |

I made all this...

122 |

as a birthday present to you

123 |

thanks for being there

124 |

thanks for the friendship we made

125 |

thanks for everything

126 |

I wish you all the best

127 |

May your life be at ease

128 |

May all your wishes come true

129 |

Remember

130 |

your ambitions

131 |

you live as a free bird...

132 |

flying in the blue sky

133 |

Now things are different...

134 |

real story of your life

135 |

is just about to begin

136 |

indeed..

137 |

but...

138 |

don't worry

139 |

because...

140 |

God has your back

141 |

and

142 |

this year will be better

143 |

and I hope

144 |

you'll find...

145 |

happiness along the way

146 |

keep your spirit up

147 |

enjoy every single moment...

148 |

that you experience today

149 |

fill it with your most beautiful smile

150 |

and make it the best memory..

151 |

lastly...

152 |

I'd like to wish you one more time

153 |

a very happy birthday Xola Mathembisa

154 |
155 |
156 |
157 |
158 |
159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 |
169 |
170 | 180 |
181 | 182 | 183 |
184 | 185 | 186 | 187 | 188 | 198 | 199 | -------------------------------------------------------------------------------- /stylesheet.css: -------------------------------------------------------------------------------- 1 | body { 2 | /*background-color: #FFDAB9; */ 3 | background-color: #000; 4 | -webkit-transition:background-color linear 5s; 5 | -moz-transition:background-color linear 5s; 6 | -o-transition:background-color linear 5s; 7 | -ms-transition:background-color linear 5s; 8 | transition:background-color linear 5s; 9 | overflow-x:hidden; 10 | } 11 | .container { 12 | display: none; 13 | } 14 | .peach { 15 | background-color: #FFDAB9; 16 | 17 | } 18 | .peach-after { 19 | -webkit-animation:peach_alive linear 8s infinite; 20 | -moz-animation:peach_alive linear 8s infinite; 21 | -o-animation:peach_alive linear 8s infinite; 22 | -ms-animation:peach_alive linear 8s infinite; 23 | animation:peach_alive linear 8s infinite; 24 | } 25 | 26 | @-webkit-keyframes peach_alive { 27 | 0%{ 28 | background-color: #FFDAB9; 29 | } 30 | 25%{ 31 | background-color: #FFE4B5; 32 | } 33 | 50%{ 34 | background-color: #FFDAB9; 35 | } 36 | 75%{ 37 | background-color: #FFEFD5; 38 | } 39 | 100%{ 40 | background-color: #FFDAB9; 41 | } 42 | } 43 | @-moz-keyframes peach_alive { 44 | 0%{ 45 | background-color: #FFDAB9; 46 | } 47 | 25%{ 48 | background-color: #FFE4B5; 49 | } 50 | 50%{ 51 | background-color: #FFDAB9; 52 | } 53 | 75%{ 54 | background-color: #FFEFD5; 55 | } 56 | 100%{ 57 | background-color: #FFDAB9; 58 | } 59 | } 60 | 61 | @-o-keyframes peach_alive { 62 | 0%{ 63 | background-color: #FFDAB9; 64 | } 65 | 25%{ 66 | background-color: #FFE4B5; 67 | } 68 | 50%{ 69 | background-color: #FFDAB9; 70 | } 71 | 75%{ 72 | background-color: #FFEFD5; 73 | } 74 | 100%{ 75 | background-color: #FFDAB9; 76 | } 77 | } 78 | 79 | @-ms-keyframes peach_alive { 80 | 0%{ 81 | background-color: #FFDAB9; 82 | } 83 | 25%{ 84 | background-color: #FFE4B5; 85 | } 86 | 50%{ 87 | background-color: #FFDAB9; 88 | } 89 | 75%{ 90 | background-color: #FFEFD5; 91 | } 92 | 100%{ 93 | background-color: #FFDAB9; 94 | } 95 | } 96 | 97 | @keyframes peach_alive { 98 | 0%{ 99 | background-color: #FFDAB9; 100 | } 101 | 25%{ 102 | background-color: #FFE4B5; 103 | } 104 | 50%{ 105 | background-color: #FFDAB9; 106 | } 107 | 75%{ 108 | background-color: #FFEFD5; 109 | } 110 | 100%{ 111 | background-color: #FFDAB9; 112 | } 113 | } 114 | 115 | 116 | .bulb { 117 | width: 50px; 118 | height: 50px; 119 | margin: auto; 120 | background-repeat: no-repeat no-repeat; 121 | background-position:center 0px; 122 | background-size: 50px 50px; 123 | } 124 | 125 | .bulb-holder { 126 | height: 70px; 127 | } 128 | 129 | .bulb-glow-yellow { 130 | background-image: url('bulb_yellow.png'); 131 | -webkit-animation: bulb_glow_yellow linear 5s; 132 | -moz-animation: bulb_glow_yellow linear 5s; 133 | -o-animation: bulb_glow_yellow linear 5s; 134 | -ms-animation: bulb_glow_yellow linear 5s; 135 | animation: bulb_glow_yellow linear 5s; 136 | } 137 | 138 | @-webkit-keyframes bulb_glow_yellow { 139 | 0%{ 140 | background-image: url('bulb.png'); 141 | opacity: 0; 142 | } 143 | 50%{ 144 | opacity: 1; 145 | } 146 | 100%{ 147 | background-image: url('bulb_yellow.png'); 148 | opacity: 1; 149 | } 150 | } 151 | @-moz-keyframes bulb_glow_yellow { 152 | 0%{ 153 | background-image: url('bulb.png'); 154 | opacity: 0; 155 | } 156 | 50%{ 157 | opacity: 1; 158 | } 159 | 100%{ 160 | background-image: url('bulb_yellow.png'); 161 | opacity: 1; 162 | } 163 | } 164 | @-o-keyframes bulb_glow_yellow { 165 | 0%{ 166 | background-image: url('bulb.png'); 167 | opacity: 0; 168 | } 169 | 50%{ 170 | opacity: 1; 171 | } 172 | 100%{ 173 | background-image: url('bulb_yellow.png'); 174 | opacity: 1; 175 | } 176 | } 177 | @-ms-keyframes bulb_glow_yellow { 178 | 0%{ 179 | background-image: url('bulb.png'); 180 | opacity: 0; 181 | } 182 | 50%{ 183 | opacity: 1; 184 | } 185 | 100%{ 186 | background-image: url('bulb_yellow.png'); 187 | opacity: 1; 188 | } 189 | } 190 | @keyframes bulb_glow_yellow { 191 | 0%{ 192 | background-image: url('bulb.png'); 193 | opacity: 0; 194 | } 195 | 50%{ 196 | opacity: 1; 197 | } 198 | 100%{ 199 | background-image: url('bulb_yellow.png'); 200 | opacity: 1; 201 | } 202 | } 203 | 204 | .bulb-glow-red { 205 | background-image: url('bulb_red.png'); 206 | -webkit-animation: bulb_glow_red linear 5s; 207 | -moz-animation: bulb_glow_red linear 5s; 208 | -o-animation: bulb_glow_red linear 5s; 209 | -ms-animation: bulb_glow_red linear 5s; 210 | animation: bulb_glow_red linear 5s; 211 | } 212 | 213 | @-webkit-keyframes bulb_glow_red { 214 | 0%{ 215 | background-image: url('bulb.png'); 216 | opacity: 0; 217 | } 218 | 50%{ 219 | opacity: 1; 220 | } 221 | 100%{ 222 | background-image: url('bulb_red.png'); 223 | opacity: 1; 224 | } 225 | } 226 | @-moz-keyframes bulb_glow_red { 227 | 0%{ 228 | background-image: url('bulb.png'); 229 | opacity: 0; 230 | } 231 | 50%{ 232 | opacity: 1; 233 | } 234 | 100%{ 235 | background-image: url('bulb_red.png'); 236 | opacity: 1; 237 | } 238 | } 239 | @-o-keyframes bulb_glow_red { 240 | 0%{ 241 | background-image: url('bulb.png'); 242 | opacity: 0; 243 | } 244 | 50%{ 245 | opacity: 1; 246 | } 247 | 100%{ 248 | background-image: url('bulb_red.png'); 249 | opacity: 1; 250 | } 251 | } 252 | @-ms-keyframes bulb_glow_red { 253 | 0%{ 254 | background-image: url('bulb.png'); 255 | opacity: 0; 256 | } 257 | 50%{ 258 | opacity: 1; 259 | } 260 | 100%{ 261 | background-image: url('bulb_red.png'); 262 | opacity: 1; 263 | } 264 | } 265 | @keyframes bulb_glow_red { 266 | 0%{ 267 | background-image: url('bulb.png'); 268 | opacity: 0; 269 | } 270 | 50%{ 271 | opacity: 1; 272 | } 273 | 100%{ 274 | background-image: url('bulb_red.png'); 275 | opacity: 1; 276 | } 277 | } 278 | .bulb-glow-blue { 279 | background-image: url('bulb_blue.png'); 280 | -webkit-animation: bulb_glow_blue linear 5s; 281 | -moz-animation: bulb_glow_blue linear 5s; 282 | -o-animation: bulb_glow_blue linear 5s; 283 | -ms-animation: bulb_glow_blue linear 5s; 284 | animation: bulb_glow_blue linear 5s; 285 | } 286 | 287 | @-webkit-keyframes bulb_glow_blue { 288 | 0%{ 289 | background-image: url('bulb.png'); 290 | opacity: 0; 291 | } 292 | 50%{ 293 | opacity: 1; 294 | } 295 | 100%{ 296 | background-image: url('bulb_blue.png'); 297 | opacity: 1; 298 | } 299 | } 300 | @-moz-keyframes bulb_glow_blue { 301 | 0%{ 302 | background-image: url('bulb.png'); 303 | opacity: 0; 304 | } 305 | 50%{ 306 | opacity: 1; 307 | } 308 | 100%{ 309 | background-image: url('bulb_blue.png'); 310 | opacity: 1; 311 | } 312 | } 313 | @-o-keyframes bulb_glow_blue { 314 | 0%{ 315 | background-image: url('bulb.png'); 316 | opacity: 0; 317 | } 318 | 50%{ 319 | opacity: 1; 320 | } 321 | 100%{ 322 | background-image: url('bulb_blue.png'); 323 | opacity: 1; 324 | } 325 | } 326 | @-ms-keyframes bulb_glow_blue { 327 | 0%{ 328 | background-image: url('bulb.png'); 329 | opacity: 0; 330 | } 331 | 50%{ 332 | opacity: 1; 333 | } 334 | 100%{ 335 | background-image: url('bulb_blue.png'); 336 | opacity: 1; 337 | } 338 | } 339 | @keyframes bulb_glow_blue { 340 | 0%{ 341 | background-image: url('bulb.png'); 342 | opacity: 0; 343 | } 344 | 50%{ 345 | opacity: 1; 346 | } 347 | 100%{ 348 | background-image: url('bulb_blue.png'); 349 | opacity: 1; 350 | } 351 | } 352 | 353 | .bulb-glow-green { 354 | background-image: url('bulb_green.png'); 355 | -webkit-animation: bulb_glow_green linear 5s; 356 | -moz-animation: bulb_glow_green linear 5s; 357 | -o-animation: bulb_glow_green linear 5s; 358 | -ms-animation: bulb_glow_green linear 5s; 359 | animation: bulb_glow_green linear 5s; 360 | } 361 | 362 | @-webkit-keyframes bulb_glow_green { 363 | 0%{ 364 | background-image: url('bulb.png'); 365 | opacity: 0; 366 | } 367 | 50%{ 368 | opacity: 1; 369 | } 370 | 100%{ 371 | background-image: url('bulb_green.png'); 372 | opacity: 1; 373 | } 374 | } 375 | @-moz-keyframes bulb_glow_green { 376 | 0%{ 377 | background-image: url('bulb.png'); 378 | opacity: 0; 379 | } 380 | 50%{ 381 | opacity: 1; 382 | } 383 | 100%{ 384 | background-image: url('bulb_green.png'); 385 | opacity: 1; 386 | } 387 | } 388 | @-o-keyframes bulb_glow_green { 389 | 0%{ 390 | background-image: url('bulb.png'); 391 | opacity: 0; 392 | } 393 | 50%{ 394 | opacity: 1; 395 | } 396 | 100%{ 397 | background-image: url('bulb_green.png'); 398 | opacity: 1; 399 | } 400 | } 401 | @-ms-keyframes bulb_glow_green { 402 | 0%{ 403 | background-image: url('bulb.png'); 404 | opacity: 0; 405 | } 406 | 50%{ 407 | opacity: 1; 408 | } 409 | 100%{ 410 | background-image: url('bulb_green.png'); 411 | opacity: 1; 412 | } 413 | } 414 | @keyframes bulb_glow_green { 415 | 0%{ 416 | background-image: url('bulb.png'); 417 | opacity: 0; 418 | } 419 | 50%{ 420 | opacity: 1; 421 | } 422 | 100%{ 423 | background-image: url('bulb_green.png'); 424 | opacity: 1; 425 | } 426 | } 427 | 428 | .bulb-glow-pink { 429 | background-image: url('bulb_pink.png'); 430 | -webkit-animation: bulb_glow_pink linear 5s; 431 | -moz-animation: bulb_glow_pink linear 5s; 432 | -o-animation: bulb_glow_pink linear 5s; 433 | -ms-animation: bulb_glow_pink linear 5s; 434 | animation: bulb_glow_pink linear 5s; 435 | } 436 | 437 | @-webkit-keyframes bulb_glow_pink { 438 | 0%{ 439 | background-image: url('bulb.png'); 440 | opacity: 0; 441 | } 442 | 50%{ 443 | opacity: 1; 444 | } 445 | 100%{ 446 | background-image: url('bulb_pink.png'); 447 | opacity: 1; 448 | } 449 | } 450 | @-moz-keyframes bulb_glow_pink { 451 | 0%{ 452 | background-image: url('bulb.png'); 453 | opacity: 0; 454 | } 455 | 50%{ 456 | opacity: 1; 457 | } 458 | 100%{ 459 | background-image: url('bulb_pink.png'); 460 | opacity: 1; 461 | } 462 | } 463 | @-o-keyframes bulb_glow_pink { 464 | 0%{ 465 | background-image: url('bulb.png'); 466 | opacity: 0; 467 | } 468 | 50%{ 469 | opacity: 1; 470 | } 471 | 100%{ 472 | background-image: url('bulb_pink.png'); 473 | opacity: 1; 474 | } 475 | } 476 | @-ms-keyframes bulb_glow_pink { 477 | 0%{ 478 | background-image: url('bulb.png'); 479 | opacity: 0; 480 | } 481 | 50%{ 482 | opacity: 1; 483 | } 484 | 100%{ 485 | background-image: url('bulb_pink.png'); 486 | opacity: 1; 487 | } 488 | } 489 | @keyframes bulb_glow_pink { 490 | 0%{ 491 | background-image: url('bulb.png'); 492 | opacity: 0; 493 | } 494 | 50%{ 495 | opacity: 1; 496 | } 497 | 100%{ 498 | background-image: url('bulb_pink.png'); 499 | opacity: 1; 500 | } 501 | } 502 | 503 | .bulb-glow-orange { 504 | background-image: url('bulb_orange.png'); 505 | -webkit-animation: bulb_glow_orange linear 5s; 506 | -moz-animation: bulb_glow_orange linear 5s; 507 | -o-animation: bulb_glow_orange linear 5s; 508 | -ms-animation: bulb_glow_orange linear 5s; 509 | animation: bulb_glow_orange linear 5s; 510 | } 511 | 512 | @-webkit-keyframes bulb_glow_orange { 513 | 0%{ 514 | background-image: url('bulb.png'); 515 | opacity: 0; 516 | } 517 | 50%{ 518 | opacity: 1; 519 | } 520 | 100%{ 521 | background-image: url('bulb_orange.png'); 522 | opacity: 1; 523 | } 524 | } 525 | @-moz-keyframes bulb_glow_orange { 526 | 0%{ 527 | background-image: url('bulb.png'); 528 | opacity: 0; 529 | } 530 | 50%{ 531 | opacity: 1; 532 | } 533 | 100%{ 534 | background-image: url('bulb_orange.png'); 535 | opacity: 1; 536 | } 537 | } 538 | @-o-keyframes bulb_glow_orange { 539 | 0%{ 540 | background-image: url('bulb.png'); 541 | opacity: 0; 542 | } 543 | 50%{ 544 | opacity: 1; 545 | } 546 | 100%{ 547 | background-image: url('bulb_orange.png'); 548 | opacity: 1; 549 | } 550 | } 551 | @-ms-keyframes bulb_glow_orange { 552 | 0%{ 553 | background-image: url('bulb.png'); 554 | opacity: 0; 555 | } 556 | 50%{ 557 | opacity: 1; 558 | } 559 | 100%{ 560 | background-image: url('bulb_orange.png'); 561 | opacity: 1; 562 | } 563 | } 564 | @keyframes bulb_glow_orange { 565 | 0%{ 566 | background-image: url('bulb.png'); 567 | opacity: 0; 568 | } 569 | 50%{ 570 | opacity: 1; 571 | } 572 | 100%{ 573 | background-image: url('bulb_orange.png'); 574 | opacity: 1; 575 | } 576 | } 577 | 578 | 579 | /*after music*/ 580 | .bulb-glow-yellow-after { 581 | background-image: url('bulb_yellow.png'); 582 | -webkit-animation: bulb_glow_yellow_after linear 1s infinite; 583 | -moz-animation: bulb_glow_yellow_after linear 1s infinite; 584 | -o-animation: bulb_glow_yellow_after linear 1s infinite; 585 | -ms-animation: bulb_glow_yellow_after linear 1s infinite; 586 | animation: bulb_glow_yellow_after linear 1s infinite; 587 | } 588 | 589 | @-webkit-keyframes bulb_glow_yellow_after { 590 | 0%{ 591 | background-image: url('bulb.png'); 592 | } 593 | 50%{ 594 | background-image: url('bulb_yellow.png'); 595 | } 596 | 100%{ 597 | background-image: url('bulb.png'); 598 | } 599 | } 600 | @-moz-keyframes bulb_glow_yellow_after { 601 | 0%{ 602 | background-image: url('bulb.png'); 603 | } 604 | 50%{ 605 | background-image: url('bulb_yellow.png'); 606 | } 607 | 100%{ 608 | background-image: url('bulb.png'); 609 | } 610 | } 611 | @-o-keyframes bulb_glow_yellow_after { 612 | 0%{ 613 | background-image: url('bulb.png'); 614 | } 615 | 50%{ 616 | background-image: url('bulb_yellow.png'); 617 | } 618 | 100%{ 619 | background-image: url('bulb.png'); 620 | } 621 | } 622 | @-ms-keyframes bulb_glow_yellow_after { 623 | 0%{ 624 | background-image: url('bulb.png'); 625 | } 626 | 50%{ 627 | background-image: url('bulb_yellow.png'); 628 | } 629 | 100%{ 630 | background-image: url('bulb.png'); 631 | } 632 | } 633 | @keyframes bulb_glow_yellow_after { 634 | 0%{ 635 | background-image: url('bulb.png'); 636 | } 637 | 50%{ 638 | background-image: url('bulb_yellow.png'); 639 | } 640 | 100%{ 641 | background-image: url('bulb.png'); 642 | } 643 | } 644 | 645 | .bulb-glow-red-after { 646 | background-image: url('bulb_red.png'); 647 | -webkit-animation: bulb_glow_red_after linear 1.2s infinite; 648 | -moz-animation: bulb_glow_red_after linear 1.2s infinite; 649 | -o-animation: bulb_glow_red_after linear 1.2s infinite; 650 | -ms-animation: bulb_glow_red_after linear 1.2s infinite; 651 | animation: bulb_glow_red_after linear 1.2s infinite; 652 | } 653 | 654 | @-webkit-keyframes bulb_glow_red_after { 655 | 0%{ 656 | background-image: url('bulb.png'); 657 | } 658 | 50%{ 659 | background-image: url('bulb_red.png'); 660 | } 661 | 100%{ 662 | background-image: url('bulb.png'); 663 | } 664 | } 665 | @-moz-keyframes bulb_glow_red_after { 666 | 0%{ 667 | background-image: url('bulb.png'); 668 | } 669 | 50%{ 670 | background-image: url('bulb_red.png'); 671 | } 672 | 100%{ 673 | background-image: url('bulb.png'); 674 | } 675 | } 676 | @-o-keyframes bulb_glow_red_after { 677 | 0%{ 678 | background-image: url('bulb.png'); 679 | } 680 | 50%{ 681 | background-image: url('bulb_red.png'); 682 | } 683 | 100%{ 684 | background-image: url('bulb.png'); 685 | } 686 | } 687 | @-ms-keyframes bulb_glow_red_after { 688 | 0%{ 689 | background-image: url('bulb.png'); 690 | } 691 | 50%{ 692 | background-image: url('bulb_red.png'); 693 | } 694 | 100%{ 695 | background-image: url('bulb.png'); 696 | } 697 | } 698 | @keyframes bulb_glow_red_after { 699 | 0%{ 700 | background-image: url('bulb.png'); 701 | } 702 | 50%{ 703 | background-image: url('bulb_red.png'); 704 | } 705 | 100%{ 706 | background-image: url('bulb.png'); 707 | } 708 | } 709 | 710 | .bulb-glow-blue-after { 711 | background-image: url('bulb_blue.png'); 712 | -webkit-animation: bulb_glow_blue_after linear 1.4s infinite; 713 | -moz-animation: bulb_glow_blue_after linear 1.4s infinite; 714 | -o-animation: bulb_glow_blue_after linear 1.4s infinite; 715 | -ms-animation: bulb_glow_blue_after linear 1.4s infinite; 716 | animation: bulb_glow_blue_after linear 1.4s infinite; 717 | } 718 | 719 | @-webkit-keyframes bulb_glow_blue_after { 720 | 0%{ 721 | background-image: url('bulb.png'); 722 | } 723 | 50%{ 724 | background-image: url('bulb_blue.png'); 725 | } 726 | 100%{ 727 | background-image: url('bulb.png'); 728 | } 729 | } 730 | @-moz-keyframes bulb_glow_blue_after { 731 | 0%{ 732 | background-image: url('bulb.png'); 733 | } 734 | 50%{ 735 | background-image: url('bulb_blue.png'); 736 | } 737 | 100%{ 738 | background-image: url('bulb.png'); 739 | } 740 | } 741 | @-o-keyframes bulb_glow_blue_after { 742 | 0%{ 743 | background-image: url('bulb.png'); 744 | } 745 | 50%{ 746 | background-image: url('bulb_blue.png'); 747 | } 748 | 100%{ 749 | background-image: url('bulb.png'); 750 | } 751 | } 752 | @-ms-keyframes bulb_glow_blue_after { 753 | 0%{ 754 | background-image: url('bulb.png'); 755 | } 756 | 50%{ 757 | background-image: url('bulb_blue.png'); 758 | } 759 | 100%{ 760 | background-image: url('bulb.png'); 761 | } 762 | } 763 | @keyframes bulb_glow_blue_after { 764 | 0%{ 765 | background-image: url('bulb.png'); 766 | } 767 | 50%{ 768 | background-image: url('bulb_blue.png'); 769 | } 770 | 100%{ 771 | background-image: url('bulb.png'); 772 | } 773 | } 774 | .bulb-glow-green-after { 775 | background-image: url('bulb_green.png'); 776 | -webkit-animation: bulb_glow_green_after linear 1.8s infinite; 777 | -moz-animation: bulb_glow_green_after linear 1.8s infinite; 778 | -o-animation: bulb_glow_green_after linear 1.8s infinite; 779 | -ms-animation: bulb_glow_green_after linear 1.8s infinite; 780 | animation: bulb_glow_green_after linear 1.8s infinite; 781 | } 782 | 783 | @-webkit-keyframes bulb_glow_green_after { 784 | 0%{ 785 | background-image: url('bulb.png'); 786 | } 787 | 50%{ 788 | background-image: url('bulb_green.png'); 789 | } 790 | 100%{ 791 | background-image: url('bulb.png'); 792 | } 793 | } 794 | 795 | @-moz-keyframes bulb_glow_green_after { 796 | 0%{ 797 | background-image: url('bulb.png'); 798 | } 799 | 50%{ 800 | background-image: url('bulb_green.png'); 801 | } 802 | 100%{ 803 | background-image: url('bulb.png'); 804 | } 805 | } 806 | @-o-keyframes bulb_glow_green_after { 807 | 0%{ 808 | background-image: url('bulb.png'); 809 | } 810 | 50%{ 811 | background-image: url('bulb_green.png'); 812 | } 813 | 100%{ 814 | background-image: url('bulb.png'); 815 | } 816 | } 817 | @-ms-keyframes bulb_glow_green_after { 818 | 0%{ 819 | background-image: url('bulb.png'); 820 | } 821 | 50%{ 822 | background-image: url('bulb_green.png'); 823 | } 824 | 100%{ 825 | background-image: url('bulb.png'); 826 | } 827 | } 828 | @keyframes bulb_glow_green_after { 829 | 0%{ 830 | background-image: url('bulb.png'); 831 | } 832 | 50%{ 833 | background-image: url('bulb_green.png'); 834 | } 835 | 100%{ 836 | background-image: url('bulb.png'); 837 | } 838 | } 839 | .bulb-glow-pink-after { 840 | background-image: url('bulb_pink.png'); 841 | -webkit-animation: bulb_glow_pink_after linear 2s infinite; 842 | -moz-animation: bulb_glow_pink_after linear 2s infinite; 843 | -o-animation: bulb_glow_pink_after linear 2s infinite; 844 | -ms-animation: bulb_glow_pink_after linear 2s infinite; 845 | animation: bulb_glow_pink_after linear 2s infinite; 846 | } 847 | 848 | @-webkit-keyframes bulb_glow_pink_after { 849 | 0%{ 850 | background-image: url('bulb.png'); 851 | } 852 | 50%{ 853 | background-image: url('bulb_pink.png'); 854 | } 855 | 100%{ 856 | background-image: url('bulb.png'); 857 | } 858 | } 859 | @-moz-keyframes bulb_glow_pink_after { 860 | 0%{ 861 | background-image: url('bulb.png'); 862 | } 863 | 50%{ 864 | background-image: url('bulb_pink.png'); 865 | } 866 | 100%{ 867 | background-image: url('bulb.png'); 868 | } 869 | } 870 | @-o-keyframes bulb_glow_pink_after { 871 | 0%{ 872 | background-image: url('bulb.png'); 873 | } 874 | 50%{ 875 | background-image: url('bulb_pink.png'); 876 | } 877 | 100%{ 878 | background-image: url('bulb.png'); 879 | } 880 | } 881 | @-ms-keyframes bulb_glow_pink_after { 882 | 0%{ 883 | background-image: url('bulb.png'); 884 | } 885 | 50%{ 886 | background-image: url('bulb_pink.png'); 887 | } 888 | 100%{ 889 | background-image: url('bulb.png'); 890 | } 891 | } 892 | @keyframes bulb_glow_pink_after { 893 | 0%{ 894 | background-image: url('bulb.png'); 895 | } 896 | 50%{ 897 | background-image: url('bulb_pink.png'); 898 | } 899 | 100%{ 900 | background-image: url('bulb.png'); 901 | } 902 | } 903 | .bulb-glow-orange-after { 904 | background-image: url('bulb_orange.png'); 905 | -webkit-animation: bulb_glow_orange_after linear 2.2s infinite; 906 | -moz-animation: bulb_glow_orange_after linear 2.2s infinite; 907 | -o-animation: bulb_glow_orange_after linear 2.2s infinite; 908 | -ms-animation: bulb_glow_orange_after linear 2.2s infinite; 909 | animation: bulb_glow_orange_after linear 2.2s infinite; 910 | } 911 | 912 | @-webkit-keyframes bulb_glow_orange_after { 913 | 0%{ 914 | background-image: url('bulb.png'); 915 | } 916 | 50%{ 917 | background-image: url('bulb_orange.png'); 918 | } 919 | 100%{ 920 | background-image: url('bulb.png'); 921 | } 922 | } 923 | @-moz-keyframes bulb_glow_orange_after { 924 | 0%{ 925 | background-image: url('bulb.png'); 926 | } 927 | 50%{ 928 | background-image: url('bulb_orange.png'); 929 | } 930 | 100%{ 931 | background-image: url('bulb.png'); 932 | } 933 | } 934 | @-o-keyframes bulb_glow_orange_after { 935 | 0%{ 936 | background-image: url('bulb.png'); 937 | } 938 | 50%{ 939 | background-image: url('bulb_orange.png'); 940 | } 941 | 100%{ 942 | background-image: url('bulb.png'); 943 | } 944 | } 945 | @-ms-keyframes bulb_glow_orange_after { 946 | 0%{ 947 | background-image: url('bulb.png'); 948 | } 949 | 50%{ 950 | background-image: url('bulb_orange.png'); 951 | } 952 | 100%{ 953 | background-image: url('bulb.png'); 954 | } 955 | } 956 | @keyframes bulb_glow_orange_after { 957 | 0%{ 958 | background-image: url('bulb.png'); 959 | } 960 | 50%{ 961 | background-image: url('bulb_orange.png'); 962 | } 963 | 100%{ 964 | background-image: url('bulb.png'); 965 | } 966 | } 967 | audio { 968 | display: none; 969 | } 970 | 971 | .bannar { 972 | max-width: 100%; 973 | -webkit-transform:translate(0px,-500px); 974 | -moz-transform:translate(0px,-500px); 975 | -o-transform:translate(0px,-500px); 976 | -ms-transform:translate(0px,-500px); 977 | transform:translate(0px,-500px); 978 | 979 | } 980 | .bannar-come { 981 | -webkit-animation: bannar_come linear 6s; 982 | -webkit-transform:translate(0px,0px); 983 | -moz-animation: bannar_come linear 6s; 984 | -moz-transform:translate(0px,0px); 985 | -o-animation: bannar_come linear 6s; 986 | -o-transform:translate(0px,0px); 987 | -ms-animation: bannar_come linear 6s; 988 | -ms-transform:translate(0px,0px); 989 | animation: bannar_come linear 6s; 990 | transform:translate(0px,0px); 991 | } 992 | @-webkit-keyframes bannar_come { 993 | 0%{ 994 | -webkit-transform:translate(0px,-1000px); 995 | } 996 | 33%{ 997 | -webkit-transform:translate(0px,0px); 998 | -webkit-transform:rotate(10deg); 999 | /*-webkit-transform:scale(1.5);*/ 1000 | } 1001 | 66% { 1002 | -webkit-transform:translate(0px,100px); 1003 | -webkit-transform:rotate(-10deg); 1004 | } 1005 | 100% { 1006 | -webkit-transform:translate(0px,0px); 1007 | } 1008 | } 1009 | @-moz-keyframes bannar_come { 1010 | 0%{ 1011 | -moz-transform:translate(0px,-1000px); 1012 | } 1013 | 33%{ 1014 | -moz-transform:translate(0px,0px); 1015 | -moz-transform:rotate(10deg); 1016 | /*-webkit-transform:scale(1.5);*/ 1017 | } 1018 | 66% { 1019 | -moz-transform:translate(0px,100px); 1020 | -moz-transform:rotate(-10deg); 1021 | } 1022 | 100% { 1023 | -moz-transform:translate(0px,0px); 1024 | } 1025 | } 1026 | @-o-keyframes bannar_come { 1027 | 0%{ 1028 | -o-transform:translate(0px,-1000px); 1029 | } 1030 | 33%{ 1031 | -o-transform:translate(0px,0px); 1032 | -o-transform:rotate(10deg); 1033 | /*-webkit-transform:scale(1.5);*/ 1034 | } 1035 | 66% { 1036 | -o-transform:translate(0px,100px); 1037 | -o-transform:rotate(-10deg); 1038 | } 1039 | 100% { 1040 | -o-transform:translate(0px,0px); 1041 | } 1042 | } 1043 | @-ms-keyframes bannar_come { 1044 | 0%{ 1045 | -ms-transform:translate(0px,-1000px); 1046 | } 1047 | 33%{ 1048 | -ms-transform:translate(0px,0px); 1049 | -ms-transform:rotate(10deg); 1050 | /*-webkit-transform:scale(1.5);*/ 1051 | } 1052 | 66% { 1053 | -ms-transform:translate(0px,100px); 1054 | -ms-transform:rotate(-10deg); 1055 | } 1056 | 100% { 1057 | -ms-transform:translate(0px,0px); 1058 | } 1059 | }o 1060 | @keyframes bannar_come { 1061 | 0%{ 1062 | transform:translate(0px,-1000px); 1063 | } 1064 | 33%{ 1065 | transform:translate(0px,0px); 1066 | transform:rotate(10deg); 1067 | /*-webkit-transform:scale(1.5);*/ 1068 | } 1069 | 66% { 1070 | transform:translate(0px,100px); 1071 | transform:rotate(-10deg); 1072 | } 1073 | 100% { 1074 | transform:translate(0px,0px); 1075 | } 1076 | } 1077 | 1078 | .balloons { 1079 | position: fixed; 1080 | bottom: -200px; 1081 | opacity: 0.6; 1082 | z-index: 99; 1083 | width: 100px; 1084 | height: 183px; 1085 | background-repeat: no-repeat no-repeat; 1086 | background-size: 100px 183px; 1087 | } 1088 | .balloons h2 { 1089 | text-transform: uppercase; 1090 | font-family: 'Signika', sans-serif; 1091 | font-size: 50px; 1092 | color: #BF4136; 1093 | text-shadow: 5px 5px 5px #FFF; 1094 | display: none; 1095 | } 1096 | #b1,#b11 { 1097 | background-image: url('b1.png'); 1098 | } 1099 | #b2,#b22 { 1100 | background-image: url('b2.png'); 1101 | } 1102 | #b3,#b33 { 1103 | background-image: url('b3.png'); 1104 | } 1105 | #b4,#b44{ 1106 | background-image: url('b4.png'); 1107 | } 1108 | #b5,#b55{ 1109 | background-image: url('b5.png'); 1110 | } 1111 | #b6,#b66{ 1112 | background-image: url('b6.png'); 1113 | } 1114 | #b7,#b77{ 1115 | background-image: url('b7.png'); 1116 | } 1117 | .balloons-rotate-behaviour-one { 1118 | -webkit-animation: balloons_rotate_one linear 10s infinite; 1119 | -webkit-transform: rotate(30deg); 1120 | -moz-animation: balloons_rotate_one linear 10s infinite; 1121 | -moz-transform: rotate(30deg); 1122 | -o-animation: balloons_rotate_one linear 10s infinite; 1123 | -o-transform: rotate(30deg); 1124 | -ms-animation: balloons_rotate_one linear 10s infinite; 1125 | -ms-transform: rotate(30deg); 1126 | animation: balloons_rotate_one linear 10s infinite; 1127 | transform: rotate(30deg); 1128 | } 1129 | @-webkit-keyframes balloons_rotate_one { 1130 | 0% { 1131 | -webkit-transform: rotate(30deg); 1132 | } 1133 | 50% { 1134 | -webkit-transform: rotate(-30deg); 1135 | } 1136 | 100% { 1137 | -webkit-transform: rotate(30deg); 1138 | } 1139 | } 1140 | @-moz-keyframes balloons_rotate_one { 1141 | 0% { 1142 | -moz-transform: rotate(30deg); 1143 | } 1144 | 50% { 1145 | -moz-transform: rotate(-30deg); 1146 | } 1147 | 100% { 1148 | -moz-transform: rotate(30deg); 1149 | } 1150 | } 1151 | @-o-keyframes balloons_rotate_one { 1152 | 0% { 1153 | -o-transform: rotate(30deg); 1154 | } 1155 | 50% { 1156 | -o-transform: rotate(-30deg); 1157 | } 1158 | 100% { 1159 | -o-transform: rotate(30deg); 1160 | } 1161 | } 1162 | @-ms-keyframes balloons_rotate_one { 1163 | 0% { 1164 | -ms-transform: rotate(30deg); 1165 | } 1166 | 50% { 1167 | -ms-transform: rotate(-30deg); 1168 | } 1169 | 100% { 1170 | -ms-transform: rotate(30deg); 1171 | } 1172 | } 1173 | @keyframes balloons_rotate_one { 1174 | 0% { 1175 | transform: rotate(30deg); 1176 | } 1177 | 50% { 1178 | transform: rotate(-30deg); 1179 | } 1180 | 100% { 1181 | transform: rotate(30deg); 1182 | } 1183 | } 1184 | .balloons-rotate-behaviour-two { 1185 | -webkit-animation: balloons_rotate_two linear 10s infinite; 1186 | -webkit-transform: rotate(-20deg); 1187 | -moz-animation: balloons_rotate_two linear 10s infinite; 1188 | -moz-transform: rotate(-20deg); 1189 | -o-animation: balloons_rotate_two linear 10s infinite; 1190 | -o-transform: rotate(-20deg); 1191 | -ms-animation: balloons_rotate_two linear 10s infinite; 1192 | -ms-transform: rotate(-20deg); 1193 | animation: balloons_rotate_two linear 10s infinite; 1194 | transform: rotate(-20deg); 1195 | } 1196 | @-webkit-keyframes balloons_rotate_two { 1197 | 0% { 1198 | -webkit-transform: rotate(-20deg); 1199 | } 1200 | 50% { 1201 | -webkit-transform: rotate(20deg); 1202 | } 1203 | 100% { 1204 | -webkit-transform: rotate(-20deg); 1205 | } 1206 | } 1207 | @-moz-keyframes balloons_rotate_two { 1208 | 0% { 1209 | -moz-transform: rotate(-20deg); 1210 | } 1211 | 50% { 1212 | -moz-transform: rotate(20deg); 1213 | } 1214 | 100% { 1215 | -moz-transform: rotate(-20deg); 1216 | } 1217 | } 1218 | @-o-keyframes balloons_rotate_two { 1219 | 0% { 1220 | -o-transform: rotate(-20deg); 1221 | } 1222 | 50% { 1223 | -o-transform: rotate(20deg); 1224 | } 1225 | 100% { 1226 | -o-transform: rotate(-20deg); 1227 | } 1228 | } 1229 | @-ms-keyframes balloons_rotate_two { 1230 | 0% { 1231 | -ms-transform: rotate(-20deg); 1232 | } 1233 | 50% { 1234 | -ms-transform: rotate(20deg); 1235 | } 1236 | 100% { 1237 | -ms-transform: rotate(-20deg); 1238 | } 1239 | } 1240 | @keyframes balloons_rotate_two { 1241 | 0% { 1242 | transform: rotate(-20deg); 1243 | } 1244 | 50% { 1245 | transform: rotate(20deg); 1246 | } 1247 | 100% { 1248 | transform: rotate(-20deg); 1249 | } 1250 | } 1251 | 1252 | .balloon-border{ 1253 | position: fixed; 1254 | top:100%; 1255 | opacity: 0.5; 1256 | z-index: 9999; 1257 | } 1258 | .control-panel { 1259 | position: fixed; 1260 | bottom: 0; 1261 | padding:10px 0px 10px 0px; 1262 | } 1263 | #play, #bannar_coming, #balloons_flying,#cake_fadein,#light_candle,#wish_message,#story { 1264 | display: none; 1265 | } 1266 | 1267 | .cake-cover { 1268 | margin-top: 50px; 1269 | } 1270 | .message { 1271 | margin-top: 200px; 1272 | display: none; 1273 | } 1274 | .message p { 1275 | font-family: 'Signika', sans-serif; 1276 | font-size: 30px; 1277 | text-transform: uppercase; 1278 | color: #C4515C; 1279 | text-shadow: 2px 2px 2px #FFF; 1280 | display: none; 1281 | font-weight: bold; 1282 | } 1283 | 1284 | .btn-primary { 1285 | border-color: #466baf; 1286 | padding: 10px; 1287 | text-transform: uppercase; 1288 | font-family: 'Signika', sans-serif; 1289 | font-weight: 700; 1290 | color: #fff; 1291 | background-color: #466baf; 1292 | } 1293 | .btn-primary:hover, 1294 | .btn-primary:focus, 1295 | .btn-primary:active, 1296 | .btn-primary.active, 1297 | .open .dropdown-toggle.btn-primary { 1298 | border-color: #fff; 1299 | color: #fff; 1300 | background-color: #466baf; 1301 | } 1302 | 1303 | 1304 | 1305 | /*controlling tablet width*/ 1306 | /*@media only screen and (max-width: 720px){ 1307 | .container { 1308 | -webkit-transform: scale(0.9); 1309 | } 1310 | }*/ --------------------------------------------------------------------------------