Paydirtのホームページにあるスライドショーの素晴らしいルーペ/拡大効果

Question

私は完全にスライドショーhttps://paydirtapp.com/で吹き飛んでいます。私はそれがいくつかの複雑なhtml5キャンバスmumbo-jumboだと思いますか？

Answer 1

TL; DR：ブラウザのインス​​ペクタを使用してすべてを見つけてください。

予想通りキャンバスを使用しているとは限りません。ブラウザのインス​​ペクタを使用して、あなたはすぐにここで何が起こっているかの基本を見ることができます：拡大鏡、スクリーンショットやメッセージ：

あなたは上から見ることができるように、3つの主要コンポーネントがあります。 CSS3を使用すると、拡大鏡の各部分（影、グロー、キャンバス）に対してドロップシャドウと円形効果が作成されます（ボックスシャドウ&ボーダー半径）。

キャンバスの部分は、単に拡大鏡の下にある画像です。キャンバスを使用すると、画像をぼかすことができます（虫めがねがアニメーション化されたとき、3つの要素のコンテナは移動とサイジング（スケール）を管理します）。円形の切り抜きのようなエフェクトは境界線のスタイルで行われます。

image_wrapperクラスは、ツアーが通過することを、すべての個々のスクリーンショットを保持している。canvas要素はバージョンで「ズーム」のために別々の画像をロードする必要がないので、おそらく必要とされるよりも高解像度の画像があります。

Anはそこです単にテキストが含まれてmagnifier_messageクラスこれは、javascriptを介して、更新されます - 。。ここでは、あまりにも派手な何も

へすべてをまとめて、これらの3つの要素を含む親は（OSXデスクトップの）背景画像を持っています。キャンバスの仕事のために

- それは心の弱い人のためではない - 彼らは/assets/promo-0e644...jsファイルの下のjavascriptにしています。悲しいことに

、余興にはない：それはあなたが良いの読み取りを（それは、ウィンドウの下部にある中括弧のボタンです）にしたい場合は、もう少し読みやすいですので、WebKitのインスペクタには、JavaScriptを再フォーマットすることができます（progressive enhancement）：