jqueryは使わないmarqueeを使ったヘッダーアニメーション

css3のmarqueeを使用して動くメニューを作る

THIS IS MARQUEE ANIMATION

THIS IS MARQUEE ANIMATION

jqueryを使わずにナビゲーションが流れて行く簡単なヘッダーアニメーションを作成してみました。

htmlとcssのコピペで実装できます。

とりあえずデモ↓

DEMO

marquee

マーキーという過去の遺物をご存知でしょうか?

もう何十年も前にホームページでJKがプロフィールなんか書いてるような時代に多く見かけた

流れてくる文字の事なんですが、多分若い子は知らないだろうな…

今回はそんなmarqueeをCSSで指定してナビゲーションを動かしています。

 

html

  • マーキーの部分はul。
  • ulの下にロゴがあります。
  • 親要素のdivで背景をレスポンシブ対応させています。

css

背景画像の縦横比は.mgr_wrap:beforeのpadding-topの比率を編集する必要があります。

 

おまけ(マーキーって何?)

あーたむ

あーたむマーキーって何?マッキ―の親戚?

とっつぁん

とっつぁん電光掲示板みたいに流れてくる文字の事だよ
<MARQUEE>ってタグで文字を囲んだら簡単に実装できるでござる

あーたむ

あーたむそうなんだー
でもあんまりそういうの見ないよね

とっつぁん

とっつぁん昔は流行ってたんだけどね
動く文字は一旦見逃したら待たないと見れないので
ユーザビリティが悪いって事でだんだん廃れて行ったね

あーたむ

あーたむえっ!じゃあこの記事のヤツもユーザビなんとかが悪いんじゃ?

とっつぁん

とっつぁんもうね、グローバルナビゲーションが動くとかマジ最悪だと思うね!

あーたむ

あーたむおいぃぃぃっ!

とっつぁん

とっつぁんいや、まぁどうせカルーセルとかスライダーとか実装するなら
こういうのもアリなんじゃね?って事で…

コメントを残す

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