CSSだけで無限スクロールを実現する
公開日
2025年1月1日
更新日
2025年1月6日
3
分で読める
CSS3HTML5
この記事では、HTMLとCSSを使用してクールなスクロールアニメーションを作成する方法について説明します。このアニメーション効果は、スキルの表示や文字広告などのシーンに適しています。シンプルなコードで動的な視覚体験を実現し、ウェブページをより魅力的にしましょう。
完成物
実現手順
1. 基本的なHTML構造を定義
各スクロール部分は.containerで構成されており、その内部には2つの<div>子要素が含まれ、テキストがシームレスにスクロールされます。
2. CSSスタイルを設定
主なCSSスタイルには以下が含まれます：
-
overflow: hiddenを使用して、境界を超えたテキストを非表示にします。 -
mask-imageを設定してグラデーション効果を作成し、テキストが端に到達したときにフェードアウトします。 -
@keyframesとanimationを使用して滑らかなスクロールを実現します。
3. スクロール速度を制御
カスタムCSS変数--timeを使用してスクロール速度を設定します。単位は秒です。
4. スクロール方向を調整
スクロールをより自然にするために、2つの子要素のアニメーションには一定の時間オフセットがあります。
まとめ
シンプルなHTMLとCSSコードを使用して、動的なスクロールアニメーション効果を簡単に実現できます。この技術は、スキルタグや広告バナーなどのシーンで使用でき、ページをより魅力的にします。