Bohr Model of Atom Animations Using HTML, CSS and JavaScript (Free Source Code)
Bohr Model of Atom Animations: Science is enjoyable when you get to see how different things operate. The Bohr model explains how atoms are built. What if you could observe atoms moving and spinning in your web browser?
In this article, we will design Bohr model animations using HTML, CSS, and JavaScript. They are user-friendly, quick to respond, and ideal for students, teachers, and science fans.
You will also receive the source code for every atom.
Source: Material Ui
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
- JS (JavaScript)
Recommended for You
- Exponential Growth Calculator
- Watts to kWh Calculator
- CSS DNA Animation Effect 🧬
- Structure of Carbon Atom Animation
What Is the Bohr Model?
According to the Bohr model, atoms consist of a nucleus surrounded by electrons that travel in fixed orbits. The number of electrons in each element is not the same.
We can illustrate the movement of electrons in these orbits using animation. It is easy to understand but very effective.
Each shell has a limited number of electrons:
- 1st shell: max 2
- 2nd shell: max 8
- 3rd shell: max 18
- and so on…
Why Use HTML, CSS, and JavaScript?
Since they can be used on any device, including phones, laptops, and tablets, you can use simple tools. You only need a browser and some code.
Features of the Bohr Model Animation
- Electrons move smoothly in circular paths
- The nucleus stays at the center
- Labels show atomic number and symbol
- Mobile-friendly and easy to customize
Bohr Model of Atom Animations
Bohr Model of Hydrogen
Hydrogen has 1 electron in the first shell. This is the simplest atom.
Get Source Code: Bohr Model of Hydrogen
Bohr Model of Helium
Helium has 2 electrons in the first shell.
Get Source Code: Bohr Model of Helium
Bohr Model of Lithium
Lithium has 2 electrons in the first shell and 1 in the second.
Get Source Code: Bohr Model of Lithium
Bohr Model of Beryllium
Beryllium has 2 electrons in the first shell and 2 in the second.
Get Source Code: Bohr Model of Beryllium
Bohr Model of Boron
Boron has 2 electrons in the first shell and 3 in the second.
Get Source Code: Bohr Model of Boron
Bohr Model of Carbon
Carbon has 2 electrons in the first shell and 4 in the second.
Get Source Code: Bohr Model of Carbon
Bohr Model of Nitrogen
Nitrogen has 2 electrons in the first shell and 5 in the second.
Get Source Code: Bohr Model of Nitrogen
Bohr Model of Oxygen
Oxygen has 2 electrons in the first shell and 6 in the second.
Get Source Code: Bohr Model of Oxygen
Bohr Model of Fluorine
Fluorine has 2 electrons in the first shell and 7 in the second.
Get Source Code: Bohr Model of Fluorine
Bohr Model of Neon
Neon has 2 electrons in the first shell and 8 in the second. Full outer shell!
Get Source Code: Bohr Model of Neon
Bohr Model of Sodium
Sodium has 2 electrons in the first shell, 8 in the second, and 1 in the third.
Get Source Code: Bohr Model of Sodium
Bohr Model of Magnesium
Magnesium has 2, 8, and 2 electrons in its shells.
Get Source Code: Bohr Model of Magnesium
Bohr Model of Aluminium
Aluminium has 2, 8, and 3 electrons in its shells.
Get Source Code: Bohr Model of Aluminium
Bohr Model of Silicon
Silicon has 2, 8, and 4 electrons in its shells.
Get Source Code: Bohr Model of Silicon
Bohr Model of Phosphorus
Phosphorus has 2, 8, and 5 electrons in its shells.
Get Source Code: Bohr Model of Phosphorus
Bohr Model of Sulfur
Sulfur has 2, 8, and 6 electrons in its shells.
Get Source Code: Bohr Model of Sulfur
Bohr Model of Chlorine
Chlorine has 2, 8, and 7 electrons in its shells.
Get Source Code: Bohr Model of Chlorine
Bohr Model of Argon
Argon has 2, 8, and 8 electrons. A stable atom!
Get Source Code: Bohr Model of Argon
Bohr Model of Potassium
Potassium has 2, 8, 8, and 1 electrons in its shells.
Get Source Code: Bohr Model of Potassium
Bohr Model of Calcium
Calcium has 2, 8, 8, and 2 electrons.
Get Source Code: Bohr Model of Calcium
Bohr Model of Scandium
Scandium has 2, 8, 9, and 2 electrons.
Get Source Code: Bohr Model of Scandium
Bohr Model of Titanium
Titanium has 2, 8, 10, and 2 electrons.
Get Source Code: Bohr Model of Titanium
Bohr Model of Vanadium
Vanadium has 2, 8, 11, and 2 electrons.
Get Source Code: Bohr Model of Vanadium
Bohr Model of Chromium
Chromium has 2, 8, 13, and 1 electrons.
Get Source Code: Bohr Model of Chromium
Bohr Model of Manganese
Manganese has 2, 8, 13, and 2 electrons.
Get Source Code: Bohr Model of Manganese
Bohr Model of Iron
Iron has 2, 8, 14, and 2 electrons.
Get Source Code: Bohr Model of Iron
Bohr Model of Cobalt
Cobalt has 2, 8, 15, and 2 electrons.
Get Source Code: Bohr Model of Cobalt
Bohr Model of Nickel
Nickel has 2, 8, 16, and 2 electrons.
Get Source Code: Bohr Model of Nickel
Bohr Model of Copper
Copper has 2, 8, 18, and 1 electrons.
Get Source Code: Bohr Model of Copper
Bohr Model of Zinc
Zinc has 2, 8, 18, and 2 electrons.
Get Source Code: Bohr Model of Zinc
Educational Benefits
These animations help:
- Students learn faster
- Teachers explain better
- Bloggers create engaging content
FAQs
Q: Are these models responsive?
Yes, they work on all screen sizes.
Q: Can I edit the animation speed?
Yes, change the animation duration in the CSS.
Q: Can I use these for school projects?
Absolutely! They are free to use and share.
Final Thoughts
We hope these Bohr Model animations make learning atomic structure easier and more fun. You can create interesting visual tools using only HTML, CSS, and JavaScript. Explore the models, modify them, and share them with your classmates!
You can download the codes and share them with your friends.
Let’s make atoms come alive!
Stay tuned for more science animations!
Please subscribe to our YouTube Channel, thanks!
Would you like me to generate HTML demo code or download buttons for these elements as well?
