CSS3アニメーションを使った高度な「マーキー」の作成
今日は見てみるつもりです “マーキー” もう一度。我々は実際にそれについての話をした前回の記事でそれについてカバーしてきました。 -ウェブキットマーキー しかし、今回はこの話題をもう少し詳しく説明します。.
この記事では、 マーキー風 CSS3アニメーションを使用した効果。そのようにして私たちは、それだけでは達成できなかったより多くの機能を追加することができるでしょう。 -ウェブキットマーキー.
CSS3 Animationモジュールに慣れていない限り、このドキュメントを読む前に次の参考文献を見ておくことをお勧めします。
- CSS3アニメーション - W3School
- CSSアニメーション - Mozilla Dev。ネットワーク
また、現時点では、CSS3アニメーションはFirefox 8以降、Chrome 12以降、およびSafari 5.0以降のバージョンでのみ動作します。-モズ- そして -ウェブキット-）ただし、余分なコードでこの記事を読み過ぎないようにするために、プレフィックスを付けずにW3Cの公式バージョンのみを使用します。.
マーキー問題への取り組み
マーキーの問題の1つはテキストが絶えず動いているということです。この振る舞いは読むのを邪魔します、そしてテキストも読むのが難しいです。今回は、独自のバージョンのマーキーを作成し、よりユーザーフレンドリーにすることを目指します。例えば;テキストを連続的に移動させる代わりに, 完全に見えるようになったら停止しますので、ユーザーはしばらくテキストを読むことができます.
ストーリーボード（の種類）
ロゴ、イラスト、Webサイトなどのクリエイティブやデザインの作成は、通常スケッチで始まります。アニメーション制作の分野では、これはストーリーボードを使って行われます。コーディングを始める前に、まず最初に 絵コンテのようなもの, アニメーションを視覚化するために.
上の絵コンテからわかるように、2行のテキストだけを表示することを計画しています。両方とも右から左に順次移動します。.
ストーリーボードは実際のアニメーション映画のストーリーボードほど複雑ではありませんが、要点は次のとおりです。マーキーがどのように見えるかを視覚化できるようになりました。.
HTMLマークアップ
私たちのアニメーションは単純になるでしょうから、HTMLマークアップも同様に単純になるでしょう：
プラグインなしでWordPress関連の投稿を追加する方法
アクションを使ってDropboxファイルを自動化する
基本スタイル
アニメーションの問題を回避する前に、基本的なスタイルをいくつか追加しましょう。背景テクスチャを追加することから始めましょう。 html 素子.
html background：url（ '…/images/skewed_print.png'）;
次に、マーキーをブラウザウィンドウの中央に配置し、内側の影、背景色、枠線などの詳細を追加します。.
.マーキー幅：500ピクセル;高さ：50ピクセル。マージン：25px auto。オーバーフロー：隠れています。位置：相対;ボーダー：1pxソリッド＃000。マージン：25px auto。背景色：＃222。 -webkit-border-radius：5ピクセル。 border-radius：5ピクセル。 -webkit-box-shadow：インセット0px 2px 2px rgba（0、0、0、.5）、0px 1px 0px rgba（250、250、250、.2）。ボックスシャドウ：インセット0px 2px 2px rgba（0、0、0、.5）、0px 1px 0px rgba（250、250、250、.2）。
次に、テキスト（この場合は段落タグ内にラップされています）を絶対に配置します。 絶対の positionは要素を折りたたみます、幅の要素を次のように定義する必要があります。 100％ 親の幅をカバーするように.
.マーキーp 位置：絶対;フォントファミリー：Tahoma、Arial、sans-serif。幅：100％。身長：100％。マージン：0。行の高さ：50ピクセル。 text-align：center。色：#fff; text-shadow：1px 1px 0px＃000000;フィルター：ドロップシャドウ（色=＃000000、オフx = 1、オフy = 1）。
しばらく結果を見てみましょう.
この時点で、必要な基本的なスタイルはすべて完成しました。もっと自由にスタイルを追加したり、パーソナライズしたりすることができます。ただし、チュートリアルの最後まで、指定したマーキーの寸法（高さと幅）をそのまま使用することをお勧めします。.
アニメーション
要するに、アニメーションは動いている物体の表現です。各動きは時間枠で定義されます。ですから、私たちがアニメーションに取り組んでいるとき、私たちは主に 時間. 次のような事項を考慮に入れます。
- オブジェクトはいつ動き始めますか?
- オブジェクトがある点から別の点に移動するのにかかる時間?
- いつ、どのくらいの期間オブジェクトを特定のポイントに留めるべきですか?
CSS3アニメーションでは、 時間 で定義することができます @keyframe 構文。しかし、このセクションに入る前に、まずマーキーテキストの開始位置を指定しましょう。.
テキストは右から始まり、次に右に移動するように計画しています。そこで、ここではまずCSS3 Transformationプロパティを使って右に配置します。.
.マーキーp 変換：変換X（100％）;
覚えて、 100％ 段落要素がその親と等しいことを定義した 幅. だから、同じことがここでも適用されます。段落要素は 翻訳した 右に 100％ この例では 500px.
キーフレーム
の @keyframe 構文は一部の人にとっては少し戸惑うかもしれませんので、ここで私たちはあなたが簡単に何が起こっているのか理解するのを助けるために簡単な視覚ガイドを作成しました @keyframe 構文.
拡大版を見るにはここをクリック.
アニメーション全体は約続く 20秒 そして、続く2つのシーケンスに分割されます 10秒 各.
最初のシーケンスでは、最初のテキストはすぐに右からスライドインして表示されたままになり、ユーザーはテキストを読むことができますが、2番目のテキストは非表示のままになります。 2番目のシーケンスでは、最初のマーキーテキストは左にスライドアウトし、2番目のテキストはすぐに右からスライドインします。.
アニメーションを実行するために適用する必要があるすべてのキーフレームコードは次のとおりです。.
@keyframes left-one 0％変換：変換X（100％）; 10％transform：translateX（0）; 40％transform：translateX（0）; 50％transform：translateX（-100％）; 100％transform：translateX（-100％）; @keyframes left-two 0％transform：translateX（100％）; 50％変換：translateX（100％）; 60％transform：translateX（0）; 90％transform：translateX（0）; 100％transform：translateX（-100％）;
の 左1 キーフレームはアニメーションの最初のシーケンスを定義します。 左2 キーフレームは2番目のシーケンスを定義します.
要素にアニメーションを適用する
アニメーションが機能するためには、アニメーションを要素に適用することを忘れないでください。最初のテキスト、またはこの場合は最初の段落に2番目のシーケンスが適用され、2番目の段落にも2番目のシーケンスが適用されます。.
.マーキーp：nth-子（1）アニメーション：左1の20代は無限大。 .marquee p：nth-child（2）animation：left-two 20sは無限を楽にする。
私たちはみんなアニメーションでできています。ブラウザで結果を見てみましょう.
- デモ
- ソースをダウンロード
ボーナス
前の記事で行ったように、マーキーテキストを上から下、またはその逆に移動するように定義することもできます。これを行う方法は次のとおりです。上記のアニメーションコードを以下のものに置き換えます。 テキストを下に移動：
.マーキーp 変換：変換Y（-100％）; @keyframes down-one 0％transform：translateY（-100％）; 10％transform：translateY（0）; 40％transform：translateY（0）; 50％transform：translateY（100％）; 100％transform：translateY（100％）; @keyframes down-two 0％transform：translateY（-100％）; 50％変換：変換Y（-100％）; 60％transform：translateY（0）; 90％transform：translateY（0）; 100％transform：translateY（100％）;
変更したことに注意してください。 X軸 に Y軸 そしてすべてを裏返す 翻訳 負の値から正の値、またはその逆.
私達はまたあります アニメーションの名前を変更 に ダウンワン そして ダウンツー, そのため、段落要素でもAnimation名を再適用する必要があります。.
.マーキーp：nth-子（1）（アニメーション：ダウンワン20代は無限に楽。 .marquee p：nth-child（2）animation：20秒下がると無限になります。
それ以外の場合は、反対に移動したい場合。 下から上へ. あなたが適用する必要があるすべてのコードはここにあります：
.marquee.up p transform：translateY（100％）; .marquee.up p：nth-child（1）animation：アップワン20代は無限大。 marque.up p：nth-child（2）animation：最大20秒は無限大。 @keyframes up-one 0％transform：translateY（100％）; 10％transform：translateY（0）; 40％transform：translateY（0）; 50％変換：変換Y（-100％）; 100％transform：translateY（-100％）; @ keyframes up-two 0％transform：translateY（100％）; 50％transform：translateY（100％）; 60％transform：translateY（0）; 90％transform：translateY（0）; 100％transform：translateY（-100％）;
- デモ
- ソースをダウンロード
結論
現在のブラウザサポートがないにもかかわらず、CSS3 Animationは、正しく実行されれば、この例で行ったように、将来的に多くのユーザビリティの問題を確実に解決するでしょう。現代のブラウザを対象とした短いアニメーションだけが必要な場合は、CSS 3 Animationを使用するほうが、jQueryスクリプトをロードするよりもおそらく優れています。.
最後に、私達はこの記事が何人かの人々のために少し圧倒的かもしれないことを知っています、従ってこの記事に関して何か質問があれば、下のコメント欄にそれを投稿してください。.
