***9-9-19: Examples of on-hover effects to add to a person card
You can mess around with the code by downloading it from my gists on github! This code sketch is useful for making your people cards because it displays a few of the many hover effects you can use!
3-1-19: octopus
I was reading one of my favorite books, The Soul of An Octopus, by Sy Montgomery, and I wanted to make an octopus leg that when you click on the sucker, you get some kind of pop noise, kind of like the sound of a sunction cup popping off of something. Here, I played a lot with positioning to get the circles on top of the suckers. I also played around with opacity to give them a look that I really liked.
I used the "click" event listener in javascript to trigger the sound effect that I added. In the middle of making this codesketch, while browsing through sound effects, I found the one I ended up including, which think is much better than a pop:)
This was the first time I ever incorporated audio into something I made. It's also the first time I ever used the click event listener. I love this codesketch because it's so playful and surprising and it incorporates one of my favorite animals. I think the combination of whimsical and animal exemplifies my aesthetic;)
...................................................3-2-16: popcorn
I actually integrated the pop noise in this codesketch to make popcorn! When you click on the image of kernals, it different popped popcorns appear on the screen and you hear a "pop" noise! The popcorn will be popped as long as you old down the mouse!
I made this by using the mousedown, mouseup event listener. The browser is listening for those events when they happen on the kernals and setting variables to true and false. When mousedown is happening and the variable is true, then it runs a function that makes the popcorn divs and plays the sound. This was the first time I used the "setInterval" method, which runs a function (the popcorn-making function) every 150 milliseconds.
When the mouse is up and the variable becomes false, the "clearInterval" function is run and this stops the setInterval function.
3-3-15: namibia
3-4-16: prada
This codesketch is just so random. I wanted to make something that felt incongruous and I ended up juxtaposing wild animals and consumerism — a hippo and a butterfly in a Prada store. I played with animations (the butterfly is two pictures of a butterfly side-by-side and the animation goes between them by changing the background position of the div.) The butterfly div's position is set to the coordinates of the mouse and since I got rid of the pointer, it becomes the 'face' of the mouse.
The hippo is just an image change on hover, so it looks like it's opening its mouth.
I feel like I'm really developing my whimscial, colorful, somewhat surreal and random aesthetic and I'm proud of that.
...................................................3-5-16: mood buttons
Here, I used an event listener on different circular, button divs. Each button brings up a particular image on the document associated — the image is associated with the mood on it.
I like how the buttons randomly change color each time I refresh the page. (I've used this Math.random()) color trick quite a few times throughout codesketches:)
3-6-16: anaiya story
3-12-16: mom bday
3-17-16: brain weather
5-12-19: iphone dilemmas and contemplations
4-14-20: killing corona