Up Above the World, So High (and Far Away)!
by Revathi_Kannan in Living > Education
570 Views, 3 Favorites, 0 Comments
Up Above the World, So High (and Far Away)!
TWINKLE, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
While I sing this rhymes, I know most of you here would have been singing along with me at least in your minds.
Rewinding back the memories related to the instances of the night always makes us interested? Isn't it? They are so so, close to us.
The Earth, stars, moon, sun, mars, galaxies, asteroids, comets, the Milky way, much more beyond and beyond this universe; For the past billion years, we have been researching; yet, many are still hidden.
Since human beings were civilised, we have been doing numerous researches on the known and lot more about the unknown.
For about 100 years and more, we have been trying to know about the most mystical in this universe.
Any guesses, from the crowd on what i signify as the mystical?
- This is how i started with my latest speech at Toastmasters club, as part of improvising my public speaking skill.
Btw, if any of you guessed that the mystical is Black Hole. Yes, it is!
And the story goes like, earlier years we did not have any real image(imaging) of the BlackHole. It was during April 2019, almost 10 years after the launch of The Event Horizon Collaboration, the Team has come up with the First ever image of the BlackHole. It was trending news then.
Source of information:
https://www.nustar.caltech.edu/news/nustar190410
This news bit inspired me to learn more about the findings and deliver it as part of my Toastmaster project pathway as well.
If anyone interested, can watch my speech video at:
And through this instructable, i am taking another step to create an animation of the black hole : as how it would be revolving in the outer space.
Supplies
(Software tools, required to be installed in your machine)
HTML5
CSS3
Editor
Browser
Preparing the Environment!
Here the environment, is making the software and tools ready to start the work!
I have Ubuntu16.04(Linux version) installed in my machine. On top of it, I have:
1. Atom, as Editor
2. Firefox, as Browser
along with that, i already have:
1. HTML5
2. CSS3
installed and using it whenever required to work on!
Let's Start Coding...
HTML and CSS are quite easy web development tools. And to create an end product/result, you can do any number of times of executing and testing the code(in programming language).
I have done so many trial and error case earlier, to bring the result to final shape! So here in this tutorial i am gonna describe the features(attributes, parameters) added as part of the code to create the final animation.
Overall Structure of the Code
The overall structure of the code will be within the tags:
Head
Style
so simple and curated well, to have minimal lines but bring the end result!
As part of explaining the coding, i split full code by highlighting every section and describing the attributes added for the purpose. While describing, i will be giving an overview (of the specific feature) and not on every character added.
*** Please refer to the picture added at every section, to understand the code and the reasoning ***
End-to-end Coding - Part1
End-to-end Coding - Part2
1. Background added with color code #000, for black color
2. Display is made as grid to position the data in rows and columns rather than float etc.
3. Place-content is made as centre to keep the image(data) at the centralised position of the web page.
4. Height is made as 100vh(100% percentage of the viewport; viewport is the current display part where you see through the web page).
5. Filter made as blur, as we require the content to be blurred and not sharp.
End-to-end Coding - Part3
b.before and b.after are two elements added to come before/after the element content positionally. These are tagged as before and after as it allows you to insert content onto a page without it needing to be in the HTML.
Display : block is used to define attributes of section etc.
border-radius : 50% is added for circle feature.
End-to-end Coding - Part4
1. Width : added in viewport measurement value
2. Height : added in viewport measurement value
3. Box-shadow represents the shadow we add to the outline layer in shades of orange color. It’s parameter includes:
a. Horizontal offset : +ve right side; -ve left side
b. Vertical offset : +ve below the box; -ve above the box
c. Blur radius : 0, sharp; highest, more blur.
d. Spread radius : +ve, increases size of shadow; -ve, decreases size of shadow.
e. Color value in hex code.
#f50, #f60, #f80 shades of orange.
Animation feature is added with name bh, duration 5s, timing-function as linear, iteration count (no of tunes to perform animation as infinite
End-to-end Coding - Part5
1. 0% - beginning of animation
100% - end of animation
2. transform always paired with different positioning attribute. Here we need to add with rotate and from
0 degree - start point
-360 degree - end point
* here -360 is for counterclockwise, if +360, it is clockwise.
End-to-end Coding - Part6
1. Content is empty, so we use “”
2. Background is made to white
3. Position: relative, adds values relative to the Normal position. So top:6px adds 6pixels to the elements top.
End-to-end Coding - Part7
1. Width, height, left same as explained earlier.
2. Box-shadow is defined for yellow object revolving around the orange shades which are outer rings of the black hole.
End-to-end Coding - Part8
End Result!
My github repo for the source code: https://github.com/backshell/blackholeanimation