0

ヘッダー スライドショーに特殊効果を適用したいと考えています。古い画像を新しい画像にフェードすることで、いくつかの画像をスライドさせる部分は既に完了しています。

私のヘッダー スライドショーの画像は width=1000px; 高さ=400px;

スライドショーで画像がフェードアウトしてから次の画像に移るまでの間 (約 5 秒)、表示される画像の明るさをランダムに変化させたいと考えています。ただし、明るさを同じサイズ(幅 = 125px、高さ = 100px)のセクションでランダムに変化させたいと考えています。

アクティブなイメージを z-index: 10; に配置できると思いました。z-index:9 の完全に白い背景。次に、アクティブな画像の不透明度を変更すると、一種のトリックが行われます（ただし、それはより明確になり、決して暗くなることはありません）.

しかし、次のような方法はありません: $active.animate({opacity: Math.random()*0.7}, { coords1, coords2, coords3, duration: Math.random()*200 , queue: false }) ;

解決策は、それぞれが画像の一部を含む32個の変数を宣言することです（私のimgサイズによると、幅= 125px;高さ= 100pxの32ブロックに分割されます）。私には少し大胆に思えますが、これらの 32 個の変数を作成する方法がまだわかりません。

誰でも私の問題を解決するためのより良いアイデアがありますか?

前もって感謝します。

4

1 に答える 1

0

私は自分のために仕事をする安価なトリックを見つけました。

基本的にはフェードイン・フェードアウト系のスライドショーを使っていたので、同じようなフェードイン・フェードアウトのスライドショーを上にz-indexを上げて追加したのですが、今回は疑似ランダムであらかじめ定義されたマスクを用意しました黒と白の四角。

多くのマスクが同じ画像に適用されるように、実際のスライドショーよりも高い頻度でマスクのスライドショーを再生し、不透明度を 0 から 0.3 まで変化させました。これにより、白い正方形の画像が効果的に明るくなり、黒い正方形の画像が暗くなります。 .

タイル内の画像の不透明度をランダムに変更する印象を与えることで、このトリックを実行しました。

誰かが同じ効果を望んでいる場合、これが役立つことを願っています。

于 2013-11-08T07:10:53.747 に答える