今日は、クールなマウス ホバー エフェクトを一緒に学びます。これには主に CSS3 の 3D 効果の使用と、実装プロセスで使用するいくつかの単純な変換アルゴリズムが含まれます。理論を図の形で理解しやすくするために最善を尽くします。さっそく、最後のエフェクトであるホバーエフェクト (http://www.seejs.com/demos/examples/3dcss3/) を見てみましょう。接続を開き、マウスで画像リスト領域に入り、マウスを移動して、対応する領域のコンテンツフローティングレイヤーの変化を観察します。 注: 高度なブラウザプレビューを使用してください (Chrome ブラウザを推奨します)。
準備
まず、3 次元の効果を理解するとき、空間想像力を使って 2 次元の画面上で 3 次元の奥行きを確認する必要があります。 . (ソリッド ジオメトリの Z 軸)。さらに、遠く、小さい、近い、大きいなどの視点・観察点（遠近法）などの基礎的な理論知識も理解する必要があります。もちろん、変換プロセスの一部のデータに基づいて、効果実現のプロセスで必要なデータを計算するためにいくつかの単純な数学的変換機能を習得する必要もあります。長い文をもう 1 つ: 空間的想像力は非常に重要です、それで十分です!
効果分析
3 次元空間を構築するために、今考えてみましょう。この記事を読んでいるあなたは、目は画面から一定の距離にあります。この距離は、例では視点点（マウス位置）からコンテンツフローティングレイヤーまでの距離に相当しますが、コンテンツ領域と背景との視差を出すために、視点の終点となります。が背景に設定されており、背景とコンテンツレイヤーの間の距離は ですが、それらの間にはまだ一定の距離があります。この3人の関係を想像できますか？視点 - コンテンツ オーバーレイ - 背景には、目から画面までの距離と同じように、垂直方向の奥行きがあります。頭を動かして画面の片側に目を近づけると、もう一方の端の文字が非常に小さく（遠端では小さく、近くでは大きく）表示され、読みにくいことがわかります。したがって、この時点では、画面を回転して画面を目の向きにします。これは、例でマウスを領域の片側に移動するようなもので、コンテンツのフローティングレイヤーが小さな角度で回転し、その方向を向きますマウスの位置 (この例には X 方向と Y 方向の両方が含まれることに注意してください)。
次に、このモデルを中央で切り取り、Y 軸に沿って 90 度回転させます。いくつかの異なる状況を段階的に見てみましょう:
シナリオ 1、コンテンツ レイヤーなし、目 直接アクセス。背景へ:
ケース 2、コンテンツ層がありますが、コンテンツ層は観測点によって変化しません:
ケース3. コンテンツ レイヤーがあり、コンテンツ レイヤーは観測点に応じて角度的にオフセットされます。
この時点では、基本的にこの例の静的モデルのみが表示されます。違いは、この場合、コンテンツ レイヤーです。ツイスト角度は必ずしも観測点に対して垂直であるとは限りませんが、これは単なるパラメーターの違いです。完全な gif アニメーションを使用して、観測に応じてコンテンツ レイヤーが変化するプロセス全体を見てみましょう。ポイント:
このモデルを使用すると、サンプルの実装がはるかに簡単になります。
コーディング
最初のステップは、背景レイヤーとコンテンツ レイヤーをレイアウトすることです (例として 1 つのコンテナーを取り上げます)
次に、これらを次の方法で追加します。 CSS スタイル それを積み重ねて、観測点と背景の間の距離を設定します。
.wrap {
position:relative;
float:left;
margin-top: 20px;
margin-left: 20px;
幅: 400px;
高さ: 600px;
/ ※背景からの観測点の距離 距離は400ピクセル、つまり目からイラストの黒い縦線までの距離
/
perspective: 400px;
デフォルトの目の観測点ラップの中心にあります/
perspective-origin: 50% 50%;
overflow: hidden;
}
。ラップ .up {
位置: 絶対;
上: 0;
左: 0;
幅: 100%;
height: 100%;
* コンテンツ レイヤーは背景レイヤーから 80 ピクセル離れています。コンテンツ レイヤーが目に近いと、大きく見えます
*コンテンツが完全に表示されるように表示率を 0.8 に設定します
*/
transform:scale(.8) translationZ(80px);
}
2 番目のステップは、マウスの移動中に必要なデータの計算式を分析することです:
まず図を見てみましょう:
その図非常に明確ですが、まだまだ不明な点が多いようです。 JS では、ブラウザの表示領域の左上隅を基準としたノード (コンテナ) の相対座標を簡単に取得できることがわかっているため、[x1, y1] は実際には既知です。コンテナの中心位置は、コンテナの x 座標と y 座標にコンテナ自体の幅と高さの半分を加えたものになります。つまり、[x0, y0] も既知です。最後に、マウスの移動中に、イベント オブジェクト自体を通じてブラウザの左上隅を基準としたマウスの座標を簡単に取得できます。もちろん、[x2, y2] も取得できます。また、未知の [rx,実際のアプリケーションでは、より合理的な値が設定されているため、既知のデータを式に代入して、最終的に dx1、dy1、rx0、ry0 を簡単に計算できます。
3 番目のステップは、理論と実践、実践を組み合わせて真実をテストすることです:
(function(){
var c = [], // center: centerマウス移動エリアのポイント Co座標
m = [], // MouseCooperatives: 現在のマウス位置の座標
w = [], // WrapCooperatives: マウスの左上隅の座標マウス移動領域
d = [ 3, 3] // X/Y 方向の最大ツイスト角度 (度)
document.getElementById('J_Wrap').onmousemove = function( ev){
ev.preventDefault( );
var _this = this, r, z;
m[0] = ev.clientX + window.scrollX;
m 1= ev.clientY + window .scrollY;
w[0] = _this.getBoundingClientRect().left + window.scrollX;
w 1= _this. getBoundingClientRect().top + window.scrollY;
c[0] = w[0] + _this.offsetWidth / 2;
c 1= w 1+ _this.offsetHeight / 2;
// 回転: 現在のマウスに従って 現在の X/Y 方向の回転角度 (度) を領域の中心を基準とした位置のパーセンテージとして計算します
r = [-(c[0] – m[0]) / (c[0] – w[0]) * d[0], (c 1 – m 1) / (c 1 – w 1) * d 1] ;
//perspectiveOrigin: 視覚的な観察点はマウス移動領域の左上隅を基準としています Percent(0-1)
p = [0.5 + (c[0] – m[0]) / (c[0] – w[0]) * 0.5, 0.5 + (c 1 – m 1) / (c 1 – w 1) * 0.5];
z = 80 ;
_this.style['perspectiveOrigin'] = p[0] * 100 + '%' + ' ' + p 1* 100 + '%';
_this.getElementsByTagName(' div') 1.style['transform'] = 'scale(.8) 変換Z(' + Math.abs(z ) + 'px) 回転X(' + r 1+ 'deg) 回転Y(' + r[0] + 'deg)';
};
})();
配列 r と配列 p の計算過程を図の式と比較します。上の凡例の位置にある d 配列は [3, 3] と指定されています。もちろん、お好みに応じて数値を指定することもできます。基本的にエフェクト全体は完成しています。
組織とカプセル化
前のコードは関数を実装していますが、コードの記述は非常に不規則です。任意の変数名、コードの再利用性の考慮、および複数のインスタンスの考慮がありません。マウスを外した後、表示効果が復元されないなど。したがって、本番環境で使用することは基本的に不可能です。
(function(window, $){
var _default = {
ターゲット: '.up',
度: [3, 3],
translateZ: 80,
スケール: .8
};
$.fn.magicHover = function(cfg) { var config = $.extend({}, _default, cfg), center = [], // center: 鼠标move区域中心点坐标 mouseCoord = [], // mouseCoordinates: 鼠标当前位置坐标 wrapCoord = [], // wrapCoordinates: 鼠标move区域左上角坐标 deg = config.deg; // X/Y方向的最大扭转角度(deg) return this.each(function(idx, wrap){ $(wrap).on('mousemove', function(ev){ ev.preventDefault(); var _this = $(this), rotate; mouseCoord[0] = ev.clientX + $(window).scrollLeft(); mouseCoord[1] = ev.clientY + $(window).scrollTop(); wrapCoord[0] = _this.offset().left; wrapCoord[1] = _this.offset().top; center[0] = wrapCoord[0] + _this.width() / 2; center[1] = wrapCoord[1] + _this.height() / 2; // rotate: 根据当前鼠标位置相对于区域中心位置百分比计算出当前X/Y方向的扭转角度(deg) rotate = [-(center[0] - mouseCoord[0]) / (center[0] - wrapCoord[0]) * deg[0], (center[1] - mouseCoord[1]) / (center[1] - wrapCoord[1]) * deg[1]]; // perspectiveOrigin: 视觉观察点相对于鼠标move区域左上角的百分比(0-1) perspectiveOrigin = [0.5 + (center[0] - mouseCoord[0]) / (center[0] - wrapCoord[0]) * 0.5, 0.5 + (center[1] - mouseCoord[1]) / (center[1] - wrapCoord[1]) * 0.5]; _this.css('perspectiveOrigin', perspectiveOrigin[0] * 100 + '%' + ' ' + perspectiveOrigin[1] * 100 + '%'); _this.find(config.target).css('transform', 'scale(' + config.scale + ') translateZ(' + Math.abs(config.translateZ) + 'px) rotateX(' + rotate[1] + 'deg) rotateY(' + rotate[0] + 'deg)'); }).on('mouseout', function(ev){ var _this = $(this); _this.css('perspectiveOrigin', '50% 50%'); _this.find(config.target).css('transform', 'scale(' + config.scale + ') translateZ(' + Math.abs(config.translateZ) + 'px) rotateX(0) rotateY(0)'); }); });};})(window, jQuery);
そして最後の呼び出しメソッドも非常に単純です:
$ (function(){
$('.wrap').magicHover({
ターゲット: '.up',
度: [3, 3],
translationZ: 80
});
});
最後に、紛らわしい点の 1 つは、CSS3 の回転 (rotateX、rotateY) です。たとえば、rotate) 、rotateZ) は座標軸を基準にしています。たとえば、rotateX を使用すると、rotate で x と y の位置を意図的に入れ替えて、実際に回転させます。 deg パラメータと translationZ パラメータを変更してブラウジング効果を比較し、原理をより簡単に理解してみることができます。さて、完了しました。今夜はゆっくりお休みください~~
著者: Baima Villa ウェブサイト: http://www.seejs.com/archives/766
記事の出典: Front-百科事典終了 このサイトの記事はすべて、HTML5 DreamWorks の編集者が選択した他のメディアからの転載です。これらはネチズンのみが学習および伝達するためのものです。私たちの作品があなたの権利を侵害している場合は、編集者 QQ: 123464386 までご連絡ください。間に合うように、できるだけ早く処理させていただきます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
