最近コードをダウンロードしたところ、
<button data-effect="st-effect-4">Slide along</button>
私が理解したところ、「st-effect-4」はclass
名前ですが、これが何のためにあるのか誰か教えてもらえますdata-effect
か?
それは何のためでもありません。
HTML5 では、(ほぼ)すべての要素が必要な「data-*」属性を持つことができ、必要な値を保持できます(文字列のように処理して要素に格納できる限り)。
したがって、それはライブラリの一部である可能性があります。または、次のようなセレクターの誰かの CSS である可能性があります。
button[data-effect] { background : blue; }
button[data-effect="st-effect-4"]:active { background : purple; }
または、JS で、ゲームのコントロール用のクエリ セレクターとして使用されています
。
カスタム データ属性は、ページまたはアプリケーション専用のカスタム データを格納するためのものであり、これ以上適切な属性や要素はありません。
これらの属性は、属性を使用するサイトから独立したソフトウェアによる使用を意図していません。
すべての HTML 要素には、任意の数のカスタム データ属性を任意の値で指定できます。
Mary Lou のチュートリアルでは、メニューを表示するアニメーションを制御します。これは他のトリガー要素に再割り当てできますが、それを有効にするコードは st-trigger-effects の直前にある DIV 要素です。
コードとそれを制御する CSS に目を通すと、それを必要な場所に再割り当てすることができます。
私は現在、大学プロジェクトのブートストラップボイラープレートでこれを使用しています。
ソース: http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/