非常にクールな擬似 3D インタラクティブ エフェクトの書き方を教えます
注：画像素材はインターネットから取得したものです。侵害がある場合は、連絡して削除してください。
デモのダウンロード
ステーション C でのファイルのアップロードとダウンロードには c コインが必要なので、ダウンロードすることはお勧めしません。コードと素材は最後に添付されます。
地元の暴君については、こちらをご覧ください:デモのダウンロード
導入と効果
効果は以下の通りです
マウスの動きとスライド効果
使用されている技術
- html:メインフレーム
- CSS:レイアウトと配置
- JavaScript:インタラクティブなダイナミクス
達成
成果効果の運用分析
まず、ディレクトリ関係を確認する必要があります。
構造分析と運用階層
簡略構造図
主題の位置づけと実装コード
したがって、メインフレームは次のように記述できます。
<div id="box">
<!-- 底层主体 -->
<img src="./duck.webp" alt="" />
<!-- 上层图片 -->
<div id="list">
<img src="./hover.png" alt="" />
</div>
</div>
上のレイヤーと下のレイヤーの両方を移動できることがわかります。そのため、CSS の位置は次のようになります。
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>
補足：なぜ写真を拡大したいのですか？
以下に示すように
というのも、そのまま乗せて左右に動かすと絵が激しく変形してしまい、上下左右に内容が無く見栄えが悪くなるので、そうせざるを得ません。少しズームインします。
JavaScriptコードの設計と分析の実装
さて、上でいくつかの基本的な配置とレイアウトについて説明しましたが、ここで JavaScript のインタラクティブなデザインについて話しましょう。
2 枚の写真で疑似 3D を実現するにはどうすればよいですか?
マウスがページ上に移動すると、次のようになります。
簡略化した回路図
上下移動も同様です
コード
// 当鼠标再页面上移动开始计算坐标
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`;
}
}
};
目の鋭い友人は私が書いたことに気づくかもしれません
オフセットを達成する方法
なぜ hoverx と hoverv を定義するのでしょうか?
その理由は、マウスがページ上で移動すると、その擬似位置に基づいて移動を開始するためです。これは、擬似ベース上でマウスの移動の座標の計算を開始するのと同等です (これは、ページ上でマウスの移動の座標を計算するために使用されます)。移動する最上層と最下層のサイズ、つまり hoverx と hovery を定義するコードは次のとおりです)
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);
};
過剰なオフセットを防ぐために fout& を定義する理由
鋭い観察力を持つ友人たちは、私が再び fout を定義したことに気づくかもしれません。
なぜでしょうか?
ページの外に移動するときにページをリセットする必要があるため、そうしないと過度のオフセットが発生する可能性があるため、
焦点外のリセットのコードは次のとおりです。
ピントずれリセットの実装
// 鼠标移出页面就关闭交互
document.getElementById("box").onmouseout = function (event) {
// 页面失去焦点就关闭效果
fout = false;
};
完全なコード
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>
使用した画像素材
下の画像:
トップ画像:
