97 lines
4.0 KiB
JavaScript
97 lines
4.0 KiB
JavaScript
/* ----------------------------------------------------------------
|
|
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 };
|
|
|
|
})();
|