Storytell v2

by SvennMats

HTML

<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;800;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<script src="https://player.vimeo.com/api/player.js"></script>
<script type="text/javascript" src="//script.crazyegg.com/pages/scripts/0120/2103.js" async="async" ></script>

<!-- NAVBAR (LP-modus: kun logo + én CTA for å unngå konverteringslekkasje) -->
<div class="svenn-wrapper">
  <div class="navbar-sticky">
    <nav class="navbar navbar--lp">
      <a href="https://svenn.com/" class="nav-logo">
        <img src="https://cdn.sanity.io/images/kczjvvqi/production/d4c9c4e2d4f06a0c4d93b32b2fb64d5eede8a513-300x150.png" alt="Svenn Logo">
      </a>
      <div class="nav-actions">
        <a href="https://svenn.com/no/sign-up" class="btn-main-nav">Prøv 14 dager gratis</a>
      </div>
    </nav>
    <div id="progress"></div>
  </div>
</div>

<!-- BAKGRUNN ===============================================
     img[0] = fallback for bakgrunnsvideo (slide 2 + 3)
     img[2] = Georg (slide 6)
     img[3] = (ubrukt nå)
     img[5] = demo (slide 4) + counter (slide 5)
     img[6] = CTA (slide 7)
     img[7] = hook (slide 1)
     BG_MAP = [7, 0, 0, 5, 5, 2, 6]
     ======================================================= -->
<div class="bg">
  <div class="bg__img" style="background-image:url('https://cdn.sanity.io/images/kczjvvqi/production/85d785f617e010c315d25d85e947ebc902c8c797-3840x2160.jpg')"></div>
  <div class="bg__img" style="background-image:url('https://cdn.sanity.io/images/kczjvvqi/production/d2ef994a074e076c4a85460fdb72fde37ff4aacb-1920x1080.webp')"></div>
  <div class="bg__img" style="background-image:url('https://cdn.sanity.io/images/kczjvvqi/production/91c57e8cece159d03f843d80857ff99cd4a9472e-3840x2160.webp')"></div>
  <div class="bg__img" style="background-image:url('https://cdn.sanity.io/images/kczjvvqi/production/eca7e822700d01e838bc366805293386b8d9d472-1920x1080.webp')"></div>
 ...

CSS

/* =========================================
   SKJUL GAMMEL MENY (Sanity/CMS-spesifikt)
   ========================================= */
.Header_header__qBw1J { display: none; }
.PageTransition_page__XtMgn { padding-top: 0px; }
.TopHeader_topHeader__content__cPDXk { display: none; }

/* =========================================
   GLOBALE STILER
   ========================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { background: #0d0b10; }
body { min-height: 100vh; background: #0d0b10; overflow-x: hidden; }
:root {
  --orange:   #F96529;
  --yellow:   #F5E871;
  --green:    #BDE37C;
  --dark:     #241D2D;
  --dark-rgb: 36, 29, 45;
  --display:  'Outfit', system-ui, sans-serif;
  --body:     'Inter', system-ui, sans-serif;

  /* Type scale (én kilde til sannhet) */
  --fs-eyebrow: 0.72rem;                        /* labels, micro, eyebrow */
  --fs-caption: 0.8rem;                         /* metadata, små noter */
  --fs-small:   0.9rem;                         /* navn, sub-quote */
  --fs-body:    clamp(1rem, 1.4vw, 1.12rem);    /* brødtekst */
  --fs-quote:   clamp(1.2rem, 2.4vw, 1.75rem);  /* sitat */
  --fs-heading: clamp(1.7rem, 4.5vw, 3.1rem);   /* ALLE seksjonsoverskrifter */
  --fs-display: clamp(3rem, 8vw, 5rem);         /* stat-tall (bevisst stort) */
}

/* =========================================
   NAVBAR
   ========================================= */
.svenn-wrapper { font-family: 'Outfit', system-ui, sans-serif; color: #241D2D; background: transparent; padding-bottom: 0; overflow: visible; }
.svenn-wrapper .navbar-sticky { position: fixed; top: 0; z-index: 1000; width: 100%; background-color: #F4F6FB; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.svenn-wrapper .navbar-sticky.scrolled { background-color: #FFFFFF; box-shadow: 0 4px 20px rgba(36,29,45,0.08); }
.svenn-wrapper .navbar { display: flex; justify-content: space-between;...

JavaScript

const sections   = document.querySelectorAll('.section');
const sectionArr = Array.from(sections);
const bgImgs     = document.querySelectorAll('.bg__img');
const bgVideo    = document.getElementById('bg-video');
const bgDark     = document.getElementById('bg-dark');
const progress   = document.getElementById('progress');

// Slide 1 (problem) + slide 2 (tekst) bruker bakgrunnsvideo (0-indeksert: 1 og 2).
const VIDEO_SLIDES = new Set([1, 2]);

// Eksplisitt mapping: slide -> bg img-indeks (7 slides totalt)
// 0: img 7 (hook) | 1: video | 2: video | 3: img 5 (demo, samme som counter) | 4: img 5 (counter) | 5: img 2 (Georg) | 6: img 6 (CTA)
const BG_MAP = [7, 0, 0, 5, 5, 2, 6];

let lastIndex = -1;

function bgImgIndex(i) {
  return BG_MAP[i] ?? 0;
}

function activateBg(index, prevIndex) {
  const useVideo       = VIDEO_SLIDES.has(index);
  const wasVideo       = VIDEO_SLIDES.has(prevIndex);
  const isLeavingVideo = wasVideo && !useVideo;

  bgVideo.classList.toggle('is-active', useVideo);

  const imgIdx  = bgImgIndex(index);
  const overlay = sectionArr[index]?.dataset.overlay || 'normal';

  if (overlay === 'dark') {
    bgDark.style.transition = 'none';
    bgDark.style.opacity = '1';
    requestAnimationFrame(() => requestAnimationFrame(() => {
      bgImgs.forEach((img, i) => {
        if (isLeavingVideo && i === 0) return;
        img.classList.toggle('is-active', i === imgIdx);
      });
      bgDark.style.transition = 'opacity 0.7s ease';
    }));
  } else {
    bgImgs.forEach((img, i) => {
      if (isLeavingVideo && i === 0) return;
      img.classList.toggle('is-active', i === imgIdx);
    });
    bgDark.style.transition = 'opacity 0.7s ease';
    bgDark.style.opacity = overlay === 'medium' ? '0.6' : '0';
  }

  if (isLeavingVideo) {
    setTimeout(() => bgImgs[0].classList.remove('is-active'), 950);
  }
}

const navbarSticky = document.querySelector('.navbar-sticky');

function onScroll() {
 ...