Continuing the webmaking fun, over the last few days I’ve:
Thanks again to Codrops, I got to try my first “on scroll” effect layout. Still could use some polish, but happy at the attempt. See full screen.
This is a pretty amazing technique that I learned about thanks again to Codrops. You can take any SVG image file and use CSS to design and animate those graphical elements.
It’s a smart way to make an interactive infographic.
I remixed the Codrops tutorial and made the page below, using the Web Literacy Standard graphic as a basis. It triggers an animation when the page loads, and when you hover over the title elements, they also have some transitions.
Web Literacy Standard
The trick is grouping and naming the objects in your SVG editor (I used Inkscape) and then editing those objects in your CSS.
These sites where also helpful in making this:
- Defining CSS selectors: for explaining the how to select elements in CSS.
- CSS Animations: for clear examples of using CSS animations and most interestingly, how you could hover over one element to trigger an animation for another element. I’d like to try that next!
- Animate.css: a simple generator for fun CSS Animations. I used “bounceInDown”.
Again, best viewed in full screen.
Colorful Birds with CSS Animations and jQuery
Thanks to a friendly tutorial by Codrops, I put together this example of CSS transitions. The buttons link to somewhat random McSweeney’s articles. In the process, I also stumbled upon the site, Vintage Printable, which has beautiful naturalist illustrations in the public domain.
There’s also this clock, which is animated just by CSS transitions and rotations. The author also does a great job of explaining how to make it.
With that inspiration, plus a cool-looking site called Mulenog, I thought I’d mash up the clock and the moonscape into a space countdown.
After spending way more time than I’d like to admit, I hacked something together in jsbin. In the process of adapting the CSS clock, I found this helpful countdown code on Github to replace the analogue clock. I also obviously took a lot of elements from the pretty Mulenog to understand how they work.
So, here’s the space mashup! It’s not completely laid out properly for smaller screens, but maybe that’s next. See full screen.
I really enjoyed this project, which uses translucency in PNG files to fun effect:
So I decided to do a quick remix:
I’m also browsing this guide on learning Node.js, although it might be a while until I can really do something with it.
This took longer than I’d like to admit (two days worth), but I finally got the positioning down (more or less). Instead of using px as measurements, I switched to em and percentages, so that the objects stay (to some extent) in the same spot no matter the size of the page.
Also worked on cleaning up my code and adding a coin and some links. Learned how to suppress the underline in a link and made an entire div a link. (easter egg!)
The text still isn’t centering properly, so will have to keep playing.
Today I tried out Google Fonts but think I made a mistake, since they weren’t displaying properly. So then I went crazy trying to recreate a Super Mario scene, using images picked up across the web. I still can’t get the li to align properly. But, knowing it’s far from perfect, still happy with how far I got!
After publishing this, Laura generously sent me a remixed comic with very cool CSS tricks. Will try these out tomorrow!