───解放しろ、全てを。

え…なんで…

え…なんで文字震わせちゃダメなの…?

・・・見づらい…?

うるせえ!!!!!!!ドン!!!!!!!!!!

ど…………どうして震わせちゃダメなの…?

なんで…??

どうして…???

ディスコティック♪

白金ディスコ(偽物語 第四巻/つきひフェニックス(上))

白金ディスコ(偽物語 第四巻/つきひフェニックス(上))

  • 阿良々木月火(井口裕香)
  • アニメ
  • ¥250
  • provided courtesy of iTunes

このブログは、いたるところが震えます。

すごく見辛いので「僕もやりたい!」と言う人はいないとは思いますが、備忘がてら震える文字について残しておきます。

CSSで文字を震わせる方法

どっかからコピペさせてもらった記憶があるんですが、ちょっとググったらこちらのサイトからでした。

CSSだけでブルブル震わせる | q-Az

以下引用です。

.buruburu {
    display: inline-block;
    animation: hurueru .1s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

▲デザインCSSに貼り付け

<span class="buruburu">ブルブル</span>
class 名が「buruburu」の要素を作ります。

震わせたい部分のspanタグにクラス名で指定する

ちょっと改変してる

.buruburu {
    animation: hurueru .1s  infinite
}
.buruburu2 {
    animation: hurueru2 .1s  infinite
}
span.buruburu, span.buruburu2{
    display: inline-block
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) }
    25% {transform: translate(6px, 4px)}
    50% {transform: translate(0px, 0px)}
    75% {transform: translate(6px, -4px)}
    100% {transform: translate(0px, 0px)}
}
@keyframes hurueru2 { /*いらないなら消してくれ。*/
    0% {transform: translate(0px, 0px) }
    25% {transform: translate(12px, 8px)}
    50% {transform: translate(0px, 0px)}
    75% {transform: translate(12px, -8px)}
    100% {transform: translate(0px, 0px)}
}

ちょっと改変しています。

改変箇所
  • 角度の震えをなくした
  • 震えを大げさにした
  • 大げさなのもっと大げさなのの2個作った
  • クラスをpタグに指定した時にalign属性がきちんと動作するようにした

上3つはいいとして、一番下のやつ。

僕はめんどくさがりなので、クラス名の指定を<span>だけじゃなくて<p>でもできるようにしたかったんですよね。spanて文字数多いし(マジか…)

でもそうすると中央揃えが効かなくなったりするので、効くようにしました。

めんどくさがりですまん。

pタグでもちゃんと震えるようにする

文字はtransformプロパティで震わせています。

.buruburu {
    animation: hurueru .1s  infinite
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) }
    25% {transform: translate(6px, 4px)}
    50% {transform: translate(0px, 0px)}
    75% {transform: translate(6px, -4px)}
    100% {transform: translate(0px, 0px)}
}

▲この部分。hurueruという名前でkeyframesを定義し、animationプロパティで呼び出します。クラス名に「buruburu」を持つ要素を全て震わせるぞ!という意気込みを感じますね。

ところが、このtransform<span>のようなインライン要素には効かないんですよね。(<p>には効く)

僕もよくわかっていませんが、html要素は「改行するブロック要素」「改行しないインライン要素」「二人のハーフであるインラインブロック要素」に分けられます。

pタグは改行するのでブロック要素。transfromが効くんですね。

そこで、buruburuをインラインブロック要素にしてしまいましょう………が!!!!!!!

(しょうが?)

ブロック要素の<p>までまとめてインラインブロック要素にしてしまうと、中央揃えにする時に使うalign属性が効かなくなってしまうんですね。他にも色々起こりそうだし。(スタイルがインライン的なものになっちゃうので。)

(うどんに入れたらおいしいね。)

そこで、クラス名がburuburuかつspan要素のみをインラインブロック要素にすることにします。

span.buruburu, span.buruburu2{
    display: inline-block
}

( ^ω^)
≡⊃⊂≡
こうじゃ…

これで、<p>にクラス指定しても<span>にクラス指定してもちゃんとぶるぶる震えるようになりました。やったぜ!!!!!

色んなところで震わせてみよう

応用編です。

タップ・マウスオーバー時だけ震わせる

.buruburu-hover:hover {
    display: inline-block;
    animation: hurueru .1s  infinite
}

:hoverをつけると、マウスオーバーした時だけ震わせる事ができます。

CSSに余計な記述を増やしたくないのでデモはありませんが(えぇ…)、マウスオーバーした時だけ震わせる事ができます(2回目)

hoverをつけると、<span class="buruburu-hover">マウスオーバーした時だけ</span>震わせる事ができます。

▲ブログ編集画面はこんな感じ。クラス名に-hoverがついている点に注意です。

今は完全にマウスオーバーしていないのに震えているように見えますが、本当なんです。すみませんが、そこは僕を信じてもらうしかありません。是非あなたのおブログに導入してみて、あなたの目で確かめてみてください。まあ見づらくなるのでオススメはできませんが。

画像も震わせる

私もニュータイプのはずだ!

モビルスーツ戦の臨場感がすごい。

おわり

ブログは、震える魂の残滓を文字に起こしたものです。

みなさんは、体から溢れる魂の声がちゃんと聞こえてますか?ベジシャワーとかに流されちゃっていませんか?

ふるえるぞハート!燃えつきるほどヒート!!

それでは、良いブルブルライフを。

関連記事 - ハンモックで野宿したらいろんな意味で震えた