月別アーカイブ: 2014年12月

jQuery Camera 画像スライドショー

ここではjQuery 画像スライドショーを簡単に実装するCameraプラグインの紹介をしていきます。

camera

デモはこちら
https://office-goto.info/demo/camera/

ダウンロードはこちら
http://www.pixedelic.com/plugins/camera/

headで読み込み

<link href="camera/css/camera.css" rel="stylesheet" type="text/css">
<script src="camera/scripts/jquery.min.js"></script>
<script src="camera/scripts/jquery.mobile.customized.min.js"></script>
<script src="camera/scripts/jquery.easing.1.3.js"></script>
<script src="camera/scripts/camera.min.js"></script>

パラメーターの設定

jQuery(function(){
    jQuery('.camera_wrap').camera({
        autoAdvance: true,        // スライド
        fx: 'simpleFade',         // エフェクト
        loader: 'none',           // ローダータイプ
        loaderColor: '#eeeeee',   // 色
        loaderBgColor: '#222222', // 背景色
        loaderOpacity: .5,        // 透明度
        loaderStroke: 5,          // ストローク
        navigation: false,        // ←→画像
        pagination: true,         // ページネーション
        playPause: false,         // 再生停止切り替え
        time: 3000                // 画像切り替え秒数
    });
});

body

<div class="camera_wrap">
    <div data-src="images1.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption1</em>
        </div>
    </div>
    <div data-src="images2.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption2</em>
        </div>
    </div>
    <div data-src="images3.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption3</em>
        </div>
    </div>
    <div data-src="images4.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption4</em>
        </div>
    </div>
</div>

画像の読み込みにはdata-src=”images1.jpg”を指定して
キャプションを表示させる際はclass=”camera_caption fadeFromBottom”で囲んでください。

fx
‘random’,’simpleFade’, ‘curtainTopLeft’, ‘curtainTopRight’, ‘curtainBottomLeft’, ‘curtainBottomRight’, ‘curtainSliceLeft’, ‘curtainSliceRight’, ‘blindCurtainTopLeft’, ‘blindCurtainTopRight’, ‘blindCurtainBottomLeft’, ‘blindCurtainBottomRight’, ‘blindCurtainSliceBottom’, ‘blindCurtainSliceTop’, ‘stampede’, ‘mosaic’, ‘mosaicReverse’, ‘mosaicRandom’, ‘mosaicSpiral’, ‘mosaicSpiralReverse’, ‘topLeftBottomRight’, ‘bottomRightTopLeft’, ‘bottomLeftTopRight’, ‘bottomLeftTopRight’, ‘scrollLeft’, ‘scrollRight’, ‘scrollHorz’, ‘scrollBottom’, ‘scrollTop’
沢山のエフェクトがあるのでいろいろ試してみてください。

jQuery snowfallで画面に雪を降らせる

ここでは画面に雪を降らせるjQuery snowfallの紹介をしていきます。

snowfall

デモはこちら
https://office-goto.info/demo/snowfall/

Jquery Snowfall Plugin 1.4をダンロード
http://www.somethinghitme.com/2010/12/09/jquery-snowfall-plugin-1-4/

Jquery Snowfall Plugin 1.6で画像を降らせる場合クリアがうまく動作しなかったので1.4のソースをカスタマイズしていきます。

headで読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="./snowfall.jquery/snowfall.jquery.js"></script>

snowfall.jquery.jsを読み込んでください。

snowfall.jquery.jsの編集

73行目を画像が降らせれるように修正します。

var flakeMarkup = "<img src="" + options.image + "" id="flake-" + this.id;
    flakeMarkup += "" style="width: " + this.size + "px; height: " + this.size + "px;";
    flakeMarkup += "; position: absolute; top: " + this.y + "px; left:" + this.x;
    flakeMarkup += "px; font-size: 0px; z-index: " + options.flakeIndex;
    flakeMarkup += ";" class="snowfall-flakes">";

パラメーターの解説

$(function() {
    $(document).snowfall({
        image      : 'img',      // 画像
        // flakeColor : '#ffffff',  // 画像を使用しない場合色で指定
        flakeCount : 20,         // 数
        flakeIndex : 99999,      // スタイルシートのz-indexの値
        maxSpeed   : 3,          // 最大速度
        minSpeed   : 1,          // 最小速度
        maxSize    : 20,         // 最大サイズ
        minSize    : 2,          // 最小サイズ
        shadow     : true        // 影
    });
});

結構たくさんパラメータをいじれるので、お好みにカスタマイズしてください。

クリア

$(document).snowfall('clear');

flakeCount: 99999などと無理なパラメータを渡すとブラウザがクラッシュしてしまうので気をつけてください。