During our early childhood, we were fascinated by the thought of the unknown. Staring into the night sky genuinely wondering what is really is up there. Trying to find this information in 2007 was kinda difficult looking through countless pdf articles about “How Pluto is a planet?” and werid stuff like that completely desensitized us from exploring the wonders about our solar system. Yet this CTRL-SHIFT competition kinda lit a flame inside us of once again. Our goal on this website was to make it extremely user-friendly and mobile friendly to satisfy these young minds that are eager to learn what truly is in our solar system.
Our vision of Spacely was founded under the idea of that your in the cockpit of a space ship flying throughout the solar system. This idea derived from multiple drawing of the concept layout that comprised the website, this allowed us to explore web design whilst still sticking to our roots of what we wanted the website to be. After countless hours the website has turned into a state that we both truly love and are proud of.
The main page was created to immerse you into the thought process that you are going to explore the solar system. The solar system page was made by creating a solar system out of still images of planets and circle to simulate the orbit path within a 2d. We would then allow the planets to follow the path from 0%-100% by rotating on the z-axis on orbit lines, and rotating the planet -90deg and whits rotating it on the Y-axis from 360deg to 0deg. As for the Shadows for the planet, we performed a simple box-shadow from 0%-100% with different box-shadow offsets. The planet pages were created with the idea of a simple and easy way of digesting the planet information. In contrast to the typical pdf report. The text box was created to have a blur effect to allow an increase in visibility and ascetics when reading the information on the starlit background. The spinning planet was created by having a square with a border radius, to then span a map of any planet then simulating the Illusion of it spinning. Our entire thought process was to create a site that would allow the user mind to wonder and imagine what really is inside our solar system.
Credit: http://www.independent-software.com/deconstructing-css-3-making-of-css3-solar-system-animation-3d-transformations.html(3D space transformations) https://www.script-tutorials.com/night-sky-with-twinkling-stars/(Stars background) https://css-tricks.com/molten-leading-css/(responsive text size) https://subvisual.co/blog/posts/62-perfecting-a-css-3d-animation/(3d Cs animation) @juliangarnier https://github.com/juliangarnier(solarsystem concept) https://stackoverflow.com/questions/14233341/how-can-i-rotate-an-html-div-90-degrees(Rotation of planets) https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp(animation speeds) https://www.w3schools.com/css/css3_3dtransforms.asp(transdormation) https://www.w3schools.com/css/css_display_visibility.asp(Display) https://www.w3schools.com/css/css3_fonts.asp(different fonts) https://solarsystem.nasa.gov/planets/overview/(information for planets) https://codepen.io/Jack-undo/pen/rQGzMw(Startup Animation)