Démonstration interactive de la nouvelle propriété CSS Anchor et des Web Components à travers un article
L'objectif de ce projet est de présenter de manière précise et interactive le fonctionnement de la propriété CSS Anchor. À travers des Web Components et des animations, nous explorons les différentes techniques de positionnement et de comportement offerts par cette nouvelle spécialité CSS.
- Démonstration interactive utilisant Query Container et Anchor
- Exemple de différents positionnements avec la propriété Anchor
- Animations illustrant les comportements de placement
- Deux démos interactives montrant des approches distinctes de positionnement par Anchor
└── AnchorMotionAPI/
├── README.md
├── index.html
└── src
├── components
└── styles.cssANCHORMOTIONAPI/
__root__
index.html Page d'accueil
src
styles.css Page css du sitecomponents
compatibility-section.js Petit web component pour réduire du code dans la section compatibilityanchor-code.js Web component utilisé pour mettre à jour du code dynamiquementanchor.js Code qui va positionner les éléments de la deuxième démoshow-code.js Code utilisé pour les bouts de certains éléments de l'articleanchor-btn.js Code utilisé pour les boutons qui vont avoir un impact sur les positions d'un élémentanchor-exemple.js Première demo utilisant un autre fonctionnement
Aucun prérequis nécessaire, ce site n'utilise pas de langage demandant une installation
Installer AnchorMotionAPI sur votre machine:
Récupérer le dossier de travail:
- Clone AnchorMotionAPI repository:
❯ git clone https://github.com/MuuvaY/AnchorMotionAPI.gitPour effectuer le test de l'application, ouvrez simplement le fichier html.