Intestazione fissa guidata da scorrimento

895 kevekıbhack

Apri nell'Editor Video Pubblica il Tuo Codice

Intestazione fissa guidata da scorrimento

Consigliato

14 January 2026

Clone del gioco JavaScript Geometry Dash

11 December 2024

Scheda reattiva

23 September 2024

Azienda di vendita di prodotti locali

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);
  }
}

Consigliato

Clone del gioco JavaScript Geometry Dash

Scheda reattiva

Azienda di vendita di prodotti locali

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS