動く顔文字や画像スライドで、パラパラ漫画風アニメーション

顔文字や画像を複数並べ、それが順番に切り替わる方法です。当サイト作者が作成したcustomtemplate と customtemplate-3c (ver1.5.0)についてです。

デモ

  1. ヾ(=^▽^=)ノヽ(=´▽`=)ノ o(*^▽^*)o~♪

  2. |ω・`)チラ・`)`)`)・`)

  3. 顔文字や画像だけでなく、ただの文字ではこんなうごきです。

使い方

  1. spanにクラスaniをつけ、その子要素の各spanが1コマです。

    <span class="ani">
    <span>ヾ(=^▽^=)ノ</span>
    <span>ヽ(=´▽`=)ノ</span>
    <span> o(*^▽^*)o~♪</span>
    </span>
  2. クラスani-sなら切り替わりが遅くこんなかんじです、クラスani-fなら切り替わりが速いこんなかんじです

  3. コマ数は特に制限ありません。10コマなら次のとおりです。数字が切り替わるだけです→

  4. 画像も同じで、spanが1コマです。
    e8e1e10

    <span class="ani-s">
    <span><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/entry-8s.jpg" width="100" height="100" alt="e8" /></span>
    <span><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/entry-1s.jpg" width="100" height="100" alt="e1" /></span>
    <span><img src="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/entry-10s.jpg" width="100" height="100" alt="e10" /></span>
    </span>

備考

  1. 使いすぎると見苦しいかもしれません。

  2. 1ページあたり1~2ヶ所程度のアクセントとしていいかもしれません。

今後のテンプレート改訂時には

  1. 上記説明と相違があるかもしれません。ご了承願います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)