View the full, interactive site here.
From the about page:
“We are a group of student videographers and photographers, web designers and developers, reporters and faculty brought together by a common goal: to share the voices of Puerto Ricans living in the aftermath of Hurricane Maria. We hope the stories of how they are coping and rebuilding can serve as lessons for future natural disasters.
We also wish to inform our audience about Puerto Rico’s recovery and encourage more people to get involved and join the conversation.
We are a part of an annual project by UNC-Chapel Hill’s School of Media and Journalism. In past projects, students have reported across five continents and produced award-winning multimedia work. As students, we’re learning the rewards and challenges of reporting on different cultures; as journalists, we are working as a team to tell the stories that are shaping the globe.”
As a web developer for this project, I have learned more about professional and collaborative web development than any other experience. Working on this website has given me a greater understanding of JavaScript, jQuery, Git and GitHub and the plugin ScrollMagic.
Over our spring break, we were lucky enough to travel to Puerto Rico to be a part of the storytelling process. This allowed us to get a better grasp of the impact of the hurricane and a better understanding of how to display these stories. Our days were spent coding in our hostel with short lunch breaks and some afternoons venturing into the city.
Learning ScrollMagic was one of my biggest tasks (I have now earned the title ScrollMagician). This plugin was mainly used in the interactives featured on the story pages. My interactive, within the Power story, used pinning and fade transitions to create a subtle movement effect more sophisticated than simply scrolling into the next paragraph. This feature allows the user to move along with the pace of the story and adds drama to the text. See the code below for how this was made possible:
The next interactive that featured ScrollMagic code took an array of images that changed when the user scrolled. This included tweening the source of the image being displayed and pinning the entire div, with similar code from the Power interactive, to make it seem as if the images were animated. See the code below for how this was made possible:
Overall, my time with Aftermath was all about adapting, collaborating and learning new skills over night. I hope to take these skills and improve on them in the future.