Webleb - UI Elements - Scroll-Driven Sticky Heading

HTML

<main>
  <h1 class="scrollDrivenHeading" aria-hidden="true"></h1>
  
  <section class="primary-colors">
    <h1 class="srOnly">Primary Colors</h1>
    <p>The three primary colors (red, blue, and yellow) form the basis of all other colors on the color wheel. Mixing them in different combinations produces a wide array of hues.</p>
    <div class="color-wheel-container">
      <div class="color-wheel">
        <div class="color-segment red"></div>
        <div class="color-segment blue"></div>
        <div class="color-segment yellow"></div>
      </div>
    </div>
    <img src="https://assets.codepen.io/1948355/colors.jfif" alt="A vibrant explosion of multicolored abstract shapes resembling thick paint strokes in red, yellow, blue, and orange, forming a dynamic, swirling pattern.">
  </section>
  
  <section class="red-section">
    <h2 class="srOnly">Red Power</h2>
    <p>Red is a bold and vibrant color, symbolizing energy, passion, and warmth. It easily attracts attention and is often linked with strong emotions.</p>
    <div class="color-details">
      <div class="color-stats">
        <div class="stat">
          <span class="stat-value">#FF0000</span>
          <span class="stat-label">Hex</span>
        </div>
        <div class="stat">
          <span class="stat-value">0°, 100%, 50%</span>
          <span class="stat-label">HSL</span>
        </div>
        <div class="stat">
          <span class="stat-value">255, 0, 0</span>
          <span class="stat-label">RGB</span>
        </div>
      </div>
    </div>
    <img src="https://assets.codepen.io/1948355/red.jfif" alt="A dramatic, glowing red lightning bolt striking through clouds from the sky, surrounded by electric energy and a celestial backdrop.">
  </section>
  
  <section class="blue-section">
    <h2 class="srOnly">Blue Calm</h2>
    <p>Blue is a calm and cool color, representing tranquility, stability, and trust. It evokes images of the sky and sea, creating a peaceful mood.</p>
    <div class="color-details">
      <div class="color-stats">
        <div class="stat">
          <span class="stat-value">#0000FF</span>
          <span class="stat-label">Hex</span>
        </div>
        <div class="stat">
          <span class="stat-value">240°, 100%, 50%</span>
          <span class="stat-label">HSL</span>
        </div>
        <div class="stat">
          <span class="stat-value">0, 0, 255</span>
          <span class="stat-label">RGB</span>
        </div>
      </div>
    </div>
    <img src="https://assets.codepen.io/1948355/blue.jfif" alt="A serene digital landscape with a calm river winding through green hills and clusters of lush trees under soft morning light.">
 </section>
  
  <section class="yellow-section">
    <h2 class="srOnly">Yellow Joy</h2>
    <p>Yellow is a bright and cheerful color, standing for light, optimism, and creativity. It is highly visible and brings a sense of happiness and hope.</p>
    <div class="color-details">
      <div class="color-stats">
        <div class="stat">
          <span class="stat-value">#FFFF00</span>
          <span class="stat-label">Hex</span>
        </div>
        <div class="stat">
          <span class="stat-value">60°, 100%, 50%</span>
          <span class="stat-label">HSL</span>
        </div>
        <div class="stat">
          <span class="stat-value">255, 255, 0</span>
          <span class="stat-label">RGB</span>
        </div>
      </div>
    </div>
    <img src="https://assets.codepen.io/1948355/yellow.jfif" alt="A bright sunny field filled with yellow and blue flowers, with butterflies flying under a blue sky with scattered clouds and rays of sunlight.">
  </section>
</main>

CSS

@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Open+Sans:wght@400;600;700&display=swap');

*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
  --red: #FF0000;
  --blue: #0000FF;
  --yellow: #FFFF00;
  --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

body {
  font-family: "Open Sans", sans-serif;
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  line-height: 1.6;
}

main {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 4em;
  padding: 2em 1em;
}

section {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  border-bottom: 4px solid #333;
  padding: 2em 1em 6em;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition);
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}

h1, h2 {
  font-family: "Kaushan Script", cursive;
  font-weight: normal;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.2;
}

