{"id":658,"date":"2026-09-23T07:00:00","date_gmt":"2026-09-23T05:00:00","guid":{"rendered":"https:\/\/iconoclaste.net\/blog\/?p=658"},"modified":"2026-09-24T10:00:02","modified_gmt":"2026-09-24T08:00:02","slug":"to-the-paaaaaarty","status":"publish","type":"post","link":"https:\/\/iconoclaste.net\/blog\/2026\/09\/23\/to-the-paaaaaarty\/","title":{"rendered":"To the paaaaaarty!"},"content":{"rendered":"\n<!-- \n  BEASTIE BOYS INTERACTIVE ANIMATION\n  WordPress Custom HTML Block Compatible\n  Vanilla JavaScript - No Dependencies\n-->\n\n<style>\n  \/* ==================== *\/\n  \/* CONTAINER PRINCIPAL  *\/\n  \/* ==================== *\/\n  #bb-container {\n    width: 100%;\n    border: 1px solid #000000;\n    position: relative;\n    cursor: pointer;\n    overflow: hidden;\n    \/* Ratio d'aspect conserv\u00e9 automatiquement *\/\n    display: block;\n    line-height: 0;\n  }\n\n  \/* Image affich\u00e9e - remplit le container *\/\n  #bb-container img {\n    width: 100%;\n    height: auto;\n    display: block;\n    \/* Pas de alt selon sp\u00e9cifications *\/\n  }\n\n  \/* ==================== *\/\n  \/* \u00c9CRAN DE CHARGEMENT  *\/\n  \/* ==================== *\/\n  #bb-loading {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: #000000;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 10;\n    \/* Maintient le ratio pendant le chargement *\/\n    aspect-ratio: attr(data-ratio);\n  }\n\n  \/* Texte de chargement *\/\n  #bb-loading-text {\n    color: #33ffff;\n    font-family: monospace;\n    font-size: clamp(14px, 4vw, 24px);\n    font-weight: bold;\n    text-align: center;\n  }\n\n  \/* ==================== *\/\n  \/* EFFET DE TREMBLEMENT *\/\n  \/* ==================== *\/\n  .bb-shake {\n    animation: bb-shake-anim 0.1s infinite;\n  }\n\n  @keyframes bb-shake-anim {\n    0% { transform: translate(0, 0) rotate(0deg); }\n    25% { transform: translate(-2px, 2px) rotate(-1deg); }\n    50% { transform: translate(2px, -2px) rotate(1deg); }\n    75% { transform: translate(-2px, -2px) rotate(-0.5deg); }\n    100% { transform: translate(0, 0) rotate(0deg); }\n  }\n\n  \/* ==================== *\/\n  \/* RESPONSIVE           *\/\n  \/* ==================== *\/\n  @media (max-width: 768px) {\n    #bb-container {\n      \/* Aucun ajustement sp\u00e9cifique n\u00e9cessaire *\/\n      \/* Le width: 100% s'adapte automatiquement *\/\n    }\n  }\n<\/style>\n\n<!-- ==================== -->\n<!-- STRUCTURE HTML       -->\n<!-- ==================== -->\n<div id=\"bb-container\">\n  <!-- \u00c9cran de chargement -->\n  <div id=\"bb-loading\">\n    <div id=\"bb-loading-text\">CHARGEMENT : 0%<\/div>\n  <\/div>\n  \n  <!-- Image affich\u00e9e -->\n  <img decoding=\"async\" id=\"bb-image\" src=\"\" \/>\n<\/div>\n\n<script>\n(function() {\n  \/\/ ====================\n  \/\/ CONFIGURATION\n  \/\/ ====================\n  \n  \/\/ Images s\u00e9quence START (idle)\n  const BB_START_IMAGES = [\n    'https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/BeastieBoys_01.webp',\n    'https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/BeastieBoys_02.webp'\n  ];\n  \n  \/\/ Images s\u00e9quence ANIM (clic)\n  const BB_ANIM_IMAGES = [\n    'https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/BeastieBoys_03.webp',\n    'https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/BeastieBoys_04.webp',\n    'https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/BeastieBoys_05.webp',\n    'https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/BeastieBoys_06.webp',\n    'https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/BeastieBoys_07.webp',\n    'https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/BeastieBoys_08.webp',\n    'https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/BeastieBoys_07.webp',\n    'https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/BeastieBoys_06.webp',\n    'https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/BeastieBoys_05.webp',\n    'https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/BeastieBoys_04.webp',\n    'https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/BeastieBoys_03.webp'\n  ];\n  \n  \/\/ Fichier audio\n  const BB_SOUND_URL = 'https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/Fight4YourRight.mp3';\n  \n  \/\/ Vitesse d'animation (ms)\n  const FRAME_SPEED = 70;\n  \n  \/\/ ====================\n  \/\/ VARIABLES GLOBALES\n  \/\/ ====================\n  let currentState = 'LOADING'; \/\/ LOADING, START, ANIM\n  let currentFrame = 0;\n  let animationInterval = null;\n  let audioElement = null;\n  \n  \/\/ R\u00e9f\u00e9rences DOM\n  const container = document.getElementById('bb-container');\n  const imageElement = document.getElementById('bb-image');\n  const loadingScreen = document.getElementById('bb-loading');\n  const loadingText = document.getElementById('bb-loading-text');\n  \n  \/\/ ====================\n  \/\/ FONCTIONS\n  \/\/ ====================\n  \n  \/**\n   * Pr\u00e9charge toutes les images et affiche la progression\n   *\/\n  function preloadImages() {\n    const allImages = [...BB_START_IMAGES, ...BB_ANIM_IMAGES];\n    const totalImages = allImages.length;\n    let loadedCount = 0;\n    \n    \/\/ Cr\u00e9ation des promesses de chargement\n    const loadPromises = allImages.map((src) => {\n      return new Promise((resolve, reject) => {\n        const img = new Image();\n        img.onload = () => {\n          loadedCount++;\n          updateLoadingProgress(loadedCount, totalImages);\n          resolve();\n        };\n        img.onerror = () => {\n          \/\/ En cas d'erreur, on continue quand m\u00eame\n          loadedCount++;\n          updateLoadingProgress(loadedCount, totalImages);\n          resolve();\n        };\n        img.src = src;\n      });\n    });\n    \n    \/\/ Attendre que tout soit charg\u00e9\n    Promise.all(loadPromises).then(() => {\n      startAnimation();\n    });\n  }\n  \n  \/**\n   * Met \u00e0 jour l'affichage du pourcentage de chargement\n   *\/\n  function updateLoadingProgress(loaded, total) {\n    const percentage = Math.round((loaded \/ total) * 100);\n    loadingText.textContent = 'CHARGEMENT : ' + percentage + '%';\n  }\n  \n  \/**\n   * D\u00e9marre l'animation START apr\u00e8s le chargement\n   *\/\n  function startAnimation() {\n    \/\/ Masque l'\u00e9cran de chargement\n    loadingScreen.style.display = 'none';\n    \n    \/\/ Initialise la premi\u00e8re image\n    currentState = 'START';\n    currentFrame = 0;\n    imageElement.src = BB_START_IMAGES[0];\n    \n    \/\/ D\u00e9marre la boucle START (70ms)\n    animationInterval = setInterval(() => {\n      currentFrame = (currentFrame + 1) % BB_START_IMAGES.length;\n      imageElement.src = BB_START_IMAGES[currentFrame];\n    }, FRAME_SPEED);\n  }\n  \n  \/**\n   * D\u00e9marre la s\u00e9quence ANIM (son + tremblement)\n   *\/\n  function startAnimSequence() {\n    \/\/ Change l'\u00e9tat\n    currentState = 'ANIM';\n    currentFrame = 0;\n    \n    \/\/ Arr\u00eate l'interval pr\u00e9c\u00e9dent\n    clearInterval(animationInterval);\n    \n    \/\/ Ajoute l'effet de tremblement\n    imageElement.classList.add('bb-shake');\n    \n    \/\/ Cr\u00e9e et joue l'audio\n    audioElement = new Audio(BB_SOUND_URL);\n    audioElement.play();\n    \n    \/\/ D\u00e9marre la boucle ANIM (70ms)\n    animationInterval = setInterval(() => {\n      currentFrame = (currentFrame + 1) % BB_ANIM_IMAGES.length;\n      imageElement.src = BB_ANIM_IMAGES[currentFrame];\n    }, FRAME_SPEED);\n    \n    \/\/ D\u00e9tecte la fin du son pour revenir \u00e0 START\n    audioElement.addEventListener('ended', returnToStart, { once: true });\n  }\n  \n  \/**\n   * Retourne \u00e0 la s\u00e9quence START apr\u00e8s la fin du son\n   *\/\n  function returnToStart() {\n    \/\/ Arr\u00eate l'interval ANIM\n    clearInterval(animationInterval);\n    \n    \/\/ Retire l'effet de tremblement\n    imageElement.classList.remove('bb-shake');\n    \n    \/\/ R\u00e9initialise l'audio\n    audioElement = null;\n    \n    \/\/ Retour \u00e0 START\n    currentState = 'START';\n    currentFrame = 0;\n    imageElement.src = BB_START_IMAGES[0];\n    \n    \/\/ Red\u00e9marre la boucle START\n    animationInterval = setInterval(() => {\n      currentFrame = (currentFrame + 1) % BB_START_IMAGES.length;\n      imageElement.src = BB_START_IMAGES[currentFrame];\n    }, FRAME_SPEED);\n  }\n  \n  \/\/ ====================\n  \/\/ \u00c9V\u00c9NEMENTS\n  \/\/ ====================\n  \n  \/\/ Clic sur le container\n  container.addEventListener('click', function() {\n    \/\/ Ne r\u00e9agit que si on est en mode START (pas pendant ANIM)\n    if (currentState === 'START') {\n      startAnimSequence();\n    }\n  });\n  \n  \/\/ ====================\n  \/\/ INITIALISATION\n  \/\/ ====================\n  \n  \/\/ Lance le pr\u00e9chargement au chargement de la page\n  preloadImages();\n  \n})();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><br>Machin\u00e9 \u00e0 partir de l&rsquo;animgif des ann\u00e9es 2000&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CHARGEMENT : 0% Machin\u00e9 \u00e0 partir de l&rsquo;animgif des ann\u00e9es 2000&#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],"tags":[58,216,209],"class_list":["post-658","post","type-post","status-publish","format-standard","hentry","category-experiences","tag-animation","tag-beastiesboys","tag-music"],"_links":{"self":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/658","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=658"}],"version-history":[{"count":5,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/658\/revisions"}],"predecessor-version":[{"id":2176,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/658\/revisions\/2176"}],"wp:attachment":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/media?parent=658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/categories?post=658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/tags?post=658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}