【ブログデザイン】セリフを話すアイコンを、アニメーションで動かしたい　#CSS #カスタマイズ

1日1優🌈。ポチっ、が支えです🌞🌱
小さなひとこと、お待ちしてます(≧◡≦)❤️🌸
読者登録もいただけますとうれしいです～🌟

class「r-fuki piyo」のなぞ
捜査は難航
事件の全貌
気を取りなおして
ここで問題が
強引に解決
今回のコード
1. HTML
2. CSS

こんばんは、暑さもすこし、和らぎましたね。
けさの北朝鮮ミサイル発射！テロップはなかなか怖かったです…

class「r-fuki piyo」のなぞ

表題の通り、わたしは上のキャラをアニメーションで動かしたい！と思いつきました。

さいきん、というかほぼ4年まえの一時期しか登場していなかった、このセリフ入りのアイコン。

そもそもどうやって設定していたのかまったく覚えておらず(ノ∀`)ﾀﾊｰ、右クリックなどで画像を開くこともできず

編集見たまま　では何も映らず、、HTMLにしてこの魔法のことばを入れ、プレビューするとアイコンと吹きだしが出現するのです

<p class="r-fuki piyo">ここにセリフを入れる </p>

ここにセリフを入れる

しかたないのでこのセリフつきアイコンのやり方から調べることに

捜査は難航

classを指定しているので、デザインcssあたりがあやしい！と、コードを全コピし、「r-fuki piyo」を検索してみました。

しかし、見当たらず…

記事下、フッタなどほかの場所もさがしてみましたがなぜか見つかりません。

しかし、わたしはある重大なミスを犯していたのです…

事件の全貌

逃亡犯はあるアジトに雲がくれしていたのです。

そこは、

www.halu7.com

はるなぴログさんのこの記事を参考に、かつてわたし自身がDropbox共有へcssファイルを置いていたのでした… *1

こんなトラップを…

過去のわたしの行動に、わたし自身、おどろきと戸惑いを隠せませんでした。

過去は、決してそのままにしておけないのです。あなたも昨日とは違う人間なのです。－Katherine Anne Porter

気を取りなおして

というわけで、まずアイコンだけ切り離して、アニメーションの設定にチャレンジしようと思います。

セリフ付きアイコンの魔法については、こちらの「まつたろうさん」の記事を参考になさってください。

matsutarouu.hatenablog.com

いつもどおり自分ではなにも出来ませんので( ˊᵕˋ ;)、お知恵をお借りします。

このとおり動かせたらちょっと可愛いな、と思いました。↷

【コピペでOK】イメージ別！サイトをリッチに見せるためのCSSアニメーションまとめ【デモ・サンプルコード付き】 – 東京のホームページ制作 / WEB制作会社 BRISK

跳ねてほしい！

…やりました？！ちょっと思い通りではないですが…。

もさーっと、跳ねてますねｗ。あとはぷるん、という動きをいちおう。してます～

でも楽しいので、いろいろな画像にやってみたくなる。

20190723150026 20190809002004

セリフを足してみます。HTML編集で下記のコードを書いて、

<p class="r-fuki piyo">ここにセリフを入れる</p>

class=のところにアニメーションを付与するクラス名を追加します。

ここで問題が。

ぴよこ単体ではなく吹きだしごと一緒に揺れてしまいます… ＿ﾉフ○ ｸﾞｯﾀﾘ

これはこれでちょっといいかも？ですがｗ。

こんばんは、暑さもすこし、和らぎましたね。
けさの北朝鮮ミサイル発射！テロップはなかなか怖かったです…

右からしつれい

強引に解決

吹きだしとアイコンのうごきは切り離せないようなので、吹きだしのアイコンを非表示にして、アイコンは別要素としてよこに置くようにしました。
画像位置をcssのmarginなど調整しています(^^;)

たぶん、レイアウトがずれるとぴよこと窓枠がずれてしまうおそれもありますが、ブラウザとスマホでとりあえず確認したところ、なんとか定位置におさまっていますｗ。きっともっといいやり方があるのでしょうね…
きょうはこれくらいにして。また勉強します～

私たちの行動は遠くから一緒に旅をしてきます。そして、私たちが過去にしたことが私たちを形作ります。－George Eliot

こんばんは、暑さもすこし、和らぎましたね。
けさの北朝鮮ミサイル発射！テロップはなかなか怖かったです…

右からしつれい

今回のコード

です、いちおう…公開しておきます～

HTML

（吹き出しは、さきほど紹介したまつたろうさんのブログを参考に）

ここをクリックでコードが開閉

<p>
  <!--- classには設定したCSSアニメーションのクラス名を入れる --->
  <imgclass="poyoyon3" src="画像のURL（はてなフォトライフなど）">
</p>

<p class="r-fuki">  <!--- 吹きだしに設定したクラス名 --->
  吹きだしに入れたいセリフ 
  （例）こんばんは、暑さもすこし、和らぎましたね。<br>
  けさの北朝鮮ミサイル発射！テロップはなかなか怖かったです…
</p>>

CSS

（アニメーションはぽよよん３・２、アップダウン、ぷるん）

ぽよよんが３と２？ぷるんとどう違う？といろいろツッコミが入りそうですが、今回はそっち系の動きがさせたくて似たようなパターンを量産するハメとなりました…。

アイコンを吹き出し位置に調整

ここをクリックでコードが開閉

/* アイコン位置 */
.poyoyon3, src {
  margin: 0 0 -150px 35px;
} 
.upDown, src {
  margin: 0 0 0 586px; 
}

CSSアニメーションの設定

ポヨヨン３

ここをクリックでコードが開閉

/* ポヨヨン３ */
.poyoyon3 {
  animation: poyoyon3 2.5s infinite;
  opacity: 1;
}

@keyframes poyoyon3 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}

ポヨヨン２

ここをクリックでコードが開閉

/* ポヨヨン２ */
.poyoyon2 {
  -webkit-animation: poyoyon2 0.8s linear 0s 1;
  animation: poyoyon2 3.5s infinite;
}

@keyframes poyoyon2 {
  1000% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  1.5% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  3.0% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  5.0% {
    transform: scale(0.98, 1.05) translate(0, -8px);
  }
  7.0% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  10.0% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 10.0% {
    opacity: 1;
  }
}

アップダウン

ここをクリックでコードが開閉

/* アップダウン */
.upDown {
  margin-top: -50px;
  animation: upDown 2s infinite;
}

@keyframes upDown {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}

ぷるん

ここをクリックでコードが開閉

/* ぷるん */
.purun {
  -webkit-animation: purun 0.8s linear 0s 1;
  animation: purun 3.5s infinite;
}

@-webkit-keyframes purun {
  600% {
    -webkit-transform: scale(1.0, 1.0) translate(0%, 0%);
  }
  1.5% {
    -webkit-transform: scale(0.9, 0.9) translate(0%, 5%);
  }
  3.0% {
    -webkit-transform: scale(1.3, 0.8) translate(0%, 10%);
  }
  5.0% {
    -webからkit-transform: scale(0.8, 1.3) translate(0%, -10%);
  }
  7.0% {
    -webkit-transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  10.0% {
    -webkit-transform: scale(1.0, 1.0) translate(0%, 0%);
  }
}