https://github.com/juliolmuller/poseidon-splash-screen

A cool splash screen for the Poseidon brand.
https://github.com/juliolmuller/poseidon-splash-screen

animation css html keyframes spa splash-screen svg

Last synced: 21 days ago
JSON representation

A cool splash screen for the Poseidon brand.

• Host: GitHub
• URL: https://github.com/juliolmuller/poseidon-splash-screen
• Owner: juliolmuller
• License: mit
• Created: 2022-12-30T02:57:56.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-30T03:40:51.000Z (about 2 years ago)
• Last Synced: 2024-11-15T01:34:07.944Z (3 months ago)
• Topics: animation, css, html, keyframes, spa, splash-screen, svg
• Language: HTML
• Homepage: https://juliolmuller.github.io/poseidon-splash-screen/
• Size: 6.84 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  :fountain_pen: Animated Splash Screen





  Lessons Learned   |   

  Technologies





  

  

  

  

  





  



This project is a proof of conceipt to develop a splash screen for SPA's (single page applications) using inline SVG and CSS, with cool and performant animations to make the application loading fun and less painful 😜. 

> DISCLAIMER: The brand/logo "_Poseidon_" does not represent an existing product. It was developed for the purpose of this PoC alone.

[Check out the page running!](https://juliolmuller.github.io/poseidon-splash-screen)

## :trophy: Lessons Learned

- Creating `CSS @keyframes` to define custom and multiple animations to HTML elements;

- Selecting SVG pieces (`` tag) and applying animations separately to each one;

- Using browser devtools to manipulate CSS properties and define animations states;

- CSS properties related to `animation` and `transform` to create performant transitions;

- CSS pseudo selector `:empty`, to transition the splash screen to the SPA when it has finished loading;

## :rocket: Technologies & Resources

- HTML

- SVG

- CSS

---

:star2: Feel free to submit pull requests to improve this project.