スクロールのいろは

スクロールはmarqeeタグを用いて、一時代を築いたようですがこのタグはHTML5やCSS3において、非推奨になっていますのでなるべくならば、使わないに越したことはありません。

そこでjquery.marquee.jsの利用になります。このブログでもCSSで作る全ブラウザ対応marqueeなどにおいてMarqueeWithCSSの名で何べんも取り上げています。

画像やテキストを左右の横、上下の縦スクロールして効果的な表現を可能にしています。

縦横を駆使して円形状にスクロールできないかといろいろ挑戦しましたが無理があるようです。そこでDIVの中に定義したテキストをtransform:rotateを用いて回転して描画する方法を採用しました。

にわかな挑戦のため、スムースな円形スクロールではありません。

参照先は、CSSでロゴを回転させるサンプル | WWW WATCHです。こちらは縦スクロールバーのスクロールに応じてスムースに回転表示される優れものですが、新幹線のガイド案内のように隠れたメッセージをスクロールして表示する例ではありません。

当サンプルにおいても解析が進めば期待した動作が得られるのではないだろうか。

円形状スクロール動作例

ブラウザの再読み込みボタンをクリックし、再実行してください。