Project Overview
This project is a scroll-driven storytelling website about climate change and sustainability, inspired by the United Nations Sustainable Development Goals related to climate action. I selected this topic because climate change affects everyone, and storytelling can make environmental issues more engaging and understandable for users.
Techniques I Used
The project uses a narrative structure where each section introduces a new stage of the story: the planet, human activity, climate effects, sustainable solutions, and a final call to action. Scrolling guides the user naturally through the experience while animations appear as the user moves down the page.
I used the Intersection Observer API in JavaScript to detect when sections enter the viewport and trigger reveal animations. CSS animations such as floating, fading, scaling, and transitions were used to create movement and support the visual storytelling.
Sass and BEM methodology helped me organize reusable components and maintain a structured stylesheet. I also considered accessibility through semantic HTML, responsive layouts, colour contrast, and prefers-reduced-motion so that users who prefer less movement can experience the content without the animations.
What I Learned
This project helped me understand how scrolling can become part of the storytelling experience instead of simply being a way to move through a webpage. Dividing the content into stages made it possible to reveal the information gradually and create a clearer narrative.
I also learned how JavaScript and CSS can work together to control animations based on the user's position on the page. Using Intersection Observer was useful because animations could be triggered only when the relevant content entered the viewport.
Challenges
One of the main challenges was coordinating the scrolling experience with the animations. The movement needed to support the story without becoming distracting or making the content difficult to read. I had to consider the timing, size, and placement of the animated elements in each section.
Another challenge was maintaining a consistent experience across different screen sizes. Because each section fills a large part of the viewport, responsive sizing and spacing were important to prevent content from becoming too large, too small, or incorrectly positioned.
What I Would Improve
If I continued developing this project, I would make the transitions between the storytelling sections smoother and experiment with more subtle scroll-based effects. I would also improve the visual connection between the different stages of the climate story so that the transition from causes to effects and solutions feels even more continuous.
I would also test the project on a wider range of mobile devices and browsers and continue improving accessibility for keyboard users and users who prefer reduced motion.