コンテンツ
Love Lost by CanadaのJam3は、美しく暗く、モバイル対応のインタラクティブな詩であり、失われた愛の周りの永続的な感情についての真の心を持っています。ウェブサイトのレイアウトはHTML5を使用して構築され、GSAPライブラリがアニメーションを強化しています。最も視覚的に印象的な機能の1つは、LoveLostの詩を実際に生き生きとさせるアニメーションの3Dテキストです。
- インタラクティブな3Dタイポグラフィ効果を作成する
それは地獄のように印象的であり、魅力的なユーザーエクスペリエンスを作成するために自分の作品に組み込むことは難しくありません。これがその方法です。
あなた自身の魅力的なサイトを作りたいですか？ウェブサイトビルダーツールを試してみて、適切なウェブホスティングサービスを選択することで物事をスムーズに実行し続けてください。
01.HTMLドキュメントを開始します
最初のステップは、HTMLドキュメントの構造を定義することです。これには、ヘッドセクションとボディセクションを含むドキュメントを開始するHTMLコンテナが含まれます。 headセクションは主に外部CSSファイルをロードするために使用されますが、bodyセクションはステップ2で作成された表示可能なページコンテンツを格納します。
！DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * *ステップ2ここ/ body> / html>
02.目に見えるHTMLコンテンツ
表示されるHTMLコンテンツは、表示されるテキストを含む記事コンテナで構成されます。記事コンテナの重要な部分は「data-animate」属性です。これは、視覚効果を適用するためにCSSによって参照されます。記事内のテキストは、コンテンツがページのメインタイトルであることを示すh1タグから作成されています。
記事データ-animate = "move in"> h1> Hello There！/ h1> / article>
03.CSSの開始
「styles.css」という名前の新しいファイルを作成します。最初の一連の手順では、ページのHTMLコンテナと本文の背景を黒にし、境界線の間隔を表示しないように設定します。白は、ページ上のすべての子要素が継承するデフォルトのテキストの色としても設定されています。コンテンツが見えないように見えるようにするテキストのデフォルトの黒色を回避します。
html、body {背景：＃000;パディング：0;マージン：0;色：#fff; }
04.アニメーションコンテナ
「data-animate」属性で参照されるコンテンツコンテナには、特定のスタイルが適用されています。そのサイズは、vwおよびvh測定単位を使用して画面のフルサイズに一致するように設定され、わずかに回転します。 「moveIn」と呼ばれるアニメーションが適用されます。このアニメーションは20秒間続き、無限に繰り返されます。
[data-animate = "move in"] {位置：相対;幅：100vw;高さ：100vh;不透明度：1;アニメーション：moveIn 20s infinite; text-align：center;変換：rotate（20deg）; }
05.アニメーションの開始
前の手順で参照した「moveIn」アニメーションには、@ keyframesを使用した定義が必要です。アニメーションの0％から始まる最初のフレームは、デフォルトのフォントサイズ、テキストの位置、および表示されるシャドウを設定します。さらに、アイテムは不透明度がゼロに設定されているため、最初は見えません。見えないところに表示されます。
@keyframes moveIn {0％{font-size：1em;左：0;不透明度：0;テキストシャドウ：なし; } * * *ステップ6はこちら}
06.アニメーションで表示
次のフレームは、アニメーションを通じて10％に配置されます。このフレームは不透明度を完全に表示するように設定し、テキストが徐々にアニメーション化されて表示されます。さらに、複数の影が青で追加され、色の値が減少して、テキストに3Dの深さの錯覚を与えます。
10％{不透明度：1;テキストシャドウ：.2em -.2em 4px＃aaa、.4em -.4em 4px＃777、.6em -.6em 4px＃444、.8em -.8em 4px＃111; } * * *ステップ7はこちら
07.アニメーションの完成
最終フレームは80％で、アニメーションの最後に発生します。これらは、フォントサイズを大きくし、要素を左に移動する役割を果たします。テキストシャドウがアニメーション化するための新しい設定も適用され、フレームから80％から100％までテキストがフェードアウトします。
80％{font-size：8em;左：-8em;不透明度：1; } 100％{font-size：10em;左：-10em;不透明度：0;テキストシャドウ：.02em -.02em 4px＃aaa、.04em -.04em 4px＃777、.06em -.06em 4px＃444、.08em -.08em 4px＃111; } * * *
注：どのプロジェクトに着手する場合でも、対応できるクラウドストレージを用意することが不可欠です（ガイドが役立ちます）。
この記事は、もともとクリエイティブなウェブデザイン雑誌WebDesignerの273号に掲載されました。 ここで273号を購入 または ここでWebDesignerを購読します.
