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

2017年3月1日

とっつぁん

この記事は 5 分くらいで読めると思います

あとで読む

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

THIS IS MARQUEE ANIMATION

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

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

とりあえずデモ↓

DEMO

marquee

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

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

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

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

html

<div class="mgr_wrap">
    <div class="mgr">
        <ul>
            <li><a href="#"><img src="img/01.png" /></a></li>
            <li><a href="#"><img src="img/02.png" /></a></li>
            <li><img src="img/03.png" /></li>
            <li><a href="#"><img src="img/04.png" /></a></li>
        </ul>
        <a href="/illustration/" target="_blank"><img class="mgr_logo" src="img/logo.png" /></a>
        </div>
</div>

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

css

.mgr_wrap {
    background :url(../img/bg.jpg) center top no-repeat;
    -moz-background-size:100% auto;
    background-size:100% auto;position: relative;
    position: relative;
    width: 100%;
    height: auto;
}

.mgr_wrap:before {
    content: "";
    display: block;
    padding-top: 20%; /*背景画像の比率を入力（レスポンシブ指定）*/
}

.mgr {
    overflow:hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
}

.mgr_logo {
    position :absolute;
    top :0;
    left :0;
    width :32%;
}

.mgr ul {
    height :100%;
    padding-left :100%;
    display:inline-block;
    white-space:nowrap;
	-webkit-animation-name:mgr;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:mgr;
	-moz-animation-timing-function:linear;
	-moz-animation-duration:10s;
	-moz-animation-iteration-count:infinite;
	-ms-animation-name:mgr;
	-ms-animation-timing-function:linear;
	-ms-animation-duration:10s;
	-ms-animation-iteration-count:infinite;
	-o-animation-name:mgr;
	-o-animation-timing-function:linear;
	-o-animation-duration:10s;
	-o-animation-iteration-count:infinite;
	animation-name:mgr;
	animation-timing-function:linear;
	animation-duration:10s;
	animation-iteration-count:infinite;
}

.mgr ul li {
    display :inline;
    height :100%;
}

.mgr ul li img {
    height :100%;
}

@-webkit-keyframes mgr {
    from   { -webkit-transform: translate(0%);}
    99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes mgr {
    from   { -moz-transform: translate(0%);}
    99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes mgr {
    from   { -ms-transform: translate(0%);}
    99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes mgr {
    from   { -o-transform: translate(0%);}
    99%,to { -o-transform: translate(-100%);}
}
@keyframes mgr {
    from   { transform: translate(0%);}
    99%,to { transform: translate(-100%);}
}

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