0

ガラスのドックに反射する写真サイトを制作中です。それはかなり滑らかです。

CSS3 の box-reflect 属性を使用する代わりに、その上にあるものを単純に反転させ、グラデーション マスクを持つキャンバス レイヤーをドキュメントに組み込みたいと思います。これにはいくつかの理由があります。

  • ブラウザの互換性 (Chrome にはボックス リフレクトのバグがあり、私を殺しています)
  • 人工物理学をいじくりまわしています...ドックの端を越えたとき、私はドックの反射だけが欲しいです

私はオンラインで見回し、実行する各画像のキャンバス要素を構築するプラグインのリソースをたくさん見ましたが、どれもうまくいきません.

理想的には、ドックの上の領域のすべてのピクセルをコピーして上下逆さまにし、事前に定義したいくつかのイベント (スライド ショーの画像が移動されるたびなど) で実行する jQuery をいくつか用意します。

誰かがこれに関するリソースを見たことがありますか? 私は気が狂っていて、より良い方法を見逃していますか? ご協力いただきありがとうございます！

これはちょっとした目の保養のスクリーンショットです。画像以外のページ上のすべてが CSS です。

http://cloud.dhut.ch/image/0F1i2T0p3i3M

4

1 に答える 1

0

モバイル サポートを検討したい場合は、CSS プロパティを使用することをお勧めします。CSS プロパティの方がキャンバス描画よりもうまく機能するからです。一方、ブラウザーをサポートしたい場合は、キャンバスを使用して反射を作成できます。

キャンバス ソリューションは難しいです。限目。1 つまたは一連の画像から反射を作成する近道はありません。キャンバスの反射を作成するための基本的な手順は次のとおりです。

  1. 特定の時間に表示しているすべての画像を反復処理します。
  2. 隠しキャンバスに各画像を描画します。
  3. すべての画像を同じベースラインで描画した後、キャンバス全体から画像データを取得します。
  4. simple for iterations をピクセルに対して使用して、イメージ データを反復および反転します。
  5. 画像データの各ピクセル行を上から順に、各ピクセルのアルファ値を少しずつ変更して不透明度を下げます。これにより、グラデーションのフェードアウト効果が作成されます。
  6. 画像データをリフレクション キャンバスに入れます。

シーンから 1 つのイメージを変更するたびに、これを再描画する必要があります。移動するたびに (スクロールバーがある場合)、反射を更新する必要があります。

これは、パフォーマンスの観点から非常にコストがかかります。

css リフレクションを使用すると、ハードウェア アクセラレーションが実行され、すぐに使用できます。ブラウザが完全にサポートすると、非常にスムーズになります。

私の意見では、キャンバスのアプローチはやり過ぎです。

于 2012-10-09T12:11:45.353 に答える