What started as a simple challenge to create a pure CSS toggle turned into a much larger project. After not working with CSS toggles for a while (having used mostly those from frameworks), I decided to try something from scratch for fun.
🎨Initially, my plan was just to create a toggle that changed the brightness of the page. But as I worked on it, the project evolved into a day/night toggle for a cityscape🌇. Now, clicking the toggle switches between day☀️ and night🌙, affecting elements like the sky, buildings, and even a person moving across a window in one of the buildings. Along the way, I added other animations, such as turning building lights on/off and cars driving by.
While the main focus was on CSS, I also worked with JavaScript for the interactivity. I realize that the CSS could be optimized by reducing redundancy, using parent classes more effectively by leveraging inheritance. I didn’t originally plan to implement so many features, so I ended up with a more complex structure than anticipated. If I were to redo this, I would plan the project more carefully in advance to organize my HTML, CSS and JS more efficiently.
I could also improve some of the JavaScript functions to make them more concise and cleaner, further reducing redundancy.
Overall, I had a lot of fun with this project 🤠 and really enjoyed the creative process.👨🎨 If I were to tackle something similar in the future, I’d be sure to better structure my work from the start to avoid the piecemeal approach I used this time. 🚀
- Website url : https://pitarchalexandre.github.io/city_shift/
- Code Pen
- HTML
- CSS
- Javascript
- WebStorm
Un projet d'animation amusant en HTML/CSS/JS 🎨☀️🌙🚗🌆
Ce qui a commencé comme un simple défi pour créer un toggle en CSS pur est devenu un projet beaucoup plus vaste. Après avoir utilisé principalement des toggles issus de frameworks ces derniers temps, j'ai décidé de me remettre à en créer un de zéro pour le plaisir.
🎨Au début, mon idée était juste de créer un toggle qui changeait la luminosité de la page. Mais au fur et à mesure que je travaillais dessus, le projet a évolué pour devenir un toggle jour/nuit dans un paysage urbain🌇. Maintenant, en cliquant sur le toggle, on passe du jour☀️ à la nuit🌙, avec des changements dans des éléments comme le ciel, les bâtiments, et même une personne qui se déplace à travers une fenêtre dans un des bâtiments. J’ai également ajouté d'autres animations, comme l’allumage/extinction des lumières des bâtiments et des voitures qui passent.
Bien que l'accent ait principalement été mis sur le CSS, j’ai aussi travaillé sur le JavaScript pour ajouter l’interactivité. Je me rends compte que le CSS pourrait être optimisé en réduisant la redondance, en utilisant mieux les classes parentes en tirant parti de l’héritage. Je n'avais pas prévu d'ajouter autant de fonctionnalités, ce qui a rendu la structure plus complexe que prévu. Si je devais refaire ce projet, je planifierais tout cela plus en amont pour mieux organiser mon HTML, CSS et JS.
Je pourrais également améliorer certaines fonctions JavaScript pour les rendre plus concises et propres, afin de réduire encore plus la redondance.
Dans l’ensemble, j’ai pris beaucoup de plaisir à réaliser ce projet 🤠 et j’ai vraiment apprécié le processus créatif.👨🎨 Si je devais refaire quelque chose de similaire, je structurerais mieux mon travail dès le départ pour éviter l’approche fragmentée que j’ai utilisée cette fois-ci.🚀
- Url du site : https://pitarchalexandre.github.io/city_shift/
- Code Pen
- HTML
- CSS
- Javascript
- WebStorm