first commit

2026-05-18 23:07:31 +02:00
commit 2405eb32c1
78 changed files with 1750 additions and 0 deletions
--- a/objets.js
+++ b/objets.js
@@ -0,0 +1,96 @@
+/* ----------------------------------------------------------------
+   Le Shed — Objets décoratifs
+   On place les 15 SVG d'objets pré-générés (assets/objets/objet-XX.svg)
+   à des positions choisies, avec des vitesses de parallax variées.
+
+   Règle de placement :
+   - Bords (gauche/droite) du haut et du milieu → AU-DESSUS du contenu
+   - Centre de page (entre les colonnes) à partir du milieu → EN-DESSOUS
+
+   Vitesses Rellax variées par objet pour un effet de profondeur.
+   ---------------------------------------------------------------- */
+
+(function () {
+
+    // Configuration des objets à placer.
+    // file : SVG à charger (1..15)
+    // x : décalage horizontal en pixels depuis 'side'
+    // y : position verticale en pixels depuis le haut du document
+    // side : 'left' | 'right' | 'center' (ancrage horizontal)
+    // size : taille (largeur) en pixels
+    // speed : vitesse Rellax (négative = plus rapide, positive = plus lente)
+    // layer : 'over' (au-dessus du contenu) | 'under' (en dessous)
+    var OBJETS = [
+        // === HAUT — bords, au-dessus ===
+        { file:  1, side: 'left',   x: -50,  y: 180,  size: 392, speed: -2, layer: 'over' },
+        { file:  3, side: 'right',  x: -30,  y: 380,  size: 336, speed:  3, layer: 'over' },
+
+        // === MILIEU — bords, au-dessus, vitesses variées ===
+        { file:  5, side: 'left',   x: -40,  y: 720,  size: 308, speed:  1, layer: 'over' },
+        { file:  7, side: 'right',  x: -60,  y: 950,  size: 420, speed: -3, layer: 'over' },
+        { file:  9, side: 'left',   x: -30,  y: 1280, size: 280, speed:  4, layer: 'over' },
+        { file: 11, side: 'right',  x: -20,  y: 1480, size: 364, speed: -1, layer: 'over' },
+
+        // === MILIEU → BAS — vers le centre, EN-DESSOUS ===
+        { file: 13, side: 'center', x: 0,    y: 1750, size: 336, speed:  2, layer: 'under' },
+        { file: 15, side: 'center', x: -120, y: 2050, size: 392, speed: -2, layer: 'under' },
+        { file:  2, side: 'center', x: 100,  y: 2300, size: 308, speed:  3, layer: 'under' }
+    ];
+
+    function createObjet(spec) {
+        var el = document.createElement('img');
+        el.src = 'assets/objets/objet-' + String(spec.file).padStart(2, '0') + '.svg';
+        el.alt = '';
+        el.setAttribute('data-rellax-speed', spec.speed);
+
+        el.style.position = 'absolute';
+        el.style.width = spec.size + 'px';
+        el.style.height = 'auto';
+        el.style.top = spec.y + 'px';
+        el.style.pointerEvents = 'none';
+        el.style.userSelect = 'none';
+
+        if (spec.side === 'left') {
+            el.style.left = spec.x + 'px';
+        } else if (spec.side === 'right') {
+            el.style.right = spec.x + 'px';
+        } else {
+            // center : positionné à 50 % de la largeur viewport puis décalé
+            el.style.left = 'calc(50% + ' + spec.x + 'px)';
+            el.style.transform = 'translateX(-50%)';
+        }
+
+        return el;
+    }
+
+    function injectObjets() {
+        // Deux layers : "under" (z-index négatif) et "over" (z-index positif)
+        // chacune en position absolute, en visibilité overflow visible.
+        var layerUnder = document.createElement('div');
+        layerUnder.className = 'objets-layer objets-layer--under';
+        layerUnder.style.cssText =
+            'position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:-1';
+
+        var layerOver = document.createElement('div');
+        layerOver.className = 'objets-layer objets-layer--over';
+        layerOver.style.cssText =
+            'position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:20';
+
+        document.body.insertBefore(layerUnder, document.body.firstChild);
+        document.body.appendChild(layerOver);
+
+        OBJETS.forEach(function (spec) {
+            var el = createObjet(spec);
+            if (spec.layer === 'under') {
+                layerUnder.appendChild(el);
+            } else {
+                layerOver.appendChild(el);
+            }
+        });
+
+        return Promise.resolve();
+    }
+
+    window.LeShedObjets = { inject: injectObjets };
+
+})();