{"id":1358,"date":"2026-08-27T07:00:00","date_gmt":"2026-08-27T05:00:00","guid":{"rendered":"https:\/\/iconoclaste.net\/blog\/?p=1358"},"modified":"2026-08-27T10:55:28","modified_gmt":"2026-08-27T08:55:28","slug":"barb-1e","status":"publish","type":"post","link":"https:\/\/iconoclaste.net\/blog\/2026\/08\/27\/barb-1e\/","title":{"rendered":"Barb.1e"},"content":{"rendered":"\n<!--\n  BARB.1e \u2013 jouet interactif CSS + JS\n  iconoclaste.net \u2013 2026-08-27\n-->\n\n<div id=\"iconoclaste-barb1e\">\n  <div id=\"barb-preload\" aria-live=\"polite\">\n    <div class=\"barb-preload-inner\">\n      <span id=\"barb-preload-text\">Chargement du jouet script\u00e9 : 0% sur 100%<\/span>\n      <div class=\"barb-progress-bar\">\n        <div class=\"barb-progress-fill\" id=\"barb-progress-fill\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <img fetchpriority=\"high\" class=\"barb-img barb-a1\"\n       src=\"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/a_barb.webp\"\n       width=\"750\" height=\"250\" alt=\"BARB.1e\" loading=\"eager\" decoding=\"async\">\n  <img class=\"barb-img barb-b1\"\n       src=\"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/g1_barb.webp\"\n       width=\"750\" height=\"250\" alt=\"\" loading=\"eager\" decoding=\"async\">\n  <img class=\"barb-img barb-c1\"\n       src=\"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/d_barb.webp\"\n       width=\"750\" height=\"250\" alt=\"\" loading=\"eager\" decoding=\"async\">\n\n  <div class=\"barb-zone barb-zone-g\" role=\"button\" tabindex=\"0\" aria-label=\"Zone gauche\"><\/div>\n  <div class=\"barb-zone barb-zone-d\" role=\"button\" tabindex=\"0\" aria-label=\"Zone droite\"><\/div>\n<\/div>\n\n<style>\n  #iconoclaste-barb1e {\n    position: relative;\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto 1.5em;\n    line-height: 0;\n    overflow: hidden;\n    background: #fff;\n    aspect-ratio: 750 \/ 250;\n    -webkit-tap-highlight-color: transparent;\n    user-select: none;\n    -webkit-user-select: none;\n    touch-action: manipulation;\n    cursor: default;\n  }\n  #barb-preload {\n    position: absolute; inset: 0; z-index: 30;\n    background: #fff; display: flex;\n    align-items: center; justify-content: center;\n    transition: opacity 0.45s ease;\n  }\n  #barb-preload.hidden { opacity: 0; pointer-events: none; }\n  .barb-preload-inner { text-align: center; padding: 12px 20px; }\n  #barb-preload-text {\n    display: block;\n    font-family: \"Courier New\", Courier, monospace;\n    font-size: 14px; color: #ff33ff;\n    letter-spacing: 0.02em; margin-bottom: 10px; white-space: nowrap;\n  }\n  .barb-progress-bar {\n    width: 180px; height: 4px; background: #f0f0f0;\n    margin: 0 auto; border-radius: 2px; overflow: hidden;\n  }\n  .barb-progress-fill {\n    height: 100%; width: 0%; background: #ff33ff;\n    transition: width 0.12s linear;\n  }\n  #iconoclaste-barb1e .barb-img {\n    display: block; width: 100%; height: auto;\n    pointer-events: none;\n    transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),\n                filter 0.75s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: opacity, filter;\n  }\n  #iconoclaste-barb1e .barb-a1 { position: relative; z-index: 1; opacity: 1; filter: blur(0); }\n  #iconoclaste-barb1e .barb-b1,\n  #iconoclaste-barb1e .barb-c1 {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n    object-fit: cover; z-index: 2; opacity: 0; filter: blur(3px);\n  }\n  #iconoclaste-barb1e.show-b .barb-a1,\n  #iconoclaste-barb1e.show-c .barb-a1 { opacity: 0; filter: blur(3px); }\n  #iconoclaste-barb1e.show-b .barb-b1 { opacity: 1; filter: blur(0); }\n  #iconoclaste-barb1e.show-c .barb-c1 { opacity: 1; filter: blur(0); }\n  #iconoclaste-barb1e:not(.show-b) .barb-b1,\n  #iconoclaste-barb1e:not(.show-c) .barb-c1 { filter: blur(3px); }\n  #iconoclaste-barb1e .barb-zone {\n    position: absolute; top: 0; bottom: 0; width: 50%;\n    z-index: 10; cursor: crosshair; touch-action: manipulation;\n  }\n  #iconoclaste-barb1e .barb-zone-g { left: 0; }\n  #iconoclaste-barb1e .barb-zone-d { right: 0; }\n<\/style>\n\n<script>\n(function () {\n  \"use strict\";\n  if (window.__iconoclasteBarb1eInit) return;\n  window.__iconoclasteBarb1eInit = true;\n\n  const IMAGES = [\n    \"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/a_barb.webp\",\n    \"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/g1_barb.webp\",\n    \"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/d_barb.webp\"\n  ];\n\n  function init() {\n    const container    = document.getElementById(\"iconoclaste-barb1e\");\n    const preloadEl    = document.getElementById(\"barb-preload\");\n    const preloadText  = document.getElementById(\"barb-preload-text\");\n    const progressFill = document.getElementById(\"barb-progress-fill\");\n    if (!container || !preloadEl) return;\n\n    const zoneG = container.querySelector(\".barb-zone-g\");\n    const zoneD = container.querySelector(\".barb-zone-d\");\n\n    let loaded = 0;\n    const total = IMAGES.length;\n    function updateProgress() {\n      const pct = Math.round((loaded \/ total) * 100);\n      if (preloadText) preloadText.textContent = \"Chargement du jouet script\u00e9 : \" + pct + \"% sur 100%\";\n      if (progressFill) progressFill.style.width = pct + \"%\";\n    }\n    function finishPreload() {\n      setTimeout(function () {\n        preloadEl.classList.add(\"hidden\");\n        setTimeout(function () { preloadEl.style.display = \"none\"; }, 500);\n      }, 280);\n    }\n    IMAGES.forEach(function (src) {\n      const img = new Image();\n      img.onload = img.onerror = function () {\n        loaded++;\n        updateProgress();\n        if (loaded >= total) finishPreload();\n      };\n      img.src = src;\n    });\n    updateProgress();\n\n    function currentState() {\n      if (container.classList.contains(\"show-b\")) return \"b\";\n      if (container.classList.contains(\"show-c\")) return \"c\";\n      return \"a\";\n    }\n    function showA() { container.classList.remove(\"show-b\", \"show-c\"); }\n    function showB() { container.classList.remove(\"show-c\"); container.classList.add(\"show-b\"); }\n    function showC() { container.classList.remove(\"show-b\"); container.classList.add(\"show-c\"); }\n\n    var finePointer = false;\n    try {\n      finePointer = window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\n    } catch (e) {}\n\n    if (finePointer) {\n      if (zoneG) zoneG.addEventListener(\"mouseenter\", showB);\n      if (zoneD) zoneD.addEventListener(\"mouseenter\", showC);\n      container.addEventListener(\"mouseleave\", showA);\n      return;\n    }\n\n    var lastTap = 0;\n    function toggleSide(side) {\n      var now = Date.now();\n      if (now - lastTap < 280) return;\n      lastTap = now;\n      var st = currentState();\n      if (side === \"g\") { if (st === \"b\") showA(); else showB(); }\n      else { if (st === \"c\") showA(); else showC(); }\n    }\n    function bindTap(el, side) {\n      if (!el) return;\n      el.addEventListener(\"pointerup\", function (ev) {\n        if (ev.pointerType === \"mouse\") return;\n        ev.preventDefault();\n        toggleSide(side);\n      }, { passive: false });\n      el.addEventListener(\"click\", function (ev) {\n        ev.preventDefault();\n        toggleSide(side);\n      });\n    }\n    bindTap(zoneG, \"g\");\n    bindTap(zoneD, \"d\");\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\"DOMContentLoaded\", init);\n  } else {\n    init();\n  }\n})();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Jouet <s>flash <\/s>javascript du 21 novembre 2001 [fuzzout.net]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Chargement du jouet script\u00e9 : 0% sur 100% Jouet flash javascript du 21 novembre 2001 [fuzzout.net]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[269,31],"tags":[305,81,307,306],"class_list":["post-1358","post","type-post","status-publish","format-standard","hentry","category-experiences","category-fuzzout","tag-barbie","tag-fuzzout","tag-jouet","tag-mattel"],"_links":{"self":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1358","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=1358"}],"version-history":[{"count":2,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1358\/revisions"}],"predecessor-version":[{"id":1417,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1358\/revisions\/1417"}],"wp:attachment":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/media?parent=1358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/categories?post=1358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/tags?post=1358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}