p {
  font-size: 1.1rem;
  max-width: 65ch;
}

img {
  width: 100%; 
  height: 75dvh;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: var(--transition);
}

img:hover {
  transform: scale(1.01);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.color-wheel-container {
  display: flex;
  justify-content: center;
  margin: 1em 0;
}

.color-wheel {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  transition: var(--transition);
}

.color-wheel:hover {
  transform: rotate(180deg);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

.color-segment {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 50%);
  transform-origin: 50% 50%;
}

.color-segment.red {
  background-color: var(--red);
  transform: rotate(0deg);
}

.color-segment.blue {
  background-color: var(--blue);
  transform: rotate(120deg);
}

.color-segment.yellow {
  background-color: var(--yellow);
  transform: rotate(240deg);
}

.color-details {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.5em;
  margin: 1em 0;
}

.color-stats {
  display: flex;
  gap: 1.5em;
  justify-content: space-around;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
}

.stat-value {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.3em;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

.red-section .stat-value { color: var(--red); }
.blue-section .stat-value { color: var(--blue); }
.yellow-section .stat-value { color: var(--yellow); }

.scrollDrivenHeading {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .scrollDrivenHeading {
    display: block;
    position: sticky;
    top: 0;
    background-image: linear-gradient(0deg, transparent, black 1.5em);
    padding: 1em 0.5em;
    white-space: nowrap;
    z-index: 100;
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    
    &::after {
      content: '';
      animation: headingContent step-end;
      animation-timeline: scroll();
    }
  }
  
  .srOnly {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }
}

@keyframes headingContent {
  0% { content: 'Primary Colors'; }
  
  9% { content: 'Primary Color'; }
  10% { content: 'Primary Colo'; }
  11% { content: 'Primary Col'; }
  12% { content: 'Primary Co'; }
  13% { content: 'Primary C'; }
  14% { content: 'Primary '; }
  15% { content: 'Primary'; }
  16% { content: 'Primar'; }
  17% { content: 'Prima'; }
  18% { content: 'Prim'; }
  19% { content: 'Pri'; }
  20% { content: 'Pr'; }
  21% { content: 'P'; }
  
  22%, 51% { content: 'R'; color: var(--red); text-shadow: 0 0 10px rgba(255, 0, 0, 0.7); }
  23%, 50% { content: 'Re'; }
  24%, 49% { content: 'Red'; }
  25%, 48% { content: 'Red '; }
  26%, 47% { content: 'Red P'; }
  27%, 46% { content: 'Red Po'; }
  28%, 45% { content: 'Red Pow'; }
  29%, 44% { content: 'Red Powe'; }
  
  30% { content: 'Red Power'; }
  
  52%, 80% { content: 'B'; color: var(--blue); text-shadow: 0 0 10px rgba(0, 0, 255, 0.7); }
  53%, 79% { content: 'Bl'; }
  54%, 78% { content: 'Blu'; }
  55%, 77% { content: 'Blue'; }
  56%, 76% { content: 'Blue '; }
  57%, 75% { content: 'Blue C'; }
  58%, 74% { content: 'Blue Ca'; }
  59%, 73% { content: 'Blue Cal'; }

60% { content: 'Blue Calm'; }
  
  81% { content: 'Y'; color: var(--yellow); text-shadow: 0 0 10px rgba(255, 255, 0, 0.7); }
  82% { content: 'Ye'; }
  83% { content: 'Yel'; }
  84% { content: 'Yell'; }
  85% { content: 'Yello'; }
  86% { content: 'Yellow'; }
  87% { content: 'Yellow '; }
  88% { content: 'Yellow J'; }
  89% { content: 'Yellow Jo'; }
  
  90%, 100% { content: 'Yellow Joy'; color: var(--yellow); }
}

@media (max-width: 768px) {
  main {
    gap: 3em;
  }
  
  section {
    padding-bottom: 4em;
  }
  
  .color-stats {
    flex-direction: column;
    gap: 1em;
    align-items: flex-start;
  }
  
  .stat {
    flex-direction: row;
    gap: 0.5em;
    align-items: center;
    min-width: auto;
  }
  
  .stat-value {
    margin-bottom: 0;
  }
}

/* Intersection Observer animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

JS