私は常にスクロールするテキスト効果を作りたいと思っていましたが、それを実現するには WebGL の使用など、いくつかの方法があります。しかし、それでもこの効果を実現するために HTML と CSS を使用したいと考えています。
何年も前、マーキー タグは Web 上でテキストをスクロールするアニメーション効果を実現するために一般的に使用されていました。 もちろん、多くの学生も同様の効果を実現するために JavaScript を使用していました。
数日前、マスターが純粋な CSS を使用して 3D スクロール テキスト効果を作成しているのを CodePen で見ました。しばらく注意深く観察した後、thenewcode.com でそれが実現するとは思いませんでした。 / にこの事例を紹介する記事がありましたので、今日はこの記事を翻訳して共有します。以下のコンテンツを読み続ける前に、完了する必要があるアニメーション効果を見てみましょう:
翻訳コンテンツはここから始まります。
以下に示すように、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>
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;}
テキスト スクロール (前方クロール)
#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;}
両方のテキストは次のようになります。アニメーション効果を提供します。左側のテキストを開始するには遅延移動時間が必要ですが、この時間はまさに右側のテキストがコーナーに到達する時間です。
@keyframes leftcrawl { to { transform: translateX(-100rem); }}@keyframes rightcrawl { to { transform: translateX(-130rem); }}
レスポンシブ効果
@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 に設定します。こうすることで、ウィンドウが縮小または拡大されても、アニメーションは再生され続けます。
まとめ
この記事は @dudleystorey の「Wrapping Animated 3D Marquee Text with Pure CSS」を元に翻訳したものであり、翻訳内容に誤りや誤りがある場合がございます。同僚や友人に遠慮なくアドバイスを求めてください。この翻訳を転載したい場合は、英語のソースを明記してください: http://thenewcode.com/1096/Wrapping-Animated-3D-Marquee-Text-with-Pure-CSS。
通称「Da Mo」として知られる W3CPlus の創設者で、現在は Taobao.com で働いています。彼は、HTML5、CSS3、Sass などのフロントエンド スクリプト言語について非常に深い理解と豊富な実践経験を持っており、特に CSS3 の研究に注力しており、中国で最初に研究と使用を行った人物の 1 人です。 CSS3テクノロジー。 CSS3、Sass、Drupalの中国人エバンジェリスト。 2014 年に『図解 CSS3: コア技術と事例実践』を出版しました。