In this project we are making a scrollytelling story that has a socially impactful theme about Global Warming and how it affects the climate.
The story is about how Global Warming is affecting the different seasons; Spring (front page), Summer, Fall and Winter. In every season-scene, it contains informational text about how Global Warming is negatively impacting the different seasons. In additional, you will see many different relevant animations during each scene.
The project starts at the top, and the users will then scroll down to see the story evolve. If the users needs help, they can easily click on the "info"-button that is placed in the top left corner. In this info box you will find useful information about how to use the website. On the bottom at the page, you will find a "top"-button, that will take you back to the start.
For us as developers, the project is useful for further developing our skills and challenging ourselves. A scrollytelling is also a good way to tell a story. For the consumer of the story, it is useful in terms of how the topic will enlighten the consumer on serious topics such as climate change. It sheds some light on some of the grave consequences global warming will have on the earth and specifically changes in seasons as we know them.
In this website, technologies such as HTML, CSS/SASS (including SCSS variabels) and JavaScript is used to develop the scrollytelling website. We have chosen to use Scroll Magic as out Intersection Observer technology in this scrollytelling. This was a simple and effective way to develop out scrollytelling, using each scene as a trigger for our animations. The code is constructed using BEM, for a more structured and effective workflow. For better accessibility, we have implemented several media-quieries that for example reduces motions.
The group of this project (group 4), Lisa Mari, Alexandra, and Fadumo, are all responsible to contribute and maintaining the project. Each member contributes to the project through Git commits, working on different branches.
https://www.nytimes.com/2020/05/18/climate/climate-changes-hurricane-intensity.html
https://www.un.org/sustainabledevelopment/climate-change/
https://climatekids.nasa.gov/permafrost/
https://www.worldwildlife.org/pages/why-are-glaciers-and-sea-ice-melting
https://yaleclimateconnections.org/2019/07/how-climate-change-is-making-hurricanes-more-dangerous/