JQueryでスライドショーを実現する「deck.js」が素晴らしい件
今、私達は、JQueryのプラグインの「deck.js」を利用していろいろ試しているのですが、このプラグインは、すごく簡単にスライドショーをつくれるので、オススメです！
まずは「deck.js」のご紹介。
このプラグインとJqueryと簡単な記述でスライドショーが作成できます。
サンプルがありますので、見てみてください。うん。結構綺麗ですよね。 スライドショーの中からダウンロードができるようになっています。サンプル
使い方
1) ダウンロードしたファイルを解凍します。
※ 画面中央のダウンロードボタン
2) 解凍をすると、中にinstructionというフォルダがありますので、これを触るとイメージがつきやすいと思います。
3) すごくシンプルにいうと、この中のHTMLファイル一つで動作します。これを修正していきます。
4) スライドを作成していきます。
<section id=”title-slide”>
<h1>111111 →</h1>
</section>
これがすごくシンプルな一スライドです。これを表示させると、このような感じになります。
5) 複数のスライドはこれを連続させるとできます。
<section id=”slide1″>
<h1>111111 →</h1>
</section><section id=”slide2″>
<h1>222222 →</h1>
</section><section id=”slide3″>
<h1>333333 →</h1>
</section>
すごくシンプルな話で、<section>タグで挟まれたところがスライドになります。
6) デザイン等も簡単に変更することができます。
<!– Style theme. More available in /themes/style/ or create your own. –>
<link rel=”stylesheet” href=”./themes/style/swiss.css”>
HTML上部のCSSを変更することで、簡単にデザインを変えることができます。複数用意されているCSSをつかっても構いませんし、自分自身でも変更することができます。
用意されている種類としては、3種類。
●web2.0
●neon
●swiss
7) またスライドの動き方もいろいろ修正できるみたい。
スライドの動かし方も、HTML内のCSSを変更するだけで変更が可能です。すごく便利。
<!– Transition theme. More available in /themes/transition/ or create your own. –>
<link rel=”stylesheet” href=”./themes/transition/horizontal-slide.css”>
8) そんな感じでガチャガチャつくってみた、ホームページがこちら。
「deck.js」は、簡単で、かつ面白いので、是非オススメです！！
ネットの力を、もっとビジネスに
私たちsix1は、インターネットを用いる事で、貴社のビジネスをより加速できると仮定します。
エッジの立った商品を作り、商品をクリエイティブにプロモーションし、商品を地道に改善していく。
このプロセスを徹底することで、ネットの持つパワーによって、ビジネスをより加速化する事ができる、と。
なぜ、そう仮定するのか？ 今現在でも、私たちはインターネットが本来持っているパワーを、
十分に活かせている企業はそんなに多くはないと考えているからです。
私たちSix1は、1997年というインターネットビジネスの黎明期からネットビジネスに関わってきた
二人のビジネスユニットです。
商品企画＆サイトプロデュースを得意とする福田とプロモーション＆マーケティングを得意とする鈴木。
私たち二人のナレッジを、ぜひ、貴社ビジネスにご活用ください。six1 ホームページ