え…なんで…
え…なんで文字震わせちゃダメなの…？
・・・見づらい…？
うるせえ！！！！！！！ドン！！！！！！！！！！
ど…………どうして震わせちゃダメなの…？
なんで…？？
どうして…？？？
ディスコティック♪
- provided courtesy of iTunes
このブログは、いたるところが震えます。
すごく見辛いので「僕もやりたい！」と言う人はいないとは思いますが、備忘がてら震える文字について残しておきます。
CSSで文字を震わせる方法
どっかからコピペさせてもらった記憶があるんですが、ちょっとググったらこちらのサイトからでした。
以下引用です。
.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がついている点に注意です。
今は完全にマウスオーバーしていないのに震えているように見えますが、本当なんです。すみませんが、そこは僕を信じてもらうしかありません。是非あなたのおブログに導入してみて、あなたの目で確かめてみてください。まあ見づらくなるのでオススメはできませんが。
画像も震わせる
私もニュータイプのはずだ！
モビルスーツ戦の臨場感がすごい。
おわり
ブログは、震える魂の残滓を文字に起こしたものです。
みなさんは、体から溢れる魂の声がちゃんと聞こえてますか？ベジシャワーとかに流されちゃっていませんか？
ふるえるぞハート！燃えつきるほどヒート！！
それでは、良いブルブルライフを。
