Beaches need us

• 

  Starting page

• 

  Page when all the problems have been fixed

Where to check it out

http://pollution-is-a-mis.tech/ (because pollution is a mistake) http://beaches-need.us/

Inspiration

Numerous factors threaten our beaches today, whether it be because of global climate change or plastics thrown into the ocean. Almost all of these are man-made. Clearly, beaches need us to fix the problems we've made!

What it does

The webpage simply illustrates a couple of problems that are impacting beaches, and evolves depending on user interaction

How we built it

HTML, CSS, and JS once again

Challenges we ran into

Making animations was difficult, and I struggled with it for a while. My last project had abrupt transitions, which works well for a game like tetris, but I wanted to implement much smoother transitions. However, I had no idea where to start, and there were so many ways to do things, from manipulating element properties with javascript to adding transitions and taking keyframes with CSS.

Accomplishments that we're proud of

I managed to implement every transition that I wanted to within the timeframe, and every element gradually flows from one state or position to another. From making an infinite animation with the airplane to manipulating multiple properties at once with the oil spill, I'm proud of being able to get everything working.

What we learned

I learned all about CSS transitions and javascript animations with requestAnimationFrame.

What's next for Beaches need your support

I only examine problems beaches face that are visible from above, but there are many more under the surface. Adding more to the project showing humans' impacts underwater as well is thus a natural next step.

Built With

• css
• html
• javascript