Lorem ipsum dolor sit amet
So, what is this page? What's it for? It's a just a lot of random, strange things that are moving around at me!
Well, the purpose of this page really isn't to have a reason other than it's where I put my small tidbits of code. This page is really just to put things as I learn more about various things. Right now, it's where tidbits for CSS animation is going. Later on, there'll be better things here. Eventually, when my journey as a web developer is at a point where I can show off and add more to the main site pages, this page will likely either go away, or become a way for me to give back, to help someone else who is trying to make this same journey.
That strange bit of words up top, by the way, are just random words used to help test a site, see how the formatting looks, etc. If you use google translate, it won't mean very much. There are a lot of Lorem Ipsum generators online and even with Atom, which I use to code this website. It can be handy to check out a page full of content when you have really nothing to put there.
The code here is primarily forked from example code given from the courses I am taking on Udemy. I tweaked a little, and will change more of it over time to make it more unique as I learn more.
So here are the different code snippets and randomness that I am working on through my journey of learning web development!
Simple Loading Icon
So this snippit is a loading icon that would be used while a page or element is loading. It uses two keyframes, one to make the colors change and to make the object rotate. The other keyframe is simply a way to make the text below the spinner appear after a few seconds by controlling the opacity.
This element, like the others, use the jquery javascript framework to detect clicks, so click on the loader and the animation will start. Click again and it will stop itself.
Because there is nothing here! MWAHAHAHAHAHA!
Enjoy the spinnie-thingie!
Animated Boxes
So this little snippit is just a bunch of boxes, animated to change size. The animation is handle by only one use of keyframes, with the even numbered animation reversed.
As with the last one, jQuery was used to make it start and stop with a click, so click and watch the odd little code go to work!