Encabezado fijo controlado por desplazamiento

1,470 kevekıbhack

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Encabezado fijo controlado por desplazamiento

Recomendado

20 September 2025

Plantilla HTML de portafolio de desarrollador

21 August 2024

Plantilla de portafolio HTML creativo

14 September 2024

Carrusel de portafolios con controles deslizantes sincronizados

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