https://paydirtapp.com/のスライドショーにすっかり驚かされましたが、それがどのように達成されたかについて誰かが手がかりを得ましたか？複雑なhtml5キャンバスのmumbo-jumboだと思いますか？
1 に答える
2
TL; DR：ブラウザのインスペクタを使用してすべてを見つけてください！
おそらく、予想するほど多くのキャンバスの使用はありません。ブラウザインスペクタを使用すると、ここで行われていることの基本をすばやく確認できます。
上からわかるように、拡大鏡、スクリーンショット、メッセージの3つの主要コンポーネントがあります。CSS3を使用して、拡大鏡の各部分（シャドウ、グロー、キャンバス）に対してドロップシャドウと円形効果（ボックスシャドウとボーダー半径）が作成されます。
キャンバス部分は、単に虫眼鏡の下にある画像です。キャンバスを使用すると、画像をぼかすことができます（虫眼鏡がアニメートする場合。これら3つの要素のコンテナは、移動とサイズ変更（スケール）を管理します。円形のトリミングのような効果は、境界線の半径スタイルだけで実行されます。
image_wrapperクラスには、ツアーで使用するすべての個別のスクリーンショットが含まれています。おそらく、canvas要素がバージョンの「ズーム」用に個別の画像をロードする必要がないため、必要以上に高解像度の画像があります。
次に、magnifier_message単にテキストを含むクラスがあります。これはjavascriptを介して更新されます-ここではそれほど派手なことはありません。
すべてをまとめると、これら3つの要素を含む親には、（OSXデスクトップの）背景画像があります。
キャンバスの仕事のために-それは心の弱い人のためではありません-彼らは/assets/promo-0e644...jsファイルの下のjavascriptにあります。Webkitのインスペクターはjavascriptを再フォーマットできるので、読みやすくしたい場合はもう少し読みやすくなります（ウィンドウの下部にある中括弧ボタンです）。
悲しいことに、サイドショーは優雅に劣化しません（またはプログレッシブエンハンスメントの兆候）:(
于 2012-05-08T07:25:38.643 に答える