Annuaire › Code ouvert
Code publié par son auteur, en lecture seule. « Copier dans mon espace » crée un nouveau site à vous (non publié) que vous pouvez modifier librement.
index.html · 6.5 Ko
<!DOCTYPE html>
<!--
Logo 3D animé — Tutoriel Zdog niveau DÉBUTANT
--------------------------------------------------------------------------
Cas d'usage : l'en-tête d'un site d'association (« Les Amis d'Antalaha »)
avec un logo en 3D qui se balance doucement et que l'on peut faire tourner
au doigt ou à la souris.
Structure de la page :
<header> : l'en-tête avec le canevas du logo (c'est CE bloc que vous
pourriez copier dans votre propre site) ;
<main> : les contrôles pour jouer + des explications ;
<footer> : une bande de vagues décorative.
-->
<html lang="fr">
<head>
<meta charset="utf-8">
<!-- Viewport : indispensable pour un affichage correct sur téléphone -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Logo 3D animé — Zdog</title>
<meta name="description" content="Logo 3D animé avec Zdog pour un en-tête de site d'association à Antalaha.">
<!-- Chemin RELATIF : le site est servi sous /s/tutorial/<slug>/ -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<noscript>
<p class="noscript">Cette démonstration 3D a besoin de JavaScript. Activez-le pour voir le logo tourner.</p>
</noscript>
<!-- ================= EN-TÊTE DE L'ASSOCIATION ================= -->
<header class="entete">
<!-- .scene-logo : la boîte qui donne sa TAILLE au canevas.
Zdog (option resize: true) mesure cette boîte et adapte le canevas. -->
<div class="scene-logo">
<!-- Le canevas où Zdog dessine. role="img" + aria-label : texte alternatif
pour les lecteurs d'écran. Les attributs width/height sont la taille
initiale ; Zdog les remplace ensuite par la taille réelle × densité de pixels. -->
<canvas id="logo" class="zdog-canvas" width="160" height="160" role="img"
aria-label="Logo en 3D de l'association : un losange avec la lettre A et un petit soleil. Faites-le glisser pour le faire tourner."></canvas>
</div>
<div class="entete-texte">
<h1 class="nom">Les Amis d'Antalaha</h1>
<p class="slogan">Association locale · vanille, mer et entraide</p>
</div>
<nav class="menu" aria-label="Navigation de démonstration">
<a href="#essai">Essayer</a>
<a href="#explications">Comprendre</a>
<a href="#integrer">Intégrer</a>
</nav>
</header>
<main>
<!-- ================= ZONE D'ESSAI ================= -->
<section id="essai" class="carte" aria-labelledby="t-essai">
<h2 id="t-essai">Essayez le logo</h2>
<p>Faites glisser le logo avec le doigt ou la souris pour le tourner. Après un court
instant, il reprend son balancement tout seul.</p>
<div class="controles">
<!-- Case à cocher : active ou coupe le balancement automatique -->
<label class="ligne">
<input type="checkbox" id="ctrl-auto" checked>
<span>Balancement automatique</span>
</label>
<!-- Curseur (range) : vitesse du balancement -->
<label class="ligne" for="ctrl-vitesse">
<span>Vitesse</span>
<input type="range" id="ctrl-vitesse" min="0.2" max="3" step="0.1" value="1">
<output id="txt-vitesse" for="ctrl-vitesse">×1.0</output>
</label>
<!-- Boutons de thèmes de couleurs. aria-pressed indique le thème actif. -->
<div class="ligne" role="group" aria-label="Couleurs du logo">
<span>Couleurs</span>
<button type="button" class="bouton" data-theme="ocean" aria-pressed="true">Océan</button>
<button type="button" class="bouton" data-theme="vanille" aria-pressed="false">Vanille</button>
<button type="button" class="bouton" data-theme="girofle" aria-pressed="false">Girofle</button>
</div>
<div class="ligne">
<button type="button" class="bouton" id="btn-raz">Remettre face à vous</button>
</div>
</div>
</section>
<!-- ================= EXPLICATIONS ================= -->
<section id="explications" class="carte" aria-labelledby="t-expl">
<h2 id="t-expl"><img src="medias/pirogue.svg" alt="" width="24" height="24"> Comment ça marche ?</h2>
<ol>
<li><strong>Une scène</strong> : <code>new Zdog.Illustration({ element: '#logo' })</code>
relie Zdog au canevas.</li>
<li><strong>Des formes</strong> : un <code>Rect</code> tourné de 45° donne un losange,
un <code>Shape</code> avec un <code>path</code> dessine la lettre A.</li>
<li><strong>Une ancre</strong> : <code>Anchor</code> regroupe les pièces du logo.</li>
<li><strong>Une boucle</strong> : <code>requestAnimationFrame</code> redessine la scène
environ 60 fois par seconde avec <code>illo.updateRenderGraph()</code>.</li>
<li><strong>Le toucher</strong> : <code>dragRotate: true</code> permet de tourner la scène au glissement.</li>
</ol>
<p>Lisez les fichiers dans cet ordre : <code>js/config.js</code>, <code>js/logo.js</code>, puis
<code>js/main.js</code>. Chaque ligne est commentée.</p>
</section>
<!-- ================= INTÉGRATION ================= -->
<section id="integrer" class="carte" aria-labelledby="t-int">
<h2 id="t-int">Intégrer le logo dans votre en-tête</h2>
<p>Copiez le bloc ci-dessous dans votre page, puis chargez Zdog et les trois fichiers JavaScript :</p>
<pre><code><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></code></pre>
<p>Pensez à donner une taille CSS à <code>.scene-logo</code> (par exemple 96 px sur 96 px) : le
canevas la remplit automatiquement.</p>
</section>
</main>
<footer class="pied">
<p>Tutoriel Zdog pour débutants · Portail Antalaha</p>
</footer>
<!-- ================= SCRIPTS =================
L'ordre COMPTE : chaque fichier utilise ce que le précédent a défini.
1. Zdog (chemin absolu fourni par le portail)
2. config.js : réglages et thèmes
3. logo.js : la fabrique du logo
4. main.js : la scène et la boucle d'animation
Pas de modules ES : tout passe par l'objet global AppLogo. -->
<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>
</body>
</html>