走行ラインアニメーションのダウンロード既製。 ティッカーアニメーション
レイアウトと Web 言語を愛する皆さん、こんにちは。 今日の出版のテーマは、当然のことながら「HTML サイトのアニメーション」です。 アニメーションは最近非常に人気があり、初心者の間で最も多くの疑問が生じます。 だからこそ、私はこのトピックに触れて、アニメーション要素が何のために必要なのか、最も頻繁に使用される場所、そしてどのようなツールが使用されるのかについて説明したいと思います。
また、人気があり需要の高いタスクを実装する、具体的なコード例を示すことにしました。 記事を最後まで読むと、ティッカーテープや降雪などのテクニックの実装方法がわかります。 それでは記事の本編に移りましょう！
アニメーションは世界を席巻しました
実際、ほとんどの Web リソースでは、コンテンツ内でアニメーション化されたオブジェクトが使用されています。 最も印象的な例はオンライン ストアで、モデルや製品の上にマウスを置くとスクロールします。
以前は、アニメーションの役割は gif ファイルによって担われていました。 ただし、現在では、要素の移動の大部分はカスケード スタイル シートを使用して行われています。 さらに、既製のソリューションを提供することで Web 開発者の作業を簡素化するライブラリが多数あります。
たとえば、Animate.css ライブラリです。 ライブラリをダウンロードして、次の方法でプログラム コードに接続できます。 < リンク>.
ティッカー
Web サイト上のテキスト コンテンツが水平または垂直に移動したり、画像が移動したりすることに気付いたことがあるかもしれません。 複雑そうに見えますが、実際にはこれを担当する HTML 言語タグは 1 つだけです。 .
これは新しい要素ではなく、html5 とは関係がないことに注意してください。 元々は Internet Explorer 用に作成されましたが、しばらくして他のブラウザでもサポートされるようになりました。
では、どうやってティッカーを作成するのでしょうか? 実際には、ペアになったタグに必要なテキストを入力するだけです。 -そして彼は「逃げる」でしょう。 彼がどのように正確に動くかは別の問題だ。
| 属性 | 説明 |
| 行動 | コンテンツがどのように移動されるかを示します。 代わりの– コンテンツは 2 つの境界の間を移動し、境界で跳ね返ります。 スクロール– オブジェクトは円を描くように動きます（一方の側に現れ、もう一方の側で消えます）。 滑り台– コンテンツが最後まで進み、停止します。 |
| ループ | 記述されたタグの内容が何回繰り返されるかを決定します。 たとえば、-1 は無限に繰り返すために使用されます。 |
| 方向 | 移動方向を設定します。 下– 上端から下に移動します。 左– 右端から左端へ。 上– 下の境界線から上の境界線まで。 右- 左から右へ。 |
| スクロール量 | 現在のオブジェクト位置と次のオブジェクト位置の間のピクセル距離を設定します。 移動速度に影響します。 最初は 6 に等しくなります。 |
| スクロール遅延 | 「実行」速度にも影響しますが、更新頻度が犠牲になります。 遅延をミリ秒単位で設定します。 |
今度は、取得した知識を実際に試してみましょう。 次のティッカーのソフトウェア実装をコード ダイアログ ボックスに貼り付け、ブラウザで実行します。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
ページには 2 つのアニメーションが表示されました。走る (またはむしろジャンプする) 線と疾走する馬です。
冬が近づくと、多くのオンライン リソース所有者はトウヒの枝、休日のおもちゃ、または降る雪で Web サイトを飾ります。 最後の点を扱います。
雪の結晶はさまざまな方法で作成できます。 透明な背景にテンプレートを描画する人もいれば、インターネットからの既製の素材を使用する人もいますし、CSS ツールを利用する人もいます。 私は最後のグループに参加することを決め、スタイルに魔法をかけました。
ご想像のとおり、今回のアニメーションはカスケード スタイル シートの組み込みメカニズムのみによって作成されますが、他のソリューション スクリプトもあります。 また、HTML は使用せず、標準マークアップのみを使用します。
降る雪を作成するには、次のツールを使用する必要があります。
財産 アニメーション(css3仕様に登場) とブロック @キーフレーム.
@キーフレーム特定の時点での Web ページ要素の状態を判断し、要素を移動させるのに役立ちます。 キーワード からオブジェクトの初期位置と単語を設定します。 に- 最後の。
広告の全体像: @キーフレーム名 (から（…）に （…） ）
アニメーションいくつかのパラメータに分割されており、そのうちの 4 つを使用します。
次に例を示します。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
ティッカー アニメーションは通常、かなり大きな画面で使用されます。 これは、小さな画面では調和して見え、すべての注意をそらさないようにグラフィックアニメーションを選択するのが難しいという事実によるものです。 ただし、テキストの移動はさまざまな画面サイズで使用されます。
LED ティッカーはフルカラーまたはモノクロのいずれかにすることができ、これはアニメーションを使用する場合にも非常に重要です。 フルカラー モデルでは制限なく使用できますが、単色の画面では次のことが必要です。
- 1 つの色で構成されるアニメーションを適用します。
- サイズ比率を考慮してください。そうでないと、アニメーションが単にぼやけてしまいます。
単色の画面のティッカー テキストをアニメーション化する場合は、複雑すぎたり、エフェクトを追加したりしないでください。 すべてが同じ色で行われ、単一の明るいスポットに統合される可能性があることに注意してください。
画像を交換するのに便利な形式: gif。画面を操作するときに最もよく使用されます。 忍び寄る線の GIF アニメーションは、単色または複数色にすることができ、最大 256 色を含めることができます。
LED スクリーン エディタでは、静止位置と平行移動の両方で GIF ファイルを作成できます。
- 画像に対する独自の動き。
- 画面上の動きの効果。
この場合、ティッカーのアニメーションは特別なエディタ プログラムを通じて構成され、特別なスクリプトを使用してデザインする必要があります。 既製の形式でダウンロードすることも、デバイスに合わせて開発を注文することもできます。
LED ティッカーのアニメーション
LED スクリーン上の画像のデザインは、それに動きを加えるとさらに面白くなります。 ただし、LED ティッカーのアニメーションと独自のソフトウェア効果を区別する必要があります。 したがって、アニメーション化されたテキストまたは画像を完成した形式で設定プログラムに読み込むことができます。 ファイルには、連続したフレームと、それぞれの表示時間に関する情報が含まれます。
ティッカーをアニメーション化するには 2 つの方法があります。
最初の方法
背景となる画像（例）を開きます。 新しいレイヤーを作成します。 「長方形領域」ツールを使用して、線が走るフィールドとして機能する小さな長方形を選択し、それを何らかの色で塗りつぶします。これは、そこからの可視性が削除されるため問題ありません。
テキストレイヤーを作成します。
テキストレイヤーにレイヤーマスクを追加し、黒で塗りつぶします。 長方形のあるレイヤーにステップし、選択した領域をロードします：「タブ」タブ。 レイヤーマスクの上に置き、選択範囲を白く塗りつぶします。
長方形を含むレイヤーから可視性を削除します。 「ウィンドウ」タブで「タイムライン」を選択し、ストーリーボードを作成します。 最初のフレームで「サイクル表示時間の選択」と「サイクルパラメータの選択」を設定します。 レイヤーマスクからテキストレイヤーのリンクを解除します。 線が見えなくなるように右に移動します。 これにより、レイヤーマスク内で白で強調表示される長方形の領域が作成されます。 移動時に線を同じレベルにするには、「表示」タブの「補助要素」を有効にする必要があります。
2 番目のフレームでは、線が見えなくなるように左に移動します。
ストーリーボードで、Shift キーを押したまま 1 番目と 2 番目のフレームをクリックします。 「中間フレームの作成」アイコンをクリックします。 ダイアログボックスで、中間フレームの数を設定します。
忍び寄る線の最初の方法が得られます。
第二の方法
静的ですが動きを模倣したテキストレイヤーを作成します。
テキストレイヤーを除くすべてのレイヤーの表示をオフにします。 テキストレイヤーからブラシを作成します。
画像のあるレイヤーの上に立ち、「長方形領域」ツールを使用して、忍び寄る線をシミュレートする画像の部分を選択します。 選択した領域をコピーして貼り付けます。
画像フラグメントを含むレイヤーにレイヤーマスクを追加し、黒で塗りつぶします。 レイヤーマスクで、白いテキストレイヤーのブラシを使用してレイヤーを表示します。 画像フラグメントを含むレイヤーの上に新しいレイヤーを作成し、適切な暗い色の柔らかいブラシでペイントします。 画像の断片を含むヘラジカに関連してレイヤーをクリッピング マスクにします。Alt キーを押したまま、レイヤー ウィンドウでレイヤーの境界に沿ってクリックします。
ストーリーボードを作成します。 最初のフレームで、ストライプのあるレイヤーを右に移動します。
2 フレーム目で、ストライプのあるレイヤーを左に移動します。
中間フレームを作成します。
アニメーションを保存し、ティッカーをシミュレートする 2 番目のメソッドを取得します。
