クロスフェード効果を作成する適切な方法は何ですか？
画像スライダーを作成する場合、クロスフェードの使用は最も一般的な効果の1つです。さまざまなスライダーがさまざまな手法を使用して、このような効果を作成します。私がこれまでに見つけた主なテクニックは次のとおりです。
- 方法1：オーバーレイとアンダーレイ
<div>を使用し、互いのvisibilityをフェードインおよびフェードアウトします。 - 方法2：初期化中にスライダーの正確なサイズに一致する
<div>を作成し、そのz-indexプロパティで遊んでから、互いにフェードします。
method-1を使用して、2つの不要で過剰に悪用されたブロック要素を作成する必要があります。最も一般的にはdivです。最初にbackgroundプロパティがunderlayed-divに適用され、次にoverlayed-divがフェードアウトされ、続いてz-indexプロパティが変更されて他のプロパティよりも下に配置されます。
method-2を使用すると、追加のdivが1つだけ作成され、コンテナの背景が変更され、オーバーレイdivがフェードアウトされます。この効果を実装すると、構築できる遷移効果が制限されるようになりました（ただし、これは手元の質問ではありません）。
これがより良いと私が信じる理由は、効果を与えるために常に余分な要素を追加する必要があるからです。このため、nivo-sliderのような効果を作成するには、効果を出すために12〜15以上のdivを作成する必要があります。
要素を作成するために最大数の要素を追加することは正しい方法ではないようです。
他に方法がないので、私が上で述べた方法はそれほど使用されていますか？クロスフェード効果を作成するには、より良い方法が必要です。
だから私の質問は簡単です、この効果を作成するためのより良い方法はありますか？はいの場合、それらは何ですか？
問題の真実は、ウェブはそのために設計されていなかったということです。それは今日の90％のために設計されていませんでした。ハックとWeb開発は密接に関係しています。最善の解決策は、ほとんどの場合、機能するものです。
Webは、すでに存在するもの（HTML5、あなたの場合はソーストンのようなキャンバス）の動的な性質を標準化する方向に進んでいますが、まだ存在しておらず、長くは続かないでしょう。
この効果を作成するためのより良い方法はありますか？はい、ビデオ編集ソフトウェアはあなたがやろうとしていることに対して非常に優れていて簡単でしょう。しかし、あなたは、ビデオに類似したプロパティを持っていても、ビデオではなくWebサイトを作成しようとしているので、実際にはそうではありません。 100％直感的でなくても、機能するものを使用してください。