ローリング 3D 字幕を実装するための純粋な CSS_html/css_WEB-ITnose

私は常にスクロールするテキスト効果を作りたいと思っていましたが、それを実現するには WebGL の使用など、いくつかの方法があります。しかし、それでもこの効果を実現するために HTML と CSS を使用したいと考えています。

何年も前、マーキー タグは Web 上でテキストをスクロールするアニメーション効果を実現するために一般的に使用されていました。 もちろん、多くの学生も同様の効果を実現するために JavaScript を使用していました。

数日前、マスターが純粋な CSS を使用して 3D スクロール テキスト効果を作成しているのを CodePen で見ました。しばらく注意深く観察した後、thenewcode.com でそれが実現するとは思いませんでした。 / にこの事例を紹介する記事がありましたので、今日はこの記事を翻訳して共有します。以下のコンテンツを読み続ける前に、完了する必要があるアニメーション効果を見てみましょう:

翻訳コンテンツはここから始まります。

Acute Angles

以下に示すように、div コンテナーには 2 つの div 要素が配置され、これらの 2 つの要素に配置されるコンテンツは同じです。 🎜>

<div id="marquee">    <div>        <span>ONE LOVE ONE HEART</span>    </div>    <div aria-hidden="true">        <span>ONE LOVE ONE HEART</span>    </div></div>

2 番目の要素は最初の要素のコピーで、2 番目の div 要素には aria-hidden="true" の隠し要素が設定されているため、効果ではテキストのみが表示されます。

div#marquee 内の div 要素は、3D 回転を使用して適切な角度を設定し、親要素の遠近値を 0 に設定します。同時に、親要素の font-size も 0 に設定されます。これは主に、内部の inline-block 要素によってスペースが生じないようにするためです。

#marquee {     perspective: 500px;    font-size: 0;}#marquee div {    display: inline-block;     height: 12rem;     width: 30rem;    position: relative;}

3D 関連の知識に初めて触れる場合は、ここをクリックして、関連する知識ポイントについて詳しく学ぶことができます。なお、インラインブロック要素間の空白を解消する方法については、以前にシェアした記事「インラインブロック要素の空白を解消する方法」をご覧ください。

また、transform-origin を使用して内部要素にわずかに異なる角度を設定して曲線にし、さまざまな背景色とテキスト色で照明効果をシミュレートします。

#marquee div:first-of-type {     background: #e5233e;    transform-origin: top right;    transform: rotateY(-40deg);    color: #fff;}#marquee div:last-of-type {    background: #b31e31;    transform-origin: top left;    transform: rotateY(45deg);    color: #f8c9d9;}

基本的なスタイルの美化を追加すると、次の効果が表示されます:

コンテナーを通常の幅の範囲内に保つために、テキスト コンテンツが spam タグ内に配置されます。適切な量​​のテキストを収容するには、オーバーフロー テキストを非表示にできるように、div 要素でオーバーフロー値を非表示に設定する必要があります。

#marquee div {     font-size: 8rem;    overflow: hidden;}#marquee div span {     position: absolute;     width: 400%;        line-height: 1.4;}

この時点での効果は次のとおりです:

テキスト スクロール (前方クロール)

スパン要素は、異なる位置に応じて異なる変位を設定します。右側のテキストは右に 30rem (つまり、div 要素の表示領域の幅) 移動し、左側のテキストは div の表示領域の 2 倍の距離 (つまり、div 要素の表示領域の幅) だけ移動します。つまり、内側の div の幅です)。さらに良くするには、text-shadow を使用してテキストに少し影を追加します。

#marquee div:first-of-type span {    transform: translateX(60rem);    animation: leftcrawl 14s linear infinite;    text-shadow: 4px 0px 4px rgba(0,0,0,0.3);}#marquee div:last-of-type span {    transform: translateX(30rem);    animation: rightcrawl 14s linear infinite;}

親要素 div が overflow:hidden; とテキストの色を設定していない場合、初期効果は次のようになります:

両方のテキストは次のようになります。アニメーション効果を提供します。左側のテキストを開始するには遅延移動時間が必要ですが、この時間はまさに右側のテキストがコーナーに到達する時間です。

@keyframes leftcrawl {    to { transform: translateX(-100rem); }}@keyframes rightcrawl {    to { transform: translateX(-130rem); }}

テキストの動きに均一なモーション効果を持たせるために、ここではリニアアニメーションタイミング関数を使用しています。この時点で、次の効果が見られます。

レスポンシブ効果

ブラウザ画面が狭くなると、上記のコードの効果はあまり良くありません。テキストと角度が小さくなり、字幕が小さくなります。ますます小さくなり、読みにくくなります。したがって、画面幅が 993px 未満の場合は、上記の 3D 効果を 2D 効果に置き換えます。つまり、div 要素を 1 つだけ表示します:

@media all and (max-width: 993px) {  #marquee {    perspective: none;  }  #marquee div:last-of-type {     opacity: 0;     height: 0;  }  #marquee div:first-of-type {    width: 80%;  }}

効果は次のとおりです:

画面を「狭い」に変更してみると、次の Gif アニメーションのような効果が表示されます。

興味深いことに、display:none を使用して要素を非表示にします。 、この時点でアニメーションは完全に停止します。要素が再表示されると再開します。このため、別の手法を使用して要素を非表示にすることができます。つまり、2 番目の div の不透明度と高さの値を 0 に設定します。こうすることで、ウィンドウが縮小または拡大されても、アニメーションは再生され続けます。

まとめ

全体として、その効果には非常に満足しています。もちろん、他の CSS テクノロジーを使用して、より興味深い効果を作成することを楽しみにしています。この記事の有効性に関する限り、いくつかの領域、特に繰り返しのテキスト コンテンツはまだ改善の余地があります。この問題を解決するには、JavaScript を使用して要素とテキスト ノードを簡単にコピーできます。例えば記事冒頭の例では、テキストを入力することで表示内容を変更するエフェクトを設けています。

この記事は @dudleystorey の「Wrapping Animated 3D Marquee Text with Pure CSS」を元に翻訳したものであり、翻訳内容に誤りや誤りがある場合がございます。同僚や友人に遠慮なくアドバイスを求めてください。この翻訳を転載したい場合は、英語のソースを明記してください: http://thenewcode.com/1096/Wrapping-Animated-3D-Marquee-Text-with-Pure-CSS。

Da Mo

通称「Da Mo」として知られる W3CPlus の創設者で、現在は Taobao.com で働いています。彼は、HTML5、CSS3、Sass などのフロントエンド スクリプト言語について非常に深い理解と豊富な実践経験を持っており、特に CSS3 の研究に注力しており、中国で最初に研究と使用を行った人物の 1 人です。 CSS3テクノロジー。 CSS3、Sass、Drupalの中国人エバンジェリスト。 2014 年に『図解 CSS3: コア技術と事例実践』を出版しました。