カテゴリ一覧

MARQUEE

流れる文字・ロゴ帯のCSS素材

ページの区切りや、ロゴ・取扱品目の紹介に使える「流れる帯」。JavaScriptは使わず、CSSのアニメーションだけで途切れずに流れます。

8種類

大きな文字が流れる

  • CSSのみ
  • 無限ループ

同じ内容の <ul> を2つ並べて、つなぎ目なく流しています。中身を変えるときは2つとも同じに書き換えてください(2つ目は読み上げ対象外にしてあります)。

逆方向に流れる2段

  • CSSのみ
  • 無限ループ

同じ内容の <ul> を2つ並べて、つなぎ目なく流しています。中身を変えるときは2つとも同じに書き換えてください(2つ目は読み上げ対象外にしてあります)。

斜めに交差するリボン

  • CSSのみ
  • 無限ループ

同じ内容の <ul> を2つ並べて、つなぎ目なく流しています。中身を変えるときは2つとも同じに書き換えてください(2つ目は読み上げ対象外にしてあります)。

ロゴの帯(ホバーで止まる)

  • CSSのみ
  • 無限ループ
  • ホバー

同じ内容の <ul> を2つ並べて、つなぎ目なく流しています。中身を変えるときは2つとも同じに書き換えてください(2つ目は読み上げ対象外にしてあります)。 ロゴ画像を使うときは <li> の中を <img src="logo.png" alt="会社名"> に置き換えてください。

塗りと縁取りが交互に流れる

  • CSSのみ
  • 無限ループ

同じ内容の <ul> を2つ並べて、つなぎ目なく流しています。中身を変えるときは2つとも同じに書き換えてください(2つ目は読み上げ対象外にしてあります)。

縦に流れるお知らせ

  • CSSのみ
  • 無限ループ
  • 縦

同じ内容の <ul> を2つ並べて、つなぎ目なく流しています。中身を変えるときは2つとも同じに書き換えてください(2つ目は読み上げ対象外にしてあります)。

ニュースティッカー

  • CSSのみ
  • 無限ループ

同じ内容の <ul> を2つ並べて、つなぎ目なく流しています。中身を変えるときは2つとも同じに書き換えてください(2つ目は読み上げ対象外にしてあります)。

写真カードが流れる

  • CSSのみ
  • 無限ループ
  • ホバー

同じ内容の <ul> を2つ並べて、つなぎ目なく流しています。中身を変えるときは2つとも同じに書き換えてください(2つ目は読み上げ対象外にしてあります)。 見本は色の面ですが、.cs-mq08__img の中に <img> を入れると写真が全面に表示されます。