JavaScript | 株式会社エレクアライズ|東京立川|楽天ネットショップ制作・ホームページ制作

JavaScript プラグイン紹介 #2

2016年8月5日 JavaScript by 藤巻大晶

こんにちはマッキーです。

前回に引き続きJavaScriptプラグイン紹介第二弾です。

今回は写真の周囲の背景色を写真に応じて変更する面白い動作をするjQueryプラグイン「jquery.adaptive-backgrounds.js」のご紹介です。
どんな感じかイメージしずらいと思うので、まず下の写真をご覧ください。

写真の左右に色がついていますが、これはプラグインが写真の色に応じて自動的に背景色を追加しています。

とても簡単に使えますので早速、使用例を見てみましょう。

<!----------JavaScript---------->

<!--jQueryの読み込み(googleから読み込むので下記のURLのままで動きます)-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<!--jquery.adaprive-backgrounds.jsの読み込み(設置したURLに変更して下さい)-->
<script src="./jquery.adaptive-backgrounds.js"></script>

<!--背景色を設定する(下記のままで動きます)-->
<script>
$(document).ready(function(){
  $.adaptiveBackground.run();
});
</script>

<!----------HTML---------->

<!--img要素に「data-daptive-background」と書くだけで囲んでるdivに背景色が！-->
<div style="width:100%;"><img src="画像URL" style="max-width:80%" data-adaptive-background /></div>

プラグインを読み込んで「背景色を設定する(下記のままで動きます)」の下４行をコピペし、img要素に「data-daptive-background」と書くだけで囲んでる要素に色が付きます。

構造がシンプルでCSSや他のプラグインなどの効果とも組み合わせしやすいので、大きなイラストや写真の見せ方に一ひねり加えられそうですね。

プラグインのダウンロードやより高度な使い方は下記のリンクを参考にして下さい。

ダウンロード　プラグイン開発ページ

それではまた、近いうちにお会いしましょう。

JavaScript プラグイン紹介 #1

2016年7月15日 JavaScript, Web, 未分類 2 by 藤巻大晶

初めまして。制作担当のマッキーです。

このブログでは様々なJavaScriptプラグイン、ライブラリについてご紹介していきたいと思います。
HTMLやCSSは何となくわかるけどJavaScriptはよくわからないよという方でも簡単に導入できるものを多く紹介しようと思います。

まず第1回目はレスポンシブのカード型レイアウトを簡単に実現できる「Minigrid.js」です。 jQuery等の他のライブラリに依存していない軽量なライブラリです。
さっそく使用例を紹介します。

<!--HTML-->
<div class="cards">
<div class="card"> 1
</div>
<div class="card"> 2
</div>
<div class="card"> 3
</div>
<div class="card"> 4
</div>
<div class="card"> 5
</div>
</div>
<!--HTML-->

<!--JavaScript-->
<script src="https://npmcdn.com/minigrid@3.0.3/dist/minigrid.min.js">
</script>
<script>
//< ![CDATA[
(function() {
var grid; //ページが読み込まれる時に行われる処理
function init() {
grid = new Minigrid({
container: '.cards',//←ここで外側のdivのクラス名を設定(例の場合だとcards)
item: '.card', //←ここで内側のdivのクラス名を設定(例の場合だとcard)
gutter: 12 //←ここで内側のdiv同士の隙間を設定
});
grid.mount();
}
function update() {
grid.mount();
}
document.addEventListener('DOMContentLoaded', init);
window.addEventListener('resize', update);
}
)();
// ]]>
</script>
<!--JavaScript-->

見て頂きたいのは<script>～</script>の部分です。
「←ここで●●を設定」と書かれた3か所を書き換えるだけで↓に表示されているようなレスポンシブでカードがうねうね動くレイアウトが実現できます(ブラウザの幅を変えてみてください)。

カードを並べたようなレイアウトを作る際はお試し下さい。
それでは本日はこのへんで。