0

文字をテロップのように流すマーキーをCSSで実装する!

文字をテロップのように流すマーキーをCSSで実装する!

近年、見かけることも少なくなった「marquee(マーキー)」ですが、元々はIEの独自機能でもあったため、HTMLでは非推奨とされ消えていきました。

そんな「marquee」のテロップ的動きをコンテンツに組み込みたいな~と考えたとき、CSSだけでなんちゃってマーキーが表現できるので、どうしてもって時は“アリ”かもしれません。

まずはサンプルをご用意しましたので確認してみてください。




デモサンプル

それでは記述方法を見ていきましょう。

HTML記述

テキストの上に画像を配置していますが、なくても構いません。

CSS記述

スクロール速度は「animation-duration:12s;」の「12s」のところで「速度」というよりも「どれくらい時間をかけて○○をする」という指定の仕方をしています。単純に秒数を小さくすれば早く、大きくすれば遅くなりますので調整してみてください。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > 文字をテロップのように流すマーキーをCSSで実装する!