antonin gallon
c4456d587c
All checks were successful
Deploy / Deploy to Production (push) Successful in 14s
53 lines
2 KiB
Markdown
53 lines
2 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Project Overview
|
|
|
|
This is a **prototype for an animated image gallery component** intended for integration into a Kirby CMS project. The animation displays images in a continuous scrolling pattern across multiple columns/rows.
|
|
|
|
## Running the Project
|
|
|
|
This is a PHP project with no build system. To run locally:
|
|
```bash
|
|
php -S localhost:8000
|
|
```
|
|
Then open `http://localhost:8000` in a browser.
|
|
|
|
## Architecture
|
|
|
|
### Configuration (index.php:1-28)
|
|
|
|
The animation is configured via PHP variables at the top of `index.php`:
|
|
- `$mode`: `'vertical'` or `'horizontal'` - scroll direction
|
|
- `$set`: Image set name (e.g., `'LEGACY'`, `'OLLY'`)
|
|
- `$secondsPerImage`: Controls animation speed
|
|
- `$imagesSets`: Associative array defining image paths per set
|
|
|
|
### Animation System
|
|
|
|
**CSS-based infinite scroll** using duplicated images:
|
|
- Images are rendered twice in each track (`index.php:63-68`) to create seamless looping
|
|
- Animation translates from 0 to -50% (or vice versa), jumping back invisibly when the duplicate starts
|
|
- Odd columns scroll down/right; even columns scroll up/left
|
|
- Column offsets and delays are calculated based on image count to stagger the animation
|
|
|
|
**Key CSS classes** (BEM notation):
|
|
- `.gallery-animation--vertical` / `.gallery-animation--horizontal`: Mode modifiers
|
|
- `.gallery-animation__wrapper`: Flex container for columns
|
|
- `.gallery-animation__column`: Individual scrolling lane
|
|
- `.gallery-animation__track`: Animated element containing images
|
|
- `.gallery-animation__image`: Individual image styling
|
|
|
|
**CSS custom properties**:
|
|
- `--animation-duration`: Total cycle duration (set via PHP)
|
|
- `--gap`: Spacing between columns/rows
|
|
- `--vertical-wrapper-width`: Container width in vertical mode
|
|
|
|
### Accessibility
|
|
|
|
Respects `prefers-reduced-motion` by disabling animations (`style.css:149-153`).
|
|
|
|
## Language
|
|
|
|
Code comments and documentation are in French.
|