滋賀 大津 京都 エリアでホームページ作成・WEBデザインをしているカエルズデザインの谷川です。
今回は最近クライアントワークで利用したjQueryプラグインCameraについての使い方備忘録です。
詳細にはまとめておりませんので予めご了承ください。
スライド時のエフェクトが豊富で、レスポンシブにも対応した高機能スライドショーです。
デモ紹介
カエルズデザインのトップページのメインビジュアルにcamera.jsを設置してみました。
このDEMOではanimate.cssをテキスト部分に適用しています。
camera設置方法
プラグインのオフィシャルサイトはこちらです。
camera
このページからはうまくダウンロードできなかったのでこちらよりダウンロードしました。
https://github.com/pixedelic/Camera
記述例はこちら
CSSとJSを設置しましょう。
設置するフォルダ等は任意のものに変更してください。
<link type="text/css" href="css/camera.css" rel="stylesheet" media="all" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.mobile.customized.min.js"></script>
<script src="js/camera.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('#camera_slide').camera();
});
</script>
HTMLはこちら
<div class="demo">
<div class="camera_wrap camera_green_skin" id="camera_slide">
<div data-src="img/demo01.jpg">
<div class="camera_caption">
キャプションを入れることが出来ます。
</div>
</div>
<div data-src="img/demo02.jpg">
<div>
ここには自由にコンテンツを入れてスタイルを適用することもできます。
</div>
</div>
<div data-src="img/demo03.jpg">
<div>
ここには自由にコンテンツを入れてスタイルを適用することもできます。
</div>
</div>
</div>
</div>
オプション
よく使いそうなオプションはこちら
初期値が表記されています。
fx: ‘random’ | ‘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’ エフェクトの数々。複数のエフェクトを組み合わせるにはコンマで ‘simpleFade, scrollRight, scrollBottom’ |
---|---|
height: ‘50%’ | 画像の横幅に対しての割合です。 |
hover: true | ホバー時にアニメーションをストップするかどうか |
navigation: true | ナビゲーションの有無 |
time: 7000 | スライドの間隔。ミリセカンドで設定 |
time: 7000 | スライドの間隔。ミリセカンドで設定 |
全てのオプションはこちらを参照ください。
http://www.pixedelic.com/plugins/camera/