Citation avec parallax (image)

<style>
.bn-quote-img {
  position: relative;
  min-height: 340px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: 'Inter', sans-serif;
}

.bn-quote-img__bg {
  position: absolute;
  /* Légèrement plus grand que le cadre : nécessaire pour que le
     décalage du parallax ne laisse jamais apparaître de bord vide */
  top: -10%;
  left: 0;
  right: 0;
  height: 120%;

  background-size: cover;
  background-position: center;
  will-change: transform;
}

.bn-quote-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 8, 0.55);
}

.bn-quote-img__content {
  position: relative;
  max-width: 560px;
  margin: 0;
  padding: 2rem;
  text-align: center;
}

.bn-quote-img__content p {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.4rem, 3.5vw, 2.1rem);
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: #E6E4DD;
  margin: 0 0 1rem;
}

.bn-quote-img__content cite {
  color: #979793;
  font-size: 0.85rem;
  font-style: normal;
}

</style>

<section class="bn-quote-img fx-parallax" data-fx-root>
  <div class="bn-quote-img__bg" data-parallax-el style="background-image: url('https://placehold.co/1200x500/1D2324/1D2324');"></div>

  <blockquote class="bn-quote-img__content">
    <p>« La seule façon de faire du grand travail, c'est d'aimer ce que l'on fait. »</p>
    <cite>— Steve Jobs</cite>
  </blockquote>
</section>


<script>
/* ==========================================================
   CITATION AVEC PARALLAX (image)
   Même principe que "Citation avec parallax" (texte géant) : le
   fond bouge plus lentement que le scroll pour créer un effet de
   profondeur. Fonctionne aussi bien collé sur un vrai site que
   dans l'aperçu de ce catalogue (voir les commentaires détaillés
   dans le script de "citation-parallax").
   ========================================================== */

(function () {
  const bg = document.querySelector('[data-parallax-el]');
  const root = document.querySelector('.bn-quote-img[data-fx-root]');
  if (!bg || !root) return;

  const isInsideFrame = Boolean(window.frameElement);
  const scrollTarget = isInsideFrame ? window.parent : window;
  const referenceElement = isInsideFrame ? window.frameElement : root;

  function update() {
    if (!root.classList.contains('fx-parallax')) {
      bg.style.transform = 'translateY(0)';
      return;
    }

    const rect = referenceElement.getBoundingClientRect();
    const viewportHeight = isInsideFrame ? window.parent.innerHeight : window.innerHeight;
    const distance = rect.top + rect.height / 2 - viewportHeight / 2;
    const offset = distance * 0.12;

    bg.style.transform = `translateY(${offset}px)`;
  }

  scrollTarget.addEventListener('scroll', update, { passive: true });
  window.addEventListener('resize', update);
  update();
})();

</script>