Web関連

マーキーCSSアニメーション試行錯誤・1 -にゃん歌だとどうなる？-

投稿日: ねこやま猫道

じゃんけんはグーしか出せないのを知っていながらパーは出せませんよね

「猫写真＋短歌＝にゃん歌」をたまに作っています。写真上に縦書きでにゃん歌を載せることが最近は多いのですが、ウェブ上で動くテキストだとどうかなと思いやってみました。というか、推しペン総選挙のマーキーが真似したかっただけです（キッパリ。

●マーキーアニメーション試行錯誤・その1

じゃんけんはグーしか出せないのを知っていながらパーは出せませんよねじゃんけんはグーしか出せないのを知っていながらパーは出せませんよねじゃんけんはグーしか出せないのを知っていながらパーは出せませんよね

じゃんけんはグーしか出せないのを知っていながらパーは出せませんよね

うーん、このような場合は、文字は動かない方がいいですね（苦笑）。三十一文字であることに気づきにくいので、気付いて欲しかったら止めた方がいいかも。

●マーキーアニメーション試行錯誤・その2

（2018/10/16追記：これだと画像がレスポンシブ対応されてないので、追って訂正します）

じゃんけんはグーしか出せないのを知っていながらパーは出せませんよねじゃんけんはグーしか出せないのを知っていながらパーは出せませんよねじゃんけんはグーしか出せないのを知っていながらパーは出せませんよね

 

背景画像の真ん中でテキストを右から左へマーキーさせてみました。なお、だいたい真ん中にするために、.marquee-bk .innerでtopを40%にしています（以下のコードを参照）。こっちはもうちょっと練れば面白くなりそうな気が。試してみて気付いたのは、私は字が大きなマーキーが好きだということでした（笑）。

コードまとめ

切れ目なくテキストを表示させるためには、同じ文字列を複数個用意して複数回マーキーさせるのがポイントのようです。推しペン総選挙の動きを参考にして、ここでは3個同じ文字列を表示させていますが、横幅のサイズと文字列の長さを見て、短文の場合には3個ではなくもっと必要かもしれません。

そして、文字列を3個動かしているので、keyframesでX軸の移動距離を0%だったものを-33.33%移動させます。

なお、spanタグにclass=”fraze”と記述していますが、本来は不要で、spanだけでよいはずです。ワードプレス？（このブログの環境？）の場合に、spanだけだと、ビジュアルモードにするとspanが消されてしまったので、消されないために適当にクラスを設定しました。

その1のCSS

/* マーキー */
.marquee {
  height: 40px;
  overflow: hidden;
  position: relative;
  align-items: center;
  z-index:1;
}

.marquee .inner {
  font-size:20px;
  color:#000;
  display: inline-block;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  -webkit-animation: marquee 7s linear infinite;
          animation: marquee 7s linear infinite;
}

.marquee .inner span .fraze {
  display:inline-block;
  width: 33.333%;
}

.marquee span:before{
  content: "　";
}

その1のHTML

<div class="marquee">
  <div class="inner">
    <span class="fraze">じゃんけんはグーしか出せないのを知っていながらパーは出せませんよね</span>
    <span class="fraze">じゃんけんはグーしか出せないのを知っていながらパーは出せませんよね</span>
    <span class="fraze">じゃんけんはグーしか出せないのを知っていながらパーは出せませんよね</span>
  </div>
</div>

keyframes（その1、その2共通）

@keyframes marquee {
    from {
        -webkit-transform: translate3D(0%, 0, 0);
                transform: translate3D(0%, 0, 0);
    }
    to {
        -webkit-transform: translate3D(-33.33%, 0, 0);
                transform: translate3D(-33.33%, 0, 0);
    }
}

 

その2のCSS

/* マーキー backgroundあり*/
.marquee-bk {
  background: no-repeat url("背景画像ファイルのURL");
  height: 554px; /* 画像サイズの高さと合わせる */
  overflow: hidden;
  position: relative;
  align-items: center;
  z-index:1;
}

.marquee-bk .inner {
  font-size:80px;
  font-weight: 800;
  color:#FFF;
  display: inline-block;
  position: absolute;
  top: 40%;
  overflow: hidden;
  white-space: nowrap;
  -webkit-animation: marquee 7s linear infinite;
  animation: marquee 7s linear infinite;
}

.marquee-bk .inner span .fraze {
  display:inline-block;
  width: 33.333%;
}

.marquee-bk span:before{
  content: "　";
}

その2のHTML（最初のdivのクラスを、背景画像付きのものに変更しただけ）

<div class="marquee-bk">
  <div class="inner">
    <span class="fraze">じゃんけんはグーしか出せないのを知っていながらパーは出せませんよね</span>
    <span class="fraze">じゃんけんはグーしか出せないのを知っていながらパーは出せませんよね</span>
    <span class="fraze">じゃんけんはグーしか出せないのを知っていながらパーは出せませんよね</span>
  </div>
</div>

 

以下に推しペン総選挙について書きました。よろしければどうぞ。

推しペン総選挙サイトの良さはロストテクノロジーにあった