APEX Nutrition Scroll Animation Landing Page

A premium, Apple-style product landing page built with HTML, CSS, and vanilla JavaScript. The page uses a frame-by-frame canvas image sequence tied to scroll progress, with cinematic text scenes, smooth transitions, and a modern product-focused layout.

Demo Video

If video preview is not visible in your GitHub view, open directly: Watch demo

Features

1. Scroll-driven image sequence animation on <canvas> (35 frames)
2. Full-screen sticky animation section with scene-based text overlays
3. Preloader with progress bar while frames load
4. Smooth frame interpolation (requestAnimationFrame + lerp)
5. Animated sections for stats, features, and CTA
6. Responsive design for desktop and mobile
7. Zero frameworks, no build tools required

Tech Stack

1. HTML5
2. CSS3
3. Vanilla JavaScript (ES6)

Project Structure

How It Works

1. script.js preloads all 35 frame images from images/.
2. A loader displays progress until all frames are ready.
3. During scroll, progress is mapped to frame index (0 -> 34).
4. Canvas draws frames in cover mode to fill the viewport.
5. Seven text scenes fade/slide in and out based on scroll ranges.
6. Remaining sections reveal with IntersectionObserver.

Run Locally

No installation is required.

1. Clone or download this repository.
2. Open index.html in your browser.

For best local behavior, run with a simple static server:

Then open http://localhost:8000.

Customization

1. Replace animation frames in images/ (keep sequential naming pattern).
2. Update scene timing in script.js (SCENE_DEF).
3. Change brand text/content in index.html.
4. Tune animation speed by adjusting .scroll-canvas-wrap { height: 1200vh; } in style.css.

Notes

1. Font is loaded from Google Fonts (Inter).
2. demo.mov is included for visual reference in the README.

License

This project is for portfolio/demo use. Add a license file if you plan to distribute commercially.