【Backstretch】手軽に画像を全画面表示にするjQueryプラグイン
2015.02.11
画像を全画面にするデザインのホームページがお手軽に
- ■ HTML
パララックスほどじゃないけど、 画像を全画面に配置したデザインだったり、 ちょっとした全画面のギャラリーを実装したいときにおすすめのjQueryプラグインが<a href="http://srobbin.com/jquery-plugins/backstretch/" target="_blank">Backstretch</a>です。
設置方法
Backstretchも使用したいページに読み込みます。
画面全体で全画面表示にしたい場合は、
- ■ JavaScript
$.backstretch("path/to/image.jpg");
ブロック要素に適用させたい場合は、
- ■ JavaScript
//.fooは指定したいブロック要素のIDかClassに書きかえる $(".foo").backstretch("path/to/image.jpg");
複数枚の画像を全画面表示で切り替えたい場合は、
- ■ JavaScript
//.fooは指定したいブロック要素のIDかClassに書きかえる //durationは1000が1秒 $(".foo").backstretch([ "path/to/image.jpg", "path/to/image2.jpg", "path/to/image3.jpg" ], {duration: 4000});
基本機能はシンプルで拡張もしやすい
それに全画面表示をブロック要素に適用させることも可能なので、
応用して色々と試せるのも魅力です。
またイベントなども充実しているので、
画像が表示される前後のイベントを取得して機能を付け加えたり、処理を実行させたりもできますね。