Included here are ten, stripped down examples of effects you might consider using as part of your customization of your card on our
/people page. Each of these links directly to the demo, but you can see the full source code below, too.
To play around with these demos, clone this repository by running
git clone https://gist.github.com/8e881e01245989794c5e.git in your terminal. This will create an unfortunately-titled folder,
8e881e01245989794c5e which you can
cd (change directory) into. Once there, you should be able to open up each HTML file in your own text editor and/or browser to explore.
In rough order of complexity:
round.htmlrounds the corners of a
fade.htmluses CSS to animate the fading of an element when we hover over it.
divupside down when we hover over it using CSS.
sprite.htmluses a sprite sheet and CSS to achieve flipbook-style animation.
random.htmluses JS to randomly reorder a list whenver you click the mouse.
mouse.htmluses JS to place a div randomly, and when we're close enough, make it follow our mouse.
<canvas>element to draw a smiley face.
And finally, a boring PS:
boilerplate.html is a bare HTML stub you can use as a template for your own explorations.