【jQuery】震えながら動く物体を作ってみた（animate）

どうせなら「ヘン」なものを作りたい。
って、思ってしまったんですよ。

ということで、「震えながら亀のごときスピードで動く物体」を作ってみました。

震えながら動く物体

小刻みに震えながらちょっとずつ右に動いていく物体です。

とりあえずこちらをご覧ください。

作品のタイトルは「公式からの供給過多に怯える腐女子」です。

キモ可愛いですね！
作っていてとても楽しかったです。

以下がコードです。

HTML

<div class="item">┌(┌^o^)┐</div>

CSS

.item {
  position:absolute;
  margin:1rem;
  width: 110px;   
  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)}
}

jQuery

$(function(){
    //$('.item').css({left:'0',position:'absolute'});
    setInterval(function(){
        $('.item').animate({left:'+=' + '10' + 'px'},1000);
    },1000);
});

解説すると

・cssの animation で小刻みに震えさせる
・jQueryの animate で１秒ごとに右に動かす

という２つの処理でこの動きを実現しています。

これが役に立つかは分かりませんが、cssのanimation、jQueryのsetInterval、animateなどを学べて個人的には満足でした（＾＾）

参考サイト

jQueryでsetIntervalを使って特定の間隔でfunction処理を繰り返し行う（タイマー処理）方法
CSSだけでブルブル震わせる