Enseñarte a escribir un efecto interactivo pseudo-3D genial
Nota: El material de la imagen proviene de Internet. Si hay alguna infracción, comuníquese para eliminarla.
descarga de demostración
Dado que se requiere la moneda C para cargar y descargar archivos en la estación C, no se recomienda descargar, y el código y los materiales se adjuntarán al final
Para los tiranos locales, consulte aquí: descarga de demostración
Introducción y efecto
El efecto es el siguiente
movimiento del mouse y efecto deslizante.
tecnología utilizada
- html: marco principal
- css: diseño y posicionamiento
- JavaScript: dinámica interactiva
lograr
Análisis Operacional de los Efectos de Logro
En primer lugar, debe confirmar la relación del directorio. Mi lado es
Análisis estructural y jerarquía operativa
Diagrama de estructura simplificado
Código de implementación y posicionamiento del sujeto
Así que el marco principal se puede escribir como:
<div id="box">
<!-- 底层主体 -->
<img src="./duck.webp" alt="" />
<!-- 上层图片 -->
<div id="list">
<img src="./hover.png" alt="" />
</div>
</div>
Podemos ver que tanto la capa superior como la capa inferior se pueden mover, por lo que el posicionamiento de CSS debería ser:
Implementación de código CSS
<style>
* {
margin: 0;
}
/* 底层图片 */
#box > img {
height: 100vh;
position: fixed;
left: 0;
top: 0;
transform: scale(1.2);
/* transition: 2s; */
}
/* 上层图片 */
#box > #list > img {
height: 100vh;
transform: scale(1.2);
position: fixed;
bottom: 0;
/* transition: 2s; */
// 最好不要加，要不然让你心态炸裂
}
</style>
Suplemento: ¿Por qué quieres ampliar la imagen?
Como se muestra abajo
Porque si lo coloco directamente sobre él y lo muevo hacia la izquierda y hacia la derecha, la imagen se deformará severamente. No hay contenido en la parte superior, inferior, izquierda y derecha, lo que provocará una mala apariencia, así que tengo que ampliar un poco.
Implementación de análisis y diseño de código JavaScript
Bueno, lo mencionado anteriormente es un poco de posicionamiento y diseño básico, ahora deberíamos hablar sobre el diseño interactivo de JavaScript.
¿Cómo lograr pseudo 3D con dos imágenes?
Cuando el mouse se mueve sobre la página:
esquema simplificado
Lo mismo ocurre con el movimiento hacia arriba y hacia abajo.
Código
// 当鼠标再页面上移动开始计算坐标
document.getElementById("box").onmousemove = function (event) {
// 如果鼠标再页面的元素上否则不生效
if (fout == true) {
console.log(hover_x - event.screenX);
console.log(hover_y - event.screenY);
console.log(event.screenX, event.screenY);
// 计算底层的偏移值
if (event.screenX > 0) {
document.querySelector("#box>img").style.left = `${
(hover_x - event.screenX) / 10
}px`;
document.querySelector("#box>img").style.top = `${
(hover_y - event.screenY) / 10
}px`;
}
// 计算顶层的偏移值
if (event.screenY > 0) {
document.querySelector("#box>#list>img").style.top = `${
(hover_y + event.screenY) / 10
}px`;
document.querySelector("#box>#list>img").style.left = `${
(hover_x + event.screenX) / 10
}px`;
}
}
};
Los amigos de ojos agudos pueden encontrar que escribí
Cómo lograr la compensación
¿Por qué definir hoverx y hovery?
La razón es que cuando el mouse se mueve en la página, comienza a moverse sobre la base de su pseudo-posicionamiento, lo que equivale a comenzar a calcular las coordenadas del movimiento del mouse sobre su pseudo-base (se utiliza para calcular el tamaño de las capas superior e inferior para mover, por lo que los códigos para definir hoverx y hovery son)
var fout = 0;
//声明x和y
var hover_x;
var hover_y;
// 当移动到页面上时
document.getElementById("box").onmouseover = function (event) {
fout = 1;
hover_x = event.screenX;
hover_y = event.screenY;
console.log(hover_x, hover_y);
};
¿Por qué definir fout& para evitar un desplazamiento excesivo?
Creo que los amigos de vista aguda pueden encontrar que he definido un fout otra vez
.
Debido a que la página debe restablecerse cuando salgo de la página, de lo contrario, puede haber un riesgo de desplazamiento excesivo,
por lo que el código para restablecer el desenfoque es
Implementación de reinicio fuera de foco
// 鼠标移出页面就关闭交互
document.getElementById("box").onmouseout = function (event) {
// 页面失去焦点就关闭效果
fout = false;
};
código completo
html+css+JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
}
#box > img {
height: 100vh;
position: fixed;
left: 0;
top: 0;
transform: scale(1.2);
/* transition: 2s; */
}
#box > #list > img {
height: 100vh;
transform: scale(1.2);
position: fixed;
bottom: 0;
/* transition: 2s; */
}
</style>
</head>
<body>
<div id="box">
<!-- 底层主体 -->
<img src="./duck.webp" alt="" />
<!-- 上层图片 -->
<div id="list">
<img src="./hover.png" alt="" />
</div>
</div>
<script>
var fout = 0;
var hover_x;
var hover_y;
// 当移动到页面上时
document.getElementById("box").onmouseover = function (event) {
fout = 1;
hover_x = event.screenX;
hover_y = event.screenY;
console.log(hover_x, hover_y);
};
// 当鼠标再页面上移动开始计算坐标
document.getElementById("box").onmousemove = function (event) {
// 如果鼠标再页面的元素上否则不生效
if (fout == true) {
console.log(hover_x - event.screenX);
console.log(hover_y - event.screenY);
console.log(event.screenX, event.screenY);
// 计算底层的偏移值
if (event.screenX > 0) {
document.querySelector("#box>img").style.left = `${
(hover_x - event.screenX) / 10
}px`;
document.querySelector("#box>img").style.top = `${
(hover_y - event.screenY) / 10
}px`;
}
// 计算顶层的偏移值
if (event.screenY > 0) {
document.querySelector("#box>#list>img").style.top = `${
(hover_y + event.screenY) / 10
}px`;
document.querySelector("#box>#list>img").style.left = `${
(hover_x + event.screenX) / 10
}px`;
}
}
};
// 鼠标移出页面就关闭交互
document.getElementById("box").onmouseout = function (event) {
// 页面失去焦点就关闭效果
fout = false;
};
</script>
</body>
</html>
Material de imagen utilizado
Imagen inferior:
Imagen superior:
