Transparent Marquee Text

Version 2.0.0.4

はじめに

Javascriptの世界のMarqueeページでは CSSでは無理と書いていましたが、 SVGのマスク機能を使用することによってあのデモを 本当の意味で再現できるようになりました。文字から見えているのは実際に背面に配置されているコンテンツ(今回は背景画像)です。

しかしながら、SVGでは文字幅が取得できないため、文字が消え去るまでの移動量を自動で調整することができず、手動で設定しています。ここを自動で調整するにはJavascriptが必要で、またしてもCSSでは無理となってしまいますので、今回はデモを再現するという部分までとし、将来への課題とさせていただきます。

今回はなんとか背景用画像をレース用自動車にすることができました。

更新履歴

バージョン	更新日付	内容
2.0.0.4	2025/10/16	Transparent Marquee Textを公開 Marquee Version 1.0.3.3からSVG+CSSバージョンに書き直し。

Google Fontsで提供されているOpen Sans、 TekoをWebフォントとして使用しています。
Windows11 Home + Google Chromeで動作検証しています。それ以外の環境、ブラウザでは動作しない可能性があります。ご了承ください。