Encabezado fijo controlado por desplazamiento

1005 kevekıbhack

Abrir en el editor Video Publica tu código

Encabezado fijo controlado por desplazamiento

Recomendado

30 August 2024

Botón con efecto de desplazamiento de Drácula animado

2 November 2025

Plantilla web para portafolio: Diseño moderno

4 July 2025

Plantilla HTML de ORABANC Bank: Portales de usuario y CSS

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

Recomendado

Botón con efecto de desplazamiento de Drácula animado

Plantilla web para portafolio: Diseño moderno

Plantilla HTML de ORABANC Bank: Portales de usuario y CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS