Les Amis d'Antalaha

Association locale · vanille, mer et entraide

Essayez le logo

Faites glisser le logo avec le doigt ou la souris pour le tourner. Après un court instant, il reprend son balancement tout seul.

Couleurs

Comment ça marche ?

  1. Une scène : new Zdog.Illustration({ element: '#logo' }) relie Zdog au canevas.
  2. Des formes : un Rect tourné de 45° donne un losange, un Shape avec un path dessine la lettre A.
  3. Une ancre : Anchor regroupe les pièces du logo.
  4. Une boucle : requestAnimationFrame redessine la scène environ 60 fois par seconde avec illo.updateRenderGraph().
  5. Le toucher : dragRotate: true permet de tourner la scène au glissement.

Lisez les fichiers dans cet ordre : js/config.js, js/logo.js, puis js/main.js. Chaque ligne est commentée.

Intégrer le logo dans votre en-tête

Copiez le bloc ci-dessous dans votre page, puis chargez Zdog et les trois fichiers JavaScript :

<div class="scene-logo">
  <canvas id="logo" role="img" aria-label="Logo"></canvas>
</div>

<script src="/libs/zdog.min.js"></script>
<script src="js/config.js"></script>
<script src="js/logo.js"></script>
<script src="js/main.js"></script>

Pensez à donner une taille CSS à .scene-logo (par exemple 96 px sur 96 px) : le canevas la remplit automatiquement.