Homework #4 – Bouncing Sunny Goat

For homework 4, I made a bouncing goat which will observe the sun. When the photocell detects more light, the sun in the background will become less transparent. After the light exceeds the threshold, the goat will start bouncing and running.

First I create the website in Codepen, then minified by an online compressor, then make the goat move and the opacity of the sun change based on the photocell sensor value.

Ternary judgment for adding class
Calculate and replace the opacity value by CSS

I add a “move” class to the goat to start the jumping animation and change the sun’s opacity by CSS. It is very playful and I think seems awesome just using some online images to make the animation collage.