{"id":705,"date":"2026-10-07T07:00:00","date_gmt":"2026-10-07T05:00:00","guid":{"rendered":"https:\/\/iconoclaste.net\/blog\/?p=705"},"modified":"2026-08-07T09:59:40","modified_gmt":"2026-08-07T07:59:40","slug":"le-petit-coureur","status":"publish","type":"post","link":"https:\/\/iconoclaste.net\/blog\/2026\/10\/07\/le-petit-coureur\/","title":{"rendered":"Lopotic_oureur\u00b7euse"},"content":{"rendered":"\n<!-- ============================================================\n     BLOC HTML PERSONNALIS\u00c9 \u2013 Coureur qui tombe puis court\n     A1 = position debout (standing)\n     A2 = animation de chute\n     A3 = animation de course (remplace A2 une fois au sol)\n============================================================ -->\n<div class=\"icono-falling-gif\" data-a1=\"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/coureur_standing.gif\" data-a2=\"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/coureur_200x200_chute.gif\" data-a3=\"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/coureur_200x200.gif\">\n\n  <!-- Image de d\u00e9part (A1) \u2013 c\u2019est celle qui est cliquable -->\n  <img decoding=\"async\" src=\"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/coureur_standing.gif\" alt=\"Coureur\" class=\"icono-static-img\">\n<\/div>\n\n<style>\n\/* Conteneur centr\u00e9 *\/\n.icono-falling-gif {\n  display: block;\n  text-align: center;          \/* centre l\u2019image *\/\n  margin: 0 auto 1.5em auto;   \/* centrage horizontal + petit espace en bas *\/\n  line-height: 0;\n}\n\n\/* Style de l\u2019image de d\u00e9part *\/\n.icono-static-img {\n  display: inline-block;       \/* important pour que text-align fonctionne *\/\n  max-width: 100%;\n  height: auto;\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n.icono-static-img:hover {\n  opacity: 0.9;\n}\n<\/style>\n\n<script>\n(function () {\n  \/\/ On cible tous les blocs de ce type (permet d\u2019en mettre plusieurs sur la page)\n  document.querySelectorAll('.icono-falling-gif').forEach(function (container) {\n\n    const staticImg = container.querySelector('img');\n    if (!staticImg) return;\n\n    \/\/ R\u00e9cup\u00e9ration des 3 URLs depuis les data-attributes\n    const urlA1 = container.getAttribute('data-a1');\n    const urlA2 = container.getAttribute('data-a2');\n    const urlA3 = container.getAttribute('data-a3');\n\n    let isAnimating = false; \/\/ Emp\u00eache de relancer l\u2019animation pendant qu\u2019elle tourne\n\n    staticImg.addEventListener('click', function (e) {\n      e.preventDefault();\n      if (isAnimating) return; \/\/ S\u00e9curit\u00e9 anti-double-clic\n      isAnimating = true;\n\n      \/\/ Position et taille exactes de l\u2019image A1 au moment du clic\n      const rect = staticImg.getBoundingClientRect();\n\n      \/\/ 1. On cache A1 (visibility pour garder l\u2019espace dans la page)\n      staticImg.style.visibility = 'hidden';\n\n      \/\/ 2. Cr\u00e9ation du GIF volant (commence avec A2 = chute)\n      const flyer = document.createElement('img');\n      flyer.src = urlA2;\n      flyer.alt = '';\n      flyer.style.cssText = `\n        position: fixed;\n        z-index: 99999;\n        pointer-events: none;\n        width: ${rect.width}px;\n        height: ${rect.height}px;\n        left: ${rect.left}px;\n        top: ${rect.top}px;\n        margin: 0;\n        padding: 0;\n        border: 0;\n        object-fit: contain;\n        transition: none;\n      `;\n      document.body.appendChild(flyer);\n\n      \/\/ Force le navigateur \u00e0 appliquer les styles avant l\u2019animation\n      flyer.offsetHeight;\n\n      \/\/ ========================================================\n      \/\/ PHASE 1 : CHUTE (A2)\n      \/\/ ========================================================\n      const fallDuration = 500; \/\/ \u2190 change cette valeur pour acc\u00e9l\u00e9rer\/ralentir la chute\n      const bottomY = window.innerHeight - rect.height - 8; \/\/ bord bas de la fen\u00eatre\n\n      flyer.style.transition = `top ${fallDuration}ms cubic-bezier(0.33, 0.00, 0.67, 0.30)`;\n      flyer.style.top = bottomY + 'px';\n\n      \/\/ ========================================================\n      \/\/ PHASE 2 : Une fois au sol \u2192 on remplace A2 par A3 et on glisse\n      \/\/ ========================================================\n      setTimeout(function () {\n\n        \/\/ On change le GIF : A2 (chute) \u2192 A3 (course)\n        flyer.src = urlA3;\n\n        \/\/ On force le red\u00e9marrage propre du GIF de course\n        flyer.offsetHeight;\n\n        const slideDuration = 1400; \/\/ dur\u00e9e de la glissade vers la droite\n\n        \/\/ Animation de glisse vers la droite (sortie d\u2019\u00e9cran)\n        flyer.style.transition = `left ${slideDuration}ms cubic-bezier(0.40, 0.00, 0.80, 0.20)`;\n        flyer.style.left = (window.innerWidth + 80) + 'px';\n\n        \/\/ ========================================================\n        \/\/ PHASE 3 : Sortie compl\u00e8te \u2192 nettoyage et retour \u00e0 A1\n        \/\/ ========================================================\n        setTimeout(function () {\n          \/\/ On supprime le GIF volant du DOM\n          if (flyer.parentNode) {\n            flyer.parentNode.removeChild(flyer);\n          }\n\n          \/\/ On fait r\u00e9appara\u00eetre l\u2019image de d\u00e9part (A1)\n          staticImg.style.visibility = 'visible';\n\n          \/\/ On autorise \u00e0 nouveau un clic\n          isAnimating = false;\n\n        }, slideDuration + 50);\n\n      }, fallDuration + 40);\n\n    });\n  });\n})();\n<\/script>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Cliquez pour&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cliquez pour&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[269,6],"tags":[58,228],"class_list":["post-705","post","type-post","status-publish","format-standard","hentry","category-experiences","category-retropixel","tag-animation","tag-course"],"_links":{"self":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/comments?post=705"}],"version-history":[{"count":10,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/705\/revisions"}],"predecessor-version":[{"id":744,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/705\/revisions\/744"}],"wp:attachment":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/media?parent=705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/categories?post=705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/tags?post=705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}