🎃 Happy Fall-o-ween Project 🎃
This is my first animation project, and my first post here on DEV. 😃
So please forgive any formatting and grammar issues.
This is the 3rd and final project of 3.
Here are the first two projects, which I ended up combining to make into this one.
I was looking to challenge myself and work on my CSS/HTML, and I was tired of doing login forms, navbars, contact pages, etc.
I received an email for Codevember, which led me to codier's challenge page.
So I decided to have a little fun and do their Halloween challenge.
While doing research on something that I was having issues with, I came across this tutorialPure CSS Leaves Animation Effects - Latest Html and CSS Animation Effect Tutorial.
Living in Michigan the leaves 🍃 are totally awesome right now.
So I decided how cool would it be to combine the two projects.
Issues, struggles, obstacles
There were many times during this project, as simple as it seems, I truly felt I bit off more than I could chew.
But I was determined, and did not go to bed til 2am getting this done.
It is not everything I wanted it to be, when you look at the readme's for the projects, you can see that I wanted to do some text animation, and also include some sound.
When people say you don't need to be good at math to code have never had to figure out the degree's you have to rotate something to make it work. 😦
Doing this project was a lot different than doing the login forms, sign-up forms, and static web pages.
There is not a lot of HTML involved, and I had to do a lot of research, especially in regards to @keyframes, transform, translate, was the hardest.
For me this was like @media, and aria setting in normal projects.
It was still fun to do.
Well off to do the next project. 👻
Since I live in Michigan, and we have a major ❄️ snowstorm coming.
Think I need to make a ghost page with falling snow . 😃
Resources used
I used a lot of resources from Free Code Camp's Applied Visual Design section.
Listed below are just some of them.
Before and After pseudo elements explained - part one: how they work
CSS Animation Tutorial #4 - Keyframes
Applied Visual Design: Use the CSS Transform scale Property to Scale an Element on Hover
Applied Visual Design: Make a CSS Heartbeat using an Infinite Animation Count
Top comments (0)