Prefacio
¿En qué sitios web fue de compras durante Double 11 justo después? No importa a qué sitio web vayas, probablemente Tmall sea indispensable. Encontré un fenómeno tan interesante al visitar Tmall:
Aunque este efecto todavía es relativamente común, hay un detalle que es diferente. Por ejemplo, veamos primero el efecto de un encabezado ordinario que se desvanece gradualmente a medida que la ventana se desplaza:
Compárelo para descubrir qué es diferente, la versión normal es completamente transparente al principio y se muestra lentamente a medida que la ventana se desplaza, lo que se opacitylogra controlando la propiedad de transparencia.
La versión de caja negra pequeña tiene un color degradado al principio, y es gradualmente gradual para volverse casi translúcido. Este método se ve más elegante, pero se ve como un hermoso color degradado cuando ingresa a la página antes de desplazarse., El comportamiento al desplazarse es casi lo mismo que antes cuando se confiaba en la transparencia.
Lo que queremos mejorar es usar la distancia de desplazamiento para controlar background-position. A medida que la ventana se desplaza, el grado del degradado cambiará gradualmente para controlar el efecto oculto.
estilo
En primer lugar, headerescribamos el estilo:
header {
/* 设置一个控制背景色位置的CSS变量，方便JS控制 */
--position: 100;
/* 居中靠下显示子元素 */
display: grid;
place-items: end center;
/* 设置为固定定位 */
position: fixed;
/* 距离上边左边为0 */
top: 0;
left: 0;
/* 宽度铺满屏幕 */
width: 100%;
/* 给个合适的高度 */
height: 40px;
/* 白色字体 */
color: white;
/* 字体大小 */
font-size: 16px;
/* 让字体细一点 */
font-weight: 100;
/* 增加下内变局，防止文字过于靠下 */
padding-bottom: 10px;
/* 设置过渡效果 */
transition: background-position .2s;
/* 黑色渐变背景 */
background: linear-gradient(black, rgba(148, 88, 88, 0.3) 80%, rgba(0, 0, 0, 0)) 0 calc(var(--position) * 1%) / 100% 300%;
}
resultado de la operación:
Puede ver que hemos headerestablecido una variable CSS en ella . Si no está seguro de qué es una variable CSS , haga clic aquí . La cuadrícula también se usa para centrar . Por supuesto, no está completamente centrada , sino ligeramente más baja. Porque creo que la pequeña caja negra de Tmall está centrada en la parte inferior.
Realización general
Luego comenzamos a escribir código JS, porque la distancia de desplazamiento de la pantalla no se puede obtener con CSS puro, pero para facilitar la interacción entre los dos lados, seguimos usando variables CSS , porque la mejora que aportan las variables CSS no es solo ahorro de puntos, código CSS, así como la reducción del costo de desarrollo y mantenimiento de CSS.
Más importante aún, muchos desarrollos interactivos en los componentes se han transferido del JS original al código CSS, lo que hace que el código del componente sea más conciso y, al mismo tiempo, hace que el rendimiento visual sea más flexible. ——Zhang Xinxu
Para conocer los beneficios específicos que las variables CSS pueden brindarnos, consulte el blog de Zhang Xinxu:
"La mejora y el cambio de variables CSS para el desarrollo de componentes interactivos JS"
Echemos un vistazo a cómo interactúan las variables CSS con JS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>属于自己的渐变小黑盒</title>
<style>
/* 清除默认样式 */
* { padding: 0; margin: 0 }
header {
/* 设置一个控制背景色位置的CSS变量，方便JS控制 */
--position: 100;
/* 居中靠下显示子元素 */
display: grid;
place-items: end center;
/* 设置为固定定位 */
position: fixed;
/* 距离上边左边为0 */
top: 0;
left: 0;
/* 宽度铺满屏幕 */
width: 100%;
/* 给个合适的高度 */
height: 40px;
/* 白色字体 */
color: white;
/* 字体大小 */
font-size: 16px;
/* 让字体细一点 */
font-weight: 100;
/* 增加下内变局，防止文字过于靠下 */
padding-bottom: 10px;
/* 设置过渡效果 */
transition: background-position .2s;
/* 黑色渐变背景 */
background: linear-gradient(black, rgba(148, 88, 88, 0.3) 80%, rgba(0, 0, 0, 0)) 0 calc(var(--position) * 1%) / 100% 300%;
}
main {
/* 给个合适的高度 */
height: 1000px;
}
</style>
</head>
<body>
<header>咱们自己的小黑盒</header>
<main></main>
<script>
// 获取header
const header = document.getElementsByTagName('header')[0]
addEventListener('scroll', () => {
// 获取偏移值
const top = document.documentElement.scrollTop
// 设置一个合适的范围
if (top <= 200) {
// 令header的渐变色位置变成计算后的渐变位置
header.style.setProperty('--position', 100 - Math.min(100, top))
} else {
// 在移动一定范围后令其完全不透明
header.style.setProperty('--position', 0)
}
})
</script>
</body>
</html>
resultado de la operación:
Imagínese cómo sería sin usar variables CSS :
header.style.backgroundPosition = '0 ' + 100 - Math.min(100, top) + '%'
Aunque parece no ser nada, será un desastre cuando haya más atributos que controlar, y este método siempre debe llevar unidades CSS, como px,%, rem, lo que agrega innecesariamente, es una carga mental y también ralentiza la eficiencia del programa.
Después de usar las variables CSS , no es necesario traer una unidad, simplemente asigne un número directamente, así que ¿por qué no traer una unidad? La respuesta está en calcla función:
calc (
var(--position)*1%)
Recuerde que ya no puede usar el pensamiento JS para escribir la función calc aquí. En JS, lo usamos +porque esto representa el empalme de cadenas, y el uno 乘以por ciento aquí se convertirá en un porcentaje específico. De manera similar, si necesita otras unidades, puede realizar modificaciones flexibles según necesidades específicas:
calc (
var(--position)*1px)
⚠️ ¡Tenga en cuenta que el que está delante de px 1es muy importante y no se puede omitir!
Y no es necesario escribir 1, también puedes multiplicar según necesidades específicas:
calc (
var(--position)*6.6rem)
Expandir
De hecho, visto desde el código y nuestra vida cotidiana puede afectar eso, esencialmente retrocediendo cierta distancia, la headertransparencia en lo fijo no cambiará, los onscrolleventos de escucha desperdiciados . Pero no puede cancelar el monitoreo porque no sabe cuándo el usuario volverá a deslizarse hacia arriba, pero esta situación es muy adecuada para otro efecto:
Olvidé cómo se llama este efecto. En resumen, muestra algo similar a una barra de progreso en la parte superior a medida que el usuario se desplaza por la página, para que el usuario pueda saber en qué tipo de posición se encuentra en la página web. código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>属于自己的渐变小黑盒</title>
<style>
/* 清除默认样式 */
* { padding: 0; margin: 0 }
header {
/* 设置一个控制位置的CSS变量，方便JS控制 */
--position: 0;
/* 设置为固定定位 */
position: fixed;
/* 距离上边左边为0 */
top: 0;
left: 0;
/* 宽度铺满屏幕 */
width: 100%;
/* 给个合适的高度 */
height: 10px;
/* 设置过渡效果 */
transition: transform .1s;
/* 渐变背景 */
background: linear-gradient(to right,#4481eb,#04befe);
/* 设置形变效果 */
transform: scaleX(var(--position));
/* 设置变形参照点 */
transform-origin: left;
}
main {
/* 给个合适的高度 */
height: 10000px;
/* 渐变背景 */
background: linear-gradient(#30cfd0,#330867)
}
</style>
</head>
<body>
<header></header>
<main></main>
<script>
// 获取header
const header = document.getElementsByTagName('header')[0]
addEventListener('scroll', () => {
// 获取偏移值
const top = document.documentElement.scrollTop
// 获取页面总高度
const height = document.documentElement.scrollHeight
// 设置CSS变量
if (top > height - document.documentElement.clientHeight - 1) {
header.style.setProperty('--position', 1)
} else {
header.style.setProperty('--position', top / height)
}
})
</script>
</body>
</html>
Este artículo se publicó por primera vez en la cuenta pública de WeChat: "La interfaz no se mueve"