es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo ocultar un elemento a medida que se desplaza la página?

29 May, 2023 Programación

Estoy tratando de ocultar un elemento mientras desplazo hacia arriba en la página. Estoy usando clip-path y position: fixed para intentar lograr esto. Esto es lo que tengo hasta ahora. El texto está oculto mientras me desplazo como estaba previsto. Me pregunto si sería posible empezar a recortarlo desde la parte superior mientras me desplazo en lugar de la parte inferior como funciona ahora.

Quiero que el elemento se corte desde la parte superior mientras me desplazo hacia abajo.

Una idea que tuve fue rotar el texto 180 grados y luego rotar el elemento recortado de vuelta 180 grados, pero no estoy muy seguro de si funcionaría/cómo implementarlo. Dado que la transformación crea un bloque que contiene, no sé cómo hacer que el desplazamiento funcione.

#main-container {
position: relative;
height: 100px;
width: 100vw;
}
#clip-container {
position: absolute;
height: 80px;
width: 100vw;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
overflow: hidden;
background-color: rgba(255, 165, 0, 0.5);
margin-top: 10px;
}

.filler-div {
background-color: blue;
width: 100vw;
height: 100px;
}
#text {
position: fixed;
}

TEXTO AQUÍ

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el efecto deseado: recortar el elemento desde arriba a medida que el usuario se desplaza hacia abajo en la página, se pueden seguir los siguientes pasos:

    1. Cambie el valor de propiedad clip-path para recortar el elemento desde arriba en lugar de desde abajo. Esto se puede hacer utilizando el valor polygon() con los valores de eje Y invertidos, así:
    clip-path: polygon(0 100%, 100% 100%, 100% 20%, 0 0);
    1. Gire el elemento recortado 180 grados utilizando la propiedad transform. Esto lo volteará al revés para que el texto aparezca en la posición correcta.
    transform: rotate(180deg);
    1. Agregue otro elemento contenedor alrededor del elemento recortado y girado para actuar como un bloque contenedor para el efecto de desplazamiento, y aplique el estilo position: fixed a este contenedor, no al elemento recortado en sí.

    Aquí está el código actualizado:

    <!-- language: lang-css -->
#scroll-container {
  position: fixed;
  height: 80px;
  width: 100vw;
}

#clip-container {
  position: absolute;
  height: 80px;
  width: 100vw;
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 20%, 0 0);
  clip-path: polygon(0 100%, 100% 100%, 100% 20%, 0 0);
  overflow: hidden;
  background-color: rgba(255, 165, 0, 0.5);
  margin-top: 10px;
  transform: rotate(180deg);
}

.filler-div {
  background-color: blue;
  width: 100vw;
  height: 100px;
}

#text {
  position: absolute;
}

<!-- language: lang-html -->
<div class="filler-div"></div>
<div id="scroll-container">
  <div id="clip-container">
    <div id="text">
      <h1>TEXT GOES HERE</h1>
    </div>
  </div>
</div>
<div class="filler-div"></div>

    Con estos cambios, el texto ahora se recortará desde arriba a medida que el usuario se desplaza hacia abajo en la página.

Comments are closed.