リスト化した画像が動かせる!!アニメーションさせるコードを手間なく簡単生成する[liffect]

公開日:  最終更新日:2016/10/15

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

リスト化した画像が動かせる!!アニメーションさせるコードを手間なく簡単生成する[liffect]
画像などを動きをつけて表示したいと思ったことはありませんか?
jQuery(javascript)、CSSなどを使えば実装できると思いますが、ある程度の知識がないとなかなか難しいですよね。

そこで初心者でも使える便利なWebサービスを紹介したいと思います。
実際に使ってみましたが手間なく設定することが出来ました。

スポンサードリンク

リスト化した画像が動かせる!コード生成サービス[liffect]

106-1.png
liffect effect for lists →リンク切れのためリンク削除
http://ademilter.com/lab/liffect/
画像などの要素をアニメーション出来るコードを数クリックするだけで自動生成することが出来るWebサービスになります。24種類とアニメーションも豊富なので好みの動きが見つかると思います。
残念ながらIEでは動作しません

アニメーション(24種類から)を1つ選択

106-2.png
リストからアニメーションを選択すると、その場で動作を確認することが出来ます。

速度、待ち時間などを設定

106-3.png
Duration:
1つの画像に対するアニメーション時間
Delay:
次の画像が動作するまでの待ち時間
Random:
チェックを入れると表示される順番がランダムになります。
(画像の並び順は変わりません、アニメーションされる順番がランダムになるようです)


106-7.png
各ブラウザごとのCSSを指定する部分もありますが、All Prefixにチェックを入れておけば大丈夫かと思います。


106-8.png
Generateボタンをクリック

ソースが自動生成される

HTMLタグ
106-4.png
CSS(スタイルシート)
106-5.png
JAVASCRIPT
106-6.png

サンプルソース

実際に生成したソースを使ったサンプルを紹介します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 
<style>
 
 
--生成されたCSSを貼り付ける--
 
 
↓↓はサンプル用に追記したCSS
ul{
    width:600px;
  margin:0;
 padding:0px;
}
 
ul[data-liffect] li {
    width: 110px;
    float: left;
    margin: 0 .5% .5% 0;
    list-style: none;
    color: #000;
    background-color: #eee;
    overflow: hidden;
}
 
ul[data-liffect] li img {
    display: block;
    width: 100%;
}
</style>
 
<script type="text/javascript" language="javascript">
$(document).ready(function () {
    $("ul[data-liffect] li").each(function (i) {
        $(this).attr("style", "-webkit-animation-delay:" + i * 400 + "ms;"
                + "-moz-animation-delay:" + i * 400 + "ms;"
                + "-o-animation-delay:" + i * 400 + "ms;"
                + "animation-delay:" + i * 400 + "ms;");
        if (i == $("ul[data-liffect] li").size() -1) {
            $("ul[data-liffect]").addClass("play")
        }
    });
});
</script>
 
<ul data-liffect="slideTop">
    <li><img src="画像URL"></li>
    <li><img src="画像URL"></li>
    <li><img src="画像URL"></li>
    <li><img src="画像URL"></li>
    <li><img src="画像URL"></li>
    <li><img src="画像URL"></li>
    <li><img src="画像URL"></li>
    <li><img src="画像URL"></li>
    <li><img src="画像URL"></li>
    <li><img src="画像URL"></li>
</ul>

1行目:jQueryを読み込んでいる部分になります。外部URL参照が不可の環境の場合は、別途jQueryをサーバーにアップして読み込んでください。

3行目から30行目:CSS(スタイルシート)を記述してます。生成されるコードには<style> </style>の記述がないので注意してください。ここに生成されたCSSを貼り付けてください。
また、10行目から19行目サンプルのレイアウトをするためのCSSを生成されたソースとは別に記述してます。

32行目~44行目 生成されるソースには<script> </script>の記述はないので注意してください。

46行目:<ul data-liffect=”slideTop”>の部分が選択するアニメーションによって変わってきます。
必要な数だけ<li></li>を記述します。このサンプルでは<li>の内部には画像しかないですが、リンクやテキストなども記述することが出来ます。

もし、一度設定した内容を変更(違うアニメーション、設定)する場合は
・生成したCSS部分を置き換える
・<javascript></javascript>内を置き換える
・<ul data-liffect=”○○○○”> ○を置き換える
という手順でアニメーションを変更できそうですね。

このサンプルでは1つのファイルにすべてを記述してますが、CSS、JAVASCRIPTなどは外部ファイルにして読み込んでも良いかと思います。

動作サンプル


<li></li>が1つの塊になるので、内側にリンクタグや品名、価格など設定しても良いかもしれませんね。


IEでは動作しませんが、アニメーションしないだけで表示自体はされるので使ってみるのもありかなという感じですね。ソースを生成して必要な部分を置き換えるだけで動きを簡単に設定できるので、ぜひ試してみてください。

スポンサードリンク
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 ↑