This project is an immersive personal story told through the scrollytelling technique. It aims to captivate users by transforming a standard web page into an interactive experience that responds to scrolling. The story unfolds as the user scrolls through the page, with animations and content changes that engage and hold the user's attention.
The story is a personal narrative centered around my hobby of hiking. It details my journey from the first encounter with hiking in a survival camp to becoming an experienced hiker and instructor. The story is conveyed using various animation techniques to create a truly interactive scrollytelling experience.
- Code Editor: Visual Studio Code
- Languages: HTML, CSS, JavaScript
- Libraries: GSAP & ScrollTrigger plugin
- Deployment: Project is deployed online for mobile-optimized viewing
- Scroll-Activated Animations: Elements and sections come alive as the user scrolls through the narrative.
- Video Integration: Videos are controlled by scrolling, allowing users to "scrub" through as they read.
- Interactive Maps: Mapbox integration to illustrate various hiking locations and future adventure plans.
- Dynamic Facts: Numbers animate to count up to the actual figures as the user scrolls past them.
To get the project up and running on your local machine:
- Clone the repository to your local machine.
- Open the project in Visual Studio Code or your preferred code editor.
- Ensure you have internet access to load CDN resources like GSAP and Mapbox.
- Open
index.htmlin a web browser to view the project.
Scroll through the page to experience the story. The interactive elements and animations are triggered by scroll events, designed to illustrate the narrative effectively.
- GSAP for the powerful animation platform.
- ScrollTrigger plugin for scroll-based animations.
- Mapbox for the interactive maps feature.
Marats Samigullins - Devine
This project is open-sourced under the MIT license.