├── img ├── lydia.png ├── favicon.png ├── lydia2.png ├── ballon3.svg ├── ballon1.svg ├── ballon2.svg └── hat.svg ├── .gitignore ├── customize.json ├── LICENSE ├── package.json ├── README.md ├── style └── style.css ├── index.html └── script └── main.js /img/lydia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/faahim/happy-birthday/HEAD/img/lydia.png -------------------------------------------------------------------------------- /img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/faahim/happy-birthday/HEAD/img/favicon.png -------------------------------------------------------------------------------- /img/lydia2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/faahim/happy-birthday/HEAD/img/lydia2.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # chrome package private key 13 | /package/*.pem 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /customize.json: -------------------------------------------------------------------------------- 1 | { 2 | "greeting": "Hiya", 3 | "name": "Lydia", 4 | "greetingText": "I really like your name btw!", 5 | "wishText": "May the js.prototypes always be with you! ;)", 6 | "imagePath": "img/lydia2.png", 7 | "text1": "It's your birthday!!! :D", 8 | "textInChatBox": "Happy birthday to you!! Yeee! Many many happy blah...", 9 | "sendButtonLabel": "Send", 10 | "text2": "That's what I was going to do.", 11 | "text3": "But then I stopped.", 12 | "text4": "I realised, I wanted to do something", 13 | "text4Adjective": "special", 14 | "text5Entry": "Because,", 15 | "text5Content": "You are Special", 16 | "smiley": ":)", 17 | "bigTextPart1": "S", 18 | "bigTextPart2": "O", 19 | "wishHeading": "Happy Birthday!", 20 | "outroText": "Okay, now come back and tell me if you liked it.", 21 | "replayText": "Or click, if you want to watch it again.", 22 | "outroSmiley": ":)" 23 | } 24 | -------------------------------------------------------------------------------- /img/ballon3.svg: -------------------------------------------------------------------------------- 1 | happy birthday -------------------------------------------------------------------------------- /img/ballon1.svg: -------------------------------------------------------------------------------- 1 | happy birthday -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 faahim 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "happy-birthday", 3 | "version": "1.0.0", 4 | "description": "An app that let's you say happy birthday to your friend in a nerdy way.", 5 | "main": "index.js", 6 | "devDependencies": { 7 | "browser-sync": "^2.18.13", 8 | "run-script-os": "^1.0.2" 9 | }, 10 | "scripts": { 11 | "start": "run-script-os", 12 | "start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"", 13 | "//": "Hello! If you are having trouble running this command. Try changing Firefox Developer Edition to FirefoxDeveloperEdition", 14 | "start:darwin:linux": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777", 15 | "test": "echo \"Error: no test specified\" && exit 1" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/faahim/happy-birthday.git" 20 | }, 21 | "keywords": [ 22 | "Happy", 23 | "Birthday" 24 | ], 25 | "author": "Afiur Rahman Fahim", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/faahim/happy-birthday/issues" 29 | }, 30 | "homepage": "https://github.com/faahim/happy-birthday#readme", 31 | "dependencies": {} 32 | } 33 | -------------------------------------------------------------------------------- /img/ballon2.svg: -------------------------------------------------------------------------------- 1 | happy birthday -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Animated Birthday Wish 2 | 3 | [![GitHub Stars](https://img.shields.io/github/stars/faahim/happy-birthday?style=social)](https://github.com/faahim/happy-birthday/stargazers) 4 | [![Fork](https://img.shields.io/github/forks/faahim/happy-birthday?style=social)](https://github.com/faahim/happy-birthday/network/members) 5 | [![Try eWishWell App](https://img.shields.io/badge/Try%20the-eWishWell%20App-brightgreen?style=flat-square)](https://ewishwell.com) 6 | 7 | A simple, fun, and customizable **open-source** project for creating an animated birthday wish page. 8 | 9 | 10 | https://github.com/user-attachments/assets/6d0d6958-9c6e-4e77-a478-3a3b94e0a2ca 11 | 12 | 13 | Thanks to all of you, it's now one of the most starred projects in this category! 🎉 14 | 15 | --- 16 | 17 | ## ✨ Easiest Way to Create & Share: Use the eWishWell App! ✨ 18 | 19 | Want to create a beautiful, animated digital birthday wish **without any coding**? Check out the new **[eWishWell web app](https://ewishwell.com)**! 20 | 21 | ➡️ **[Try the eWishWell App Now!](https://ewishwell.com)** ⬅️ **(It's Free!)** 22 | 23 | 24 | 25 | https://github.com/user-attachments/assets/375c0034-5404-4389-a742-c69536d54d91 26 | 27 | 28 | 29 | **Why use the eWishWell App?** 30 | 31 | * ✅ **No Coding Required:** Easily customize text, colors, fonts and more elements with a simple interface. 32 | * 📱 **Mobile-Friendly:** Create and view wishes perfectly on any device. 33 | * ⚡ **Modern and Performant:** Built with the latest web technologies. 34 | * 🚀 **Instant Sharing:** Get a unique link to share your wish instantly via WhatsApp, email, social media, etc. 35 | * 🎨 **More Templates Coming:** We're adding more designs and occasions soon! 36 | * 💡 **Based on this popular code!** Built with the same spirit of fun and personalization. 37 | 38 | **[Click here to create your personalized wish in minutes!](https://ewishwell.com/)** 39 | 40 | --- 41 | 42 | ## About This Repository (For Developers) 43 | 44 | This repository contains the original HTML, CSS, and JavaScript code for the animated birthday wish page. It's perfect if you want to: 45 | 46 | * Understand how the animation works. 47 | * Fork the code and make deeper customizations. 48 | * Host the wish page yourself. 49 | 50 | 51 | [Happy Birthday Animation Demo](https://faahim.github.io/happy-birthday/) 52 | *(The animation generated by the code in this repository)* 53 | 54 | ### How to Use This Code 55 | 56 | 1. **Fork or Clone:** Fork this repository or clone it to your local machine. 57 | 2. **Customize:** Open `customize.json` and replace the content with your own. Or, edit `index.html` directly if you know what you're doing. 58 | 3. **Deploy/Host:** Turn on GitHub pages for your repository (Settings > Pages) 59 | 4. **Share the Link:** Share the URL you get at the above step with the recipient 60 | 61 | **You do not need to create Pull Request to this main repository.** 62 | 63 | Looking for an easier way? Remember to check out the **[eWishWell App](https://ewishwell.com)** for a no-code solution! 64 | 65 | ### Technical Overview (Repo Code) 66 | 67 | * **HTML (`index.html`):** Defines the structure and content placeholders. 68 | * **CSS (`style.css`):** Handles styling and the core CSS animations (transitions, keyframes). 69 | * **JavaScript (`script.js`):** Manages the sequential display of elements and triggers animations via GSAP. 70 | 71 | --- 72 | 73 | ## Contribution 74 | 75 | Contributions to this repository (the HTML/JS code) are welcome! Please feel free to submit pull requests for bug fixes or improvements to the core animation code. 76 | 77 | ## Support 78 | Feel free reach out via the contact form on [eWishWell](https://ewishwell.com#contact) if you need any help. 79 | You can also [get in touch with me directly via email](mailto:afiur.fahim@gmail.com) or [find me on Twitter](https://twitter.com/faahim01). :) 80 | 81 | ## License 82 | 83 | This project is licensed under the [MIT License](LICENSE). 84 | -------------------------------------------------------------------------------- /style/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | font-family: "Work Sans", sans-serif; 8 | } 9 | 10 | .container { 11 | height: 100vh; 12 | width: 100vh; 13 | margin: 0 auto; 14 | text-align: center; 15 | visibility: hidden; 16 | position: relative; 17 | overflow: hidden; 18 | } 19 | 20 | .container div.six { 21 | top: 10vh; 22 | z-index: 1; 23 | } 24 | 25 | .container div.seven, 26 | .container div.eight { 27 | width: 100vw; 28 | height: 100vh; 29 | position: fixed; 30 | top: 0; 31 | } 32 | 33 | .container > div { 34 | position: absolute; 35 | left: 0; 36 | right: 0; 37 | top: 20vh; 38 | } 39 | 40 | .one { 41 | font-size: 4.5rem; 42 | } 43 | 44 | .one > img { 45 | vertical-align: middle; 46 | margin-bottom: 10px; 47 | max-width: 100%; 48 | height: auto; 49 | } 50 | 51 | .two { 52 | font-size: 1.2rem; 53 | font-weight: lighter; 54 | } 55 | 56 | .three { 57 | font-size: 3rem; 58 | } 59 | 60 | .four .text-box { 61 | width: 600px; 62 | margin: 0 auto; 63 | border: 3px solid #aaa; 64 | border-radius: 5px; 65 | padding: 10px; 66 | position: relative; 67 | } 68 | 69 | .text-box p { 70 | margin: 0; 71 | text-align: left; 72 | } 73 | 74 | .text-box span { 75 | visibility: hidden; 76 | } 77 | 78 | .text-box .fake-btn { 79 | position: absolute; 80 | right: 5px; 81 | bottom: 5px; 82 | color: #fff; 83 | background-color: rgb(21, 161, 237); 84 | padding: 5px 8px; 85 | border-radius: 3px; 86 | } 87 | 88 | .five p { 89 | font-size: 2rem; 90 | position: absolute; 91 | left: 0; 92 | right: 0; 93 | } 94 | 95 | .idea-3 strong { 96 | padding: 3px 5px; 97 | border-radius: 3px; 98 | display: inline-block; 99 | } 100 | 101 | .five .idea-5 { 102 | font-size: 4rem; 103 | } 104 | 105 | .idea-5 span, 106 | .idea-6 span, 107 | .wish-hbd span { 108 | display: inline-block; 109 | } 110 | 111 | .idea-6 span { 112 | font-size: 15rem; 113 | } 114 | 115 | .six { 116 | position: relative; 117 | } 118 | 119 | .six img { 120 | display: inline-block; 121 | max-width: 100%; 122 | height: auto; 123 | } 124 | 125 | .six .hat { 126 | position: absolute; 127 | width: 80px; 128 | top: -35px; 129 | left: 41.5%; 130 | /* transform: scale(0.1); */ 131 | } 132 | 133 | .baloons img { 134 | display: inline-block; 135 | position: absolute; 136 | } 137 | 138 | .baloons img:nth-child(even) { 139 | left: -10%; 140 | } 141 | 142 | .baloons img:nth-child(odd) { 143 | right: -10%; 144 | } 145 | 146 | .baloons img:nth-child(3n + 0) { 147 | left: 30%; 148 | } 149 | 150 | .eight svg { 151 | width: 25px; 152 | position: absolute; 153 | top: 0; 154 | left: 0; 155 | visibility: hidden; 156 | z-index: -1; 157 | } 158 | 159 | .eight svg:nth-child(1) { 160 | top: 7vh; 161 | left: 5vw; 162 | fill: #bd6ecf; 163 | } 164 | 165 | .eight svg:nth-child(2) { 166 | top: 23vh; 167 | left: 35vw; 168 | fill: #7dd175; 169 | } 170 | 171 | .eight svg:nth-child(3) { 172 | top: 33vh; 173 | left: 23vw; 174 | fill: #349d8b; 175 | } 176 | 177 | .eight svg:nth-child(4) { 178 | top: 43vh; 179 | left: 57vw; 180 | fill: #347a9d; 181 | } 182 | 183 | .eight svg:nth-child(5) { 184 | top: 68vh; 185 | left: 7vw; 186 | fill: #c66053; 187 | } 188 | 189 | .eight svg:nth-child(6) { 190 | top: 42vh; 191 | left: 77vw; 192 | fill: #bfaa40; 193 | } 194 | 195 | .eight svg:nth-child(7) { 196 | top: 68vh; 197 | left: 83vw; 198 | fill: #e3bae8; 199 | } 200 | 201 | .eight svg:nth-child(8) { 202 | top: 86vh; 203 | left: 37vw; 204 | fill: #8762cb; 205 | } 206 | 207 | .eight svg:nth-child(9) { 208 | top: 94vh; 209 | left: 87vw; 210 | fill: #9a90da; 211 | } 212 | 213 | .wish-hbd { 214 | font-size: 3em; 215 | margin: 0; 216 | text-transform: uppercase; 217 | } 218 | 219 | .wish h5 { 220 | font-weight: lighter; 221 | font-size: 2rem; 222 | margin: 10px 0 0; 223 | } 224 | 225 | .nine p { 226 | font-size: 2rem; 227 | font-weight: lighter; 228 | } 229 | 230 | #replay { 231 | z-index: 3; 232 | cursor: pointer; 233 | } 234 | 235 | /* Media Queries */ 236 | @media screen and (max-height: 1000px) { 237 | .six .hat { 238 | left: 40%; 239 | } 240 | } 241 | 242 | @media screen and (max-height: 800px) { 243 | .six .hat { 244 | left: 37%; 245 | } 246 | } 247 | 248 | @media screen and (max-height: 700px) { 249 | .six .hat { 250 | left: 32%; 251 | } 252 | } 253 | 254 | @media screen and (max-height: 850px) and (max-width: 450px) { 255 | .six .hat { 256 | left: 32%; 257 | } 258 | } 259 | 260 | @media screen and (max-width: 500px) { 261 | .container { 262 | width: 90%; 263 | } 264 | 265 | .four .text-box { 266 | width: 90%; 267 | } 268 | 269 | .text-box .fake-btn { 270 | right: 5px; 271 | bottom: -38px; 272 | } 273 | 274 | .idea-5 span { 275 | display: block; 276 | } 277 | 278 | .idea-6 span { 279 | font-size: 10rem; 280 | } 281 | 282 | .six .hat { 283 | width: 50px; 284 | top: -20px; 285 | } 286 | 287 | .wish-hbd { 288 | font-size: 2.2em; 289 | } 290 | 291 | .wish h5 { 292 | font-size: 1.4rem; 293 | } 294 | 295 | .nine p { 296 | font-size: 1.5rem; 297 | font-weight: lighter; 298 | } 299 | } 300 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Happy Birthday!!! :) 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

18 | Hey 19 | Lydia 20 |

21 |

I really like your name btw!

22 |
23 |
24 |

It's your birthday!!! :D

25 |
26 |
27 |
28 |

Happy birthday to you!! Yeee! Many many happy blah...

29 |

Send

30 |
31 |
32 |
33 |

That's what I was going to do.

34 |

But then I stopped.

35 |

36 | I realised, I wanted to do something 37 | special.

38 |

Because,

39 |

40 | You are Special 41 | :) 42 |

43 |

44 | S 45 | O 46 |

47 |
48 |
49 | 50 | 51 |
52 |

Happy Birthday!

53 |
May the js.prototypes always be with you! ;)
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 |

Okay, now come back and tell me if you liked it.

124 |

Or click, if you want to watch it again.

125 |

:)

126 |
127 |
128 | 129 | 130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /script/main.js: -------------------------------------------------------------------------------- 1 | // Import the data to customize and insert them into page 2 | const fetchData = () => { 3 | fetch("customize.json") 4 | .then(data => data.json()) 5 | .then(data => { 6 | dataArr = Object.keys(data); 7 | dataArr.map(customData => { 8 | if (data[customData] !== "") { 9 | if (customData === "imagePath") { 10 | document 11 | .querySelector(`[data-node-name*="${customData}"]`) 12 | .setAttribute("src", data[customData]); 13 | } else { 14 | document.querySelector(`[data-node-name*="${customData}"]`).innerText = data[customData]; 15 | } 16 | } 17 | 18 | // Check if the iteration is over 19 | // Run amimation if so 20 | if ( dataArr.length === dataArr.indexOf(customData) + 1 ) { 21 | animationTimeline(); 22 | } 23 | }); 24 | }); 25 | }; 26 | 27 | // Animation Timeline 28 | const animationTimeline = () => { 29 | // Spit chars that needs to be animated individually 30 | const textBoxChars = document.getElementsByClassName("hbd-chatbox")[0]; 31 | const hbd = document.getElementsByClassName("wish-hbd")[0]; 32 | 33 | textBoxChars.innerHTML = `${textBoxChars.innerHTML 34 | .split("") 35 | .join("")}${hbd.innerHTML 38 | .split("") 39 | .join("")} { 301 | tl.restart(); 302 | }); 303 | }; 304 | 305 | // Run fetch and animation in sequence 306 | fetchData(); -------------------------------------------------------------------------------- /img/hat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 19 | 41 | 43 | 44 | 46 | image/svg+xml 47 | 49 | 50 | 51 | 52 | 53 | 58 | 64 | 82 | 100 | 118 | 136 | 154 | 172 | 190 | 208 | 226 | 236 | 237 | 238 | --------------------------------------------------------------------------------