CSSのみで画像を左右に動かす方法!振り子のようにゆらゆらと

公開日:  最終更新日:2016/03/24

この記事のタイトルとURLをコピーする

CSS3のanimationで画像を動かす方法
ページで画像を動かそうとすると、javascriptやjQueryなどを使う必要があると思いがちかもしれませんが、実はCSSだけで動かすこともできます。CSSでのアニメーションについてはまだ対応していないブラウザもありますが、Google Chrome、Safari、FireFoxといったシェアの多いブラウザでは動作するようになっています。

ちょっと気になる動きさせているものを見かけたので実装する方法を調べてみたらCSSのみ実装していたので本日はCSSで画像を動かす方法を紹介したいと思います。

スポンサードリンク

画像を振り子のように動かす方法を調べてみたら、スクリプトなしでCSSのみで実装していた

TinyPngのサイトイメージ
TinyPNG – Compress PNG images while preserving transparency

画像の圧縮が出来るサービスとして有名なTinyPNGにて画像圧縮をしている際に、ふと目に入ったのがこの画像です。

吊り看板がゆらゆら
左右にゆらゆらと振り子のように動いている吊り看板の画像です。実際にページを見てもらったほうが動きはわかりやすいのかなとは思います。

面白い見せ方だなと思いどんな仕組みで動かしているのかソースを確認しながら調べてみました。最初は、jQuery、javascriptなどを使って動かしているのかなーと考えていたのですが、スクリプトなどの記述は見当たりませんでした。

よくよくソースを確認してみると、やはりスクリプトなどは使われておらず、CSS3のアニメーション機能を使っているのがわかりました。CSSのみで画像を動かしています。

サンプルソースがないか調べてみると
(外部サイト)
[CSS]画像をゆらゆらと振り子のようにアニメーションで揺らすスタイルシート | コリスにてサンプルソースが紹介されていましたが、ソースに関する解説はなかったので自分なりに調べてみました。

また、このブログでも過去に紹介したCSSのアニメーション

CSSだけでマウスオーバー時の画像の見せ方色々・アニメーションも出来きてアクセントに使える!!
以前の記事 マウスオーバー時に画像を切り替えるという見せ方について紹介しました。よく見かける方法でアクセントとしても良いで...

の中でCSSで要素を回転させて表示する方法で紹介した「transform:rotate()」が使われています。

上記を参考に動かすサンプルを作成してみました。

コリスさんの紹介されていたソースでは、ピンや吊るしている紐の部分もCSSにて描画していましたが、今回作成してみたサンプルは、用意した元画像に紐、ピンが含まれた状態です。

画像は下記サイトのフリー素材を使わせて頂きました。
木製(木目調)プレートの壁掛け吊り看板フレーム飾り枠イラスト

他にも吊り看板画像を探してたら見つけたので念のため紹介
[フリーイラスト] ツタと木製の吊るし看板 – GATAG|フリー素材集 壱


ここからは、上記のサンプルを実装するためのサンプルソースを紹介します。

サンプルソース

<style>
.swing {
    margin:10px;
    -moz-animation: swing linear 5s infinite;
    -moz-transform-origin: center -30px 0;
    -webkit-animation: swing linear 5s infinite;
    -webkit-transform-origin: center -30px 0;
    -ms-animation: swing linear 5s infinite;
    -ms-transform-origin: center -30px 0;
    -o-animation: swing linear 5s infinite;
    -o-transform-origin:center -30px 0;
    animation: swing linear 5s infinite;
    transform-origin: center -30px 0;
    display: block;
    float:left;
}

@-moz-keyframes swing {
    0% { -moz-transform: rotate(0deg) }
    25% { -moz-transform: rotate(5deg); }
    50% { -moz-transform: rotate(0deg); }
    75% { -moz-transform: rotate(-5deg); }
    100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes swing {
    0% { -webkit-transform: rotate(0deg); }
    25% { -webkit-transform: rotate(5deg); }
    50% { -webkit-transform: rotate(0deg); }
    75% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}    
@-o-keyframes swing {
    0% { -o-transform: rotate(0deg); }
    25% { -o-transform: rotate(5deg); }
    50% { -o-transform: rotate(0deg); }
    75% { -o-transform: rotate(-5deg); }
    100% { -o-transform: rotate(0deg); }
}
@-ms-keyframes swing {
    0% { -ms-transform: rotate(0deg); }
    25% { -ms-transform: rotate(5deg); }
    50% { -ms-transform: rotate(0deg); }
    75% { -ms-transform: rotate(-5deg); }
    100% { -ms-transform: rotate(0deg); }
}
@keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
</style>

<div class="swing"><img src="画像URL"></div>

CSS3のアニメーションを指定して動かしています。

まずは、CSSのアニメーションについて調べてみました。
下記が参考になると思います。
(外部サイト)
animation-CSS3リファレンス

CSSでのアニメーション設定するには、アニメーションさせたい要素にanimationプロパティを設定します。animationはアニメーションのタイミングと長さ等を設定します。

animationプロパティで設定できる内容として何点か記述すると

animation-delay
要素が読み込まれてからアニメーションを開始するまでの遅延時間を設定

animation-direction
アニメーション完了時に逆方向にアニメーションするか、始めの状態にリセットしてアニメーションを繰り返すかを設定

animation-duration
1回のアニメーションサイクルの時間の長さを設定

animation-iteration-count
アニメーションを繰り返す回数を設定、無限に繰り返すにはinfiniteを指定

animation-name
アニメーションのキーフレーム @keyframes の名前を指定

といった内容を指定することができます。
上記プロパティをそれぞれ行を別々に記述することもできますが、記述が長くなるのでスペースで区切りながら1行にまとめています。詳しくは参考サイトで確認してみてください。

このサンプルでは下記の指定にしています。
animation: swing linear 5s infinite;

swing・・・・・アニメーションの名前
linear・・・・進行速度の割合
5s・・・・アニメーションの1サイクル5秒間
infinite・・・・繰り返し実行する


次にtransform-originは回転させる際の原点を指定しています。指定した原点を中心に回転します。使う画像に合わせて調整してみてください。

注意が必要なのはanimationはアニメーションの見た目を指定するものではありません。18行目以降にある@keyframesの指定でアニメーションの見た目を定義する必要があります。

このサンプルでは、下記のように5段階の指定をしています。たとえば、1サイクルを5秒間で指定したとすると
0% { transform: rotate(0deg); } //0秒時点 開始時は角度変更なしの状態
25% { transform: rotate(3deg); } //1.25秒時点 左に傾けた状態
50% { transform: rotate(0deg); } //2.5秒時点 角度変更なしの状態に戻す
75% { transform: rotate(-3deg); } //3.75秒時点 右に傾けた状態
100% { transform: rotate(0deg); } //5秒時点 角度変更なしの状態に戻す

といった感じです。○%部分を行ごと追加することで細かく各タイミングでの指定を区切っていくこともできます。

rotate(0deg)の0degは角度を指定していますので、それぞれのタイミングの時にどの角度の状態にするのかを指定しています。

このサンプルでは回転をアニメーションで表現していますが、色を変えたり、サイズを変えたりアイデア次第ではCSSだけでも色々な動きをつけることができます。javascript、jQueryを使えば同様のことが出来るかもしれませんが、利用する環境やスクリプトによっては動作が重たくなってしまう可能性もあります。

CSS animationに対応していないブラウザもあります。この機能は複数のブラウザで開発中の状態のため各ブラウザで利用するにはベンダー接頭辞が必要な場合があります。サンプルソース内には-moz-、-webkit-といった記述にて同じような記述を繰り返しています。各ブラウザ向けに同じ記述をしています。そのため、記述が長くなってしまいますが同じ内容を記述しています。

-moz- → Firefox向け
-webkit- → Google Chrome、Safari向け
-o- → Opera向け
-ms- → Internet Explorer向け

参考 外部サイト:ベンダープレフィックスについて


別画像での動作サンプル

記述の仕方は同じですが、使う画像、アニメーションの秒数、角度を少し変えています。印象が変わりますね。ワンポイントで目立たせたい時など使えるかもしれません。

CSSに関する他記事

CSSのみでも色々な見せ方があります。下記記事も参考にしてみてください。

CSS マウスオーバー 画像切り替え
マウスオーバー時に画像を切替える。ロールオーバーという言い方をします。バナーや商品画像の上にマウスカーソルが移動した時に違う...

CSSのみでマウスオーバー時に画像を入れ替える方法について紹介しています。

CSSで画像に吹き出しを重ねて目立たせる方法について調べてみた
商品画像やバナーがたくさん並んでいる中で、特定の画像だけ目立たせたいってことありませんか? 色々な方法が考えられるかと思い...

CSSで画像に吹き出しを重ねる方法を紹介しています。

CSSでテキストに蛍光ペンでのマーカー風にする見せ方を実装する方法
テキストを目立たせようと思った時には、色々な方法が考えられます。文字サイズを大きくしたり、文字色を変えたり、フォント自体を変...

テキストに蛍光ペンで線を引いたように見せる方法で目立たせることが出来ます。

ECサイト・ネットショップで使える「css・javascript」まとめてみた
このページでは「ネットショップ運営の気になる備忘録」内で今までに紹介したcss、javascript、jQueryなど動作デモをまとめて掲載して...

CSS、Javascriptについてまとめた記事です。使えそうな仕組みがあればぜひ、活用してみてください。

スポンサードリンク
FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

ヒートマップ分析も出来る無料のアクセス解析

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

ネットショップ運営「おすすめ書籍」


紙媒体より電子書籍(Kindle版)の方がお得です
>>>ネットショップ運営 おすすめ書籍[Kindle版]

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