¿Cómo ocultar un elemento a medida que se desplaza la página?
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;
}
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:
clip-path
para recortar el elemento desde arriba en lugar de desde abajo. Esto se puede hacer utilizando el valorpolygon()
con los valores de eje Y invertidos, así:transform
. Esto lo volteará al revés para que el texto aparezca en la posición correcta.position: fixed
a este contenedor, no al elemento recortado en sí.Aquí está el código actualizado:
Con estos cambios, el texto ahora se recortará desde arriba a medida que el usuario se desplaza hacia abajo en la página.