カルーセルとは？

Owl Carouselは、カルーセル機能実装jQueryプラグインです。
カルーセルとは、画像等のアイテムを複数並べて、それらを自動もしくは手動(マウスやタッチ)で左右（もしくは上下）にスライド表示させる機能です。
下記、Owl Carousel 2公式サイトトップページで動く様子を確認できます。

Home | Owl Carousel | 2.0.0-beta.2.4

弊社では過去に、初代Owl Carouselについての記事も書いていますので、そちらも参考にしてください。
シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” | htmlコーディングパートナーの小棹制作所

Owl Carousel 2の特長

OWl Carousel 2の特長をdemoを見ながら確認します。
設置方法についてはそれぞれのリンク先にあるデモページ内「Set up」の項目を参考にしてください。
また、この記事の後半でもかんたんな解説をしています。
基本的な記述にオプションを記述することで下記、もろもろの仕組みを実現できる仕様です。

無限ループ

アイテムが最後までスクロールした際に、最初のアイテムが表示される機能です。

Basic Demo | Owl Carousel | 2.0.0-beta.2.4

オプションの、loopをtrueに設定することで実現します。
オプションの設定方法については後述します。

レスポンシブ対応

ブレイクポイントを設定し、そこで区切った範囲ごとにオプションを記述できます。

Responsive Demo | Owl Carousel | 2.0.0-beta.2.4

アイテムの中央配置

Center Demo | Owl Carousel | 2.0.0-beta.2.4

必要なオプションは
center:true
です。

アイテムの大きさを調整できます。

タイトルの通り、アイテムの大きさをブロックを基準にして、変更できます。

Merge Demo | Owl Carousel | 2.0.0-beta.2.4

必要なオプションは
merge:true
さらにhtml側の各アイテムに

<div class="item" data-merge="1"><h2>1</h2></div>

また、スタイルを入力することでも、大きさの調整が可能です。

Auto Width Demo | Owl Carousel | 2.0.0-beta.2.4

ナビゲーション機能

ナビゲーション・メニューを設置することができます。

Url Hash Navigation Demo | Owl Carousel | 2.0.0-beta.2.4

オプションは
URLhashListener:true
です。

両端のアイテムを見切れさせる

左右両端のアイテムを少し見切れさせて配置できます。

オプションは
stagePadding: 50
ここの数値で幅を調整します。

ほかにも豊富な機能が満載

上記はあくまで、ベーシックな機能です。
これ以外にも、自動アイテム送り機能、Youtube等動画の埋め込み、かっこいいアニメーションなど、多彩な機能が用意させています。
詳細は、下記を参考にしてください。
Demos | Owl Carousel | 2.0.0-beta.2.4

設置方法

ここからは、Owl Carousel 2の設置方法を見ていきます。

ダウンロード

下記、公式サイト、「Getting Started」ページ内中程にある、「Library」項目にある「Owl Carousel Source – 2.0.0-beta.2.4」というリンクからダウンロードするのが最も良さそうです。

Welcome | Owl Carousel | 2.0.0-beta.2.4

CSSを読み込む

使用するCSSは上記フォルダ内、dist＞assetsフォルダ内の
owl.carousel.min.cssと
owl.theme.default.min.css
のふたつです。
これを通常のCSSを読み込むのと同様に、htmlファイルのhead内に記述します。
例：

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

JSファイルを読み込む

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

jQuery本体のダウンロードは下記から。
jQuery

htmlを記述する

<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

プラグインの呼び出し

プラグインの呼び出しと、オプションを記述します。

<script>
$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});
</script>

場所は上記jsファイルを読み込んだ下辺りがよいでしょう。

コード内の”.owl-carousel”という記述は、htmlのカルーセル部分のdivをowl-carouselというクラスで囲ったケースの記述になります。
たとえば、くくるdivのクラス名をCarousel-containerとした場合は、プラグイン呼び出し内の記述もあわせて”.carousel-container”とします。

もっとも基本的なカルーセルは以上となります。
より詳しい設定方法を知りたい場合は下記、公式サイトを参考にしてください。
Welcome | Owl Carousel | 2.0.0-beta.2.4

オプションの記述場所

オプションの追加は上記したプラグイン呼び出しコードに、下記のように記述していきます。
オプションを複数記述する場合は、オプションごとにカンマで区切って記述します。

<script>
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true
})
</script>

すべてのオプションについては、下記のページを参考にしてください。
Options | Owl Carousel | 2.0.0-beta.2.4

対応ブラウザ

公式サイト内の　記述によると、以下のブラウザで検証済みとのことです。
chrome/firefox/opera
IE7/8/10/11
iPad Safari
iPod4 Safari
Nexus 7 Chrome
Galaxy S4
Nokia 8s Windows8

公式サイト紹介

simpleFilter.js | A jQuery Plugin
vivialice/simpleFilter.js-A-jQuery-plugin · GitHub

使い方

simpleFilter.jsをダウンロードする

下記、simpleFilter.jsのGitHubページ内、画面右下にある「Download ZIP」ボタンで、ファイル一式をダウンロードします。
vivialice/simpleFilter.js-A-jQuery-plugin · GitHub

htmlファイルに読み込ませる

simpleFilter.jsはjQuery製なので、まずはjQuery本体ファイルを読み込ませてください。
コード例

<script src="http://code.jquery.com/jquery-latest.js"></script>

つぎにGitHubからダウンロードしたzipファイルを解凍すると現れるファイル群から、jquery.simpleFilter.jsを、自身がサイト制作に使っているフォルダへ移動します。

ファイルを移動させたら、htmlファイルにjquery.simpleFilter.jsを読み込ませるためのコードを記述します。

<script src="jquery.simpleFilter.js"></script>

エフェクトを追加したい画像にクラスをつける

エフェクトを追加したい画像にクラスをつけます。なんでも自由につけて大丈夫です。

<img src="myimage.jpg" class="filter1">

クラスをつけた画像に、追加したいエフェクトを記述をする

下記の形式のコードをhtmlファイルに記述します。

$(window).load(function(){
$('img.filter1').simpleFilter({
    filter : 'fade',
    lightleak : 'lightleak01',
    shadow : 'drama'
    });
});

2行目のクラス名このサンプルでは img.filter1となっている箇所と、その下のfilter・lightleak・shadowの項目を変更することで、
どのクラスがついた画像に、どのようなエフェクトを追加するのか
ということを指定することができます。

エフェクトの種類

前項目のコードにあるように、エフェクトには、Filters・Light Leaks・Shadowsという項目があります。
エフェクトの具合と、エフェクトの種類については、下記公式サイトを参考にしてください。
simpleFilter.js | A jQuery Plugin

Gridder.jsのデモ

ベーシックなデモ Gridder.js – Demo

かっこいいデモ(Gridder.jsのみで作られたものではありません) Gridder.js – Demo

使い方

ダウンロード

下記、Gridder.jsのGitHubページ、画面右下の「Download ZIP」ボタンからzipファイルをダウンロードします。
oriongunning/gridder · GitHub

htmlファイルに必要なファイルを読み込むコードを記述する

Gridder.jsはjQueryプラグインなので、jQuery本体を読み込む必要があります。

コード例

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

上記、jQuery本体読み込みよりも後ろにgridder.js読み込みの記述をします。

コード例

<script src="dist/jquery.gridder.min.js"></script>

htmlを記述する

続いて、htmlのコードを下記のサンプルコードを参考に記述します。

<!-- Gridder navigation -->
<ul class="gridder">
    <li class="gridder-list" data-griddercontent="#content1">
        <img src="http://placehold.it/600x400" />
    </li>
    <li class="gridder-list" data-griddercontent="#content2">
        <img src="http://placehold.it/600x400" />
    </li>
    <li class="gridder-list" data-griddercontent="#content3">
        <img src="http://placehold.it/600x400" />
    </li>
</ul><h3>

<!-- Gridder content -->
<div id="content1" class="gridder-content"> Content goes here... </div>
<div id="content2" class="gridder-content"> Content goes here... </div>
<div id="content3" class="gridder-content"> Content goes here... </div>

上半分で、タイル状の画像を配置し、＜!–Gridder content –＞から下で、それぞれの画像をクリックした時に、表示される内容を記述しています。

どの画像をクリックした時にどの内容が表示されるか、については
タイル画像側のliに付けられた「data-griddercontent=”#content1″」とクリックで表示される内容を囲んだ側のdivに付けられたID「id=”content1″」で関係付けています。

gridder.jsを呼び出すための記述

最後にgridder.jsを呼び出すための記述をhtmlファイルに記述します。

<script>
$(function() {

    // Call Gridder
    $('.gridder').gridderExpander({
        scroll: true,
        scrollOffset: 30,
        scrollTo: "panel", // panel or listitem
        animationSpeed: 400,
        animationEasing: "easeInOutExpo",
        onStart: function(){
            console.log("Gridder Inititialized");
        },
        onContent: function(){
            console.log("Gridder Content Loaded");
        },
        onClosed: function(){
            console.log("Gridder Closed");
        }
    });

});
</script>

このコードで、どのクラスを付けられた要素に対してgridder.jsが動作するのか(この例では、.gridderが対象になるように記述されています)や、アニメーションの詳細を記述することができます。

はじめに

Super Simpe Sliderはシンプルさが売りのjQueryスライダープラグインです。
今回の記事では、jQueryプラグイン導入初心者の方に向けて、Super Simple Sliderをサンプルに、一般的なjQueryプラグインの導入方法をレクチャーします。

Super Simple Slider 公式サイト
Super. Simple. Slider.

jQueryプラグイン導入の3ステップ

一般的なjQueryプラグインの導入手順はどれもほぼ同一で、以下の3ステップに分けられます。

• ステップ1　必要なファイルをhtmlファイルに読み込ませる
  
• ステップ2　htmlに必要な要素を記述する
  
• ステップ3　オプションを記述する
  

以下から、この3つのステップをひとつずつ解説します。

ステップ1　必要なファイルをダウンロードして、htmlファイルに読み込ませる

必要ファイルのダウンロード

導入したいjQueryプラグインをみつけたら、まずは、該当プラグイン配布サイトから、プラグインファイルをダウンロードできるボタンもしくはリンクを探します。

Super Simple Sliderでは、公式ページのナビゲーション部分に、「DOWNLOAD」ボタンがあり、ここをクリックすると、zipファイルのダウンロードが開始されます。

公式サイト　Super. Simple. Slider.

必要ファイルの移動

ダウンロードしたzipを解凍します。

解凍後、現れたファイルの中身のうち必要なファイルを制作中サイトのフォルダーへ移動します。
必要なファイルについては、ほとんどの場合、プラグイン配布サイトに解説があります。

Super Simple Sliderでは、フォルダー内にある「SSS」フォルダー一式を移動させるように記述されています。

必要ファイルのhtmlファイルへの読み込み

まずは、サンプルのコードを記載します。

<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="sss/sss.min.js"></script>
<link rel="stylesheet" href="sss/sss.css" type="text/css" media="all">
</head>

<body>
~~
</body>
</html>

htmlファイル＜head＞~＜/head＞のなかにに、必要なファイルの読み込ませる記述をしています。
Super Simple Sliderにおいては、下記のように、jQuery, the sss.js file and the sss.css fileを読み込ませるように、との記述があるので、それに従います。

サンプルコードでは、4~6行目が該当します。

ファイル読み込みのコードを書く場所は、配布サイトで特別な指示がない限りこの＜head＞から＜/head＞に囲まれた部分が無難です。

多くのプラグインの配布元にあるサンプルコードでは、ファイルへのパスが仮のものになっていますので、ここは自分のサイトのディレクトリー構造に合わせてパスを書き換えます。

jQuery本体ファイルについて

jQuery本体ファイルは、jQueryプラグイン導入に必ず必要なファイルです。
このファイルの読み込みは、jQuery公式サイトから、ファイルをダウンロードするか、上記サンプルにあるコードを使うことで、外部から読み込むことも可能です。

読み込む順番について

jQuery本体と、jQueryプラグインの順番は、かならずjQuery本体が先にくるように記述します。
逆にすると動きません。

また、プラグインを複数使用する場合でも、jQuery本体の読み込みは1度するだけで大丈夫です。

ステップ2　htmlにプラグインの動作に必要な要素を記述する

たとえば、スライダーを作成する場合、必要となる要素はスライドさせる画像です。

jQueryプラグインでは、要素の書き方についてもプラグインごとに指定がある場合が多くあります。

Super Simple Sliderでは、配布ページ内にて、下記の記述方法を指定しています。

<div class="slider">
    <img src="images/image1.jpg" />
    <img src="images/image2.jpg" />
    <img src="images/image3.jpg" />
<div><img src="images/image4.jpg" /><span class="caption">This one has a caption</span></div>
</div>

スライドさせる画像を並べ、外側を＜div class=”slider”＞~＜div＞で囲っています。
当プラグインで、普通のコードと比べ少し特殊なのは、外側を囲うdivにsliderというクラス名をつけている、ということくらいです。

クラス名をつける、ということは続けて解説する「ステップ3　オプションを記述する」に関係があります。

ステップ3　オプションを記述する

最後に、オプションを記述します。
ここでは、「どの要素を動かすのか」「どのように動かすのか」という設定をします。
以下、Super Simple Sliderでのオプションのコードを記載します。

まずはオプションを何も指定していないコード

<script>
jQuery(function($) {
$('.slider').sss();
});
</script>

オプションをなにも設定しないと、プラグインで用意された初期設定がそのまま適用されます。

続いてオプションを指定したコード

<script>
$('.slider').sss({
slideShow : true, 
startOn : 0, 
transition : 400,
speed : 3500,
showNav : true
});
</script>

Super Simple Sliderでは、自動アニメーションの有無や、スピード、ナビボタンの有無などのオプションを選択できます。

オプションの記述方法についても、プラグインによって多少の違いはあれど、基本的にはどれも上記の形式を採用しています。

オプションを記述する箇所

オプションの記述箇所は、htmlファイル内の「その1　必要なファイルをhtmlファイルに読み込ませる」でプラグイン.jsファイルの読み込みを記述した下になります。
Super Simple Sliderでは、sss.min.jsの下です。

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="sss/sss.min.js"></script>
<link rel="stylesheet" href="sss/sss.css" type="text/css" media="all">

<script>
jQuery(function($) {
$('.slider').sss();
});
</script>
</head>

コード解説

$(‘.slider’)というコードで、「htmlに必要な要素を記述する」の項目で記載したクラス名「.slider」を記述します。
これで、「どの要素を動かすのか」を明確にします。
「sliderという名前のクラスで囲ったなかの画像をスライダーにしますよ」という宣言です。

つづいて「どのように動かすのか」を設定します。
項目が用意されていて、そこにあらかじめ決められた値や数字を入力していきます。
値の詳細はプラグイン配布サイトに記述があります。

Super Simple Sliderにおいては、ページ内「OPTIONS」という項目にコードを書いて解説しています。

全体のコード

おわりに、Super Simple Sliderの実装に必要最低限のhtmlコードを記述します。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="sss/sss.min.js"></script>
        <link rel="stylesheet" href="sss/sss.css" type="text/css" media="all">

        <script>
            jQuery(function($) {
            $('.slider').sss();
            });
        </script>
    </head>
    <body>
        <div class="slider">
            <img src="images/image1.jpg" />
            <img src="images/image2.jpg" />
            <img src="images/image3.jpg" />
        </div>
    </body>
</html>

jQuery Cursor Tooltipsとは

jQuery Cursor Tooltipsは少ないコードでツールチップを実装できる、jQueryプラグインです。

jQuery Cursor Tooltips、githubサイト nathco/jQuery.mousetip · GitHub　

ツールチップとは

ツールチップは、ある要素にマウスが乗った時に現れる要素のことです。

マウスを乗せた要素に対する説明などで用いられることが多いです。
動作サンプル
Nathan Rutzky – jQuery.mousetip

使い方

ダウンロード

下記Webページ、右下にある「Download ZIP」ボタンからzipファイルをダウンロードします。
nathco/jQuery.mousetip · GitHub

必要ファイルのhtmlファイルへの読み込み

htmlファイルに読み込むファイルは、フォルダ内のjQuery.mousetip.js、およびjQueryプラグインですのでjQuery本体の2つ。
jQuery

<script src="jQuery.min.js"></script>  
<script src="jQuery.mousetip.js"></script>

ファイルのパスはご自身の開発環境のディレクトリー構成に合わせて適宜変更してください。

htmlマークアップ

続いて、実装に必要なhtml要素のマークアップについて。

<div>Content<span class="tip">Mousetip 1</span></div>
<div>Content<span class="tip">Mousetip 2</span></div>
<div>Content<span class="tip">Mousetip 3</span></div>

ツールチップを表示させたい要素をdivで囲います。
次に、ツールチップの内容を、divのなかにクラス名をtipとしたspanタグで囲っています。

プラグイン呼び出し

プラグイン呼び出しのために下記のコードを記述します。

<script>
$(function() {
    $('div').mousetip('.tip'); 
});
</script>

記述箇所は、jQuery.mousetip.jsファイルを読み込んだ記述より下にしてください。
また、ここにオプションを記述することも可能です。詳細は下記配布サイトにて。
nathco/jQuery.mousetip · GitHub

スタイル記述

最後に、CSSを記述します。

span.tip {
    position: absolute;
    z-index: 2;
    display: none;
} 

上記は必要最低限の記述で、これにデザインにあったスタイルを追加して、完成です。
デザインスタイル例

span.tip {

    /* Required */
    position: absolute;
    z-index: 2;
    display: none;

    /* Optional */
    font-size: 15px;
    max-width: 150px;
    height: auto;
    padding: 10px;
    border-radius: 3px;
    box-shadow: 0 1px 2px #666;
    background: #FD0;
} 

Cloud Sliderとは

Cloud Sliderは下記する多彩な機能を備えたjQueryプラグインです。
有料で、価格が10ドル。
下記のサイトで購入できます。

JavaScript – Cloud Slider – Responsive jQuery Slider Plugin | CodeCanyon

ちなみに購入先の「code canyon」は、多数の有料のプラグインが集められたサイトです。

海外サイトでのお金のやりとりに不安がある方は、ペイパルでの取引も可能になっています。

豊富なアニメーションと多彩な機能

Cloud Sliderの特徴は、

• 豊富なアニメーションで他のスライダー系プラグインと見た目で差別化を図れる
• スライダーのほか、カルーセルやイメージギャラリーなど、多彩な機能が実装できる

この2点にあります。
以下から公式ページのサンプルを掲載します。

一般的な機能を備えたスライダー

Cloud Slider Demo | Multi-Purpose Slider

ケンバーンズエフェクト付きスライダー

Cloud Slider Demo | Ken Burns Slider – Full Width
画像がズームします。

カルーセル

Cloud Slider Demo | Carousel With Layers

カテゴリーによるアイテム出し分け可能なカルーセル

Cloud Slider Demo | Category Carousel

全背景スライダー

Cloud Slider Demo | Slider on background

ショーケース

Cloud Slider Demo | Showcase

マーキーっぽい無限カルーセル

Cloud Slider Demo | Infinite Carousel

対応ブラウザ

• IE7以上
• Firefox
• Safari
• Oprera
• Chrome

レスポンシブにも対応しています。

jquery.blurr.jsとは

jquery.blurr.jsは、画像にブラー（ぼやけ）効果をつけて、背景画像に設定してくれるjQueryプラグインです。

ブラー効果付きの背景画像、これを頻繁に変える必要があるWebページで、そのたびに画像加工ソフトを使って作業をするのはけっこう面倒です。
当プラグインを使うと、この加工工程を省略することができます。

関連サイト

github:tomhallam/Blurr · GitHub
デモ：jQuery Blurr Example Page

設定方法

ダウンロード

下記github公式ページ、右下の「Download ZIP」ボタンからダウンロードできます。
tomhallam/Blurr · GitHub

必要ファイル

必要ファイルは下記2点。

• jQuery本体
• jquery.blurr.js

jquery.blurr.jsは上記ダウンロードしたzipファイル内に、jQuery本体は下記jQuery公式サイトよりダウンロードできます。
jQuery

必要ファイル読み込みサンプルコード

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.blurr.js"></script>

htmlマークアップ

<div class="blur-this" data-href="example-image.jpg"><div>Text content inside the blur</div></div>

オプション（プラグイン呼び出し）コードサンプル

$(document).ready(function() {
    $('.blur-this').blurr({
        height: 300, // Height, in pixels of this blurred div.
        sharpness: 40, // Sharpness, as a number between 0-100. 100 is very sharp, 0 is extremely blurry
        offsetX: 0, // The x (left - right) offset of the image
        offsetY: 0, // The y (top - bottom) offset of the image
        callback: null // Callback to be called after the blur has been rendered. Recieves the following arguments (href, offsetX, offsetY, sharpness)
    });
});

htmlマークアップで該当のdivにつけたクラス名とプラグイン呼び出しコードのクラス記述を合わせます。
このサンプルでは、「.blur-this」となっています。

関連サイト

CodeCanyon内公式ページ(購入ページ)：JavaScript – imGrid – Media Grid Responsive Gallery | CodeCanyon

デモ：imGrid – Media Grid Responsive Gallery Preview – CodeCanyon

imGridとは

imGridは、おもに画像をグリッド状にレイアウトするためのjQueryプラグインです。

有料となっており、下記CodeCanyon公式ページより、9ドルで購入できます。
JavaScript – imGrid – Media Grid Responsive Gallery | CodeCanyon

多彩なホバーエフェクト・アニメーションを備えているのが最大の特長で、リッチなグリッドレイアウト・デザイン制作に向いています。

デモ

• ホバーエフェクトデモ：imGrid – Just another Image grid jQuery plugin
• レイアウトデモ：imGrid – Just another Image grid jQuery plugin
• アニメーションデモ ：imGrid – Just another Image grid jQuery plugin

購入

購入は、下記CodeCanyonサイト内、imGridページにて、9ドルで。
JavaScript – imGrid – Media Grid Responsive Gallery | CodeCanyon

ブラウザサポート

対応ブラウザーは

• IE10〜
• Firefox
• Safari
• Opera
• Chrome

となっています。

そのほかの特長

• 4つのグリッドレイアウトパターン同封
• ライトボックス実装
• 動的ローディング
• フルレスポンシブ対応

など

jQuery Awesome Cursorとは

jQuery Awesome Cursorは、FontAwesomeで用意されている膨大なアイコンを、マウスカーソル画像として使えるようにするjQueryプラグインです。

関連サイト

• FontAwesome
  Font Awesome, the iconic font and CSS toolkit
• jQuery Awesome Cursor公式ページ & デモ
  Awesome Cursor – a jQuery plugin for using FontAwesome icons as custom CSS cursors
• githubページ
  jwarby/jquery-awesome-cursor · GitHub

設定方法

ダウンロード

実装に必要なファイルは

• font-awesome.min.css
• jquery.js(もしくはjquery.min.js)
• jquery.awesome-cursor.min.js

の3つ。

font-awesome.min.cssは、上記「関連サイト」項目にある、「FontAwesome」ページから。
jquery.awesome-cursor.min.jsも、「関連サイト」項目のgithubページ、ページ右下にある「Download ZIP」ボタンより。
jquery本体は下記公式サイトより、それぞれダウンロードできます。
jQuery

必要ファイル読み込み

上記3ファイルを、自身が制作に使っているフォルダーに移動させ、htmlファイルにそれらを読み込むための記述をします。

 <link rel="stylesheet" href="/path/to/font-awesome.min.css" type="text/css">
  <script src="/path/to/jquery.min.js" type="text/javascript"></script>
  <script src="/path/to/jquery.awesome-cursor.min.js" type="text/javascript"></script>

各ファイルのパスは自身の制作フォルダーの階層に合わせて適宜変更してください。

プラグイン呼び出し方法

上記必要ファイルを読み込む記述より下に、プラグインを呼び出すための記述をします。

<script>
$('body').awesomeCursor('pencil');
</script>

このコードは、bodyタグ内のカーソル画像を「pencil」にする、という意味です。
bodyの箇所にはセレクター名、pencilの箇所にはFontAwesomeのアイコン名を記載します。
アイコン名については下記、FontAwesome内ページにて確認できます。
Font Awesome Icons

オプション

上記「プラグインの呼び出し方法」で記載したコードにオプションを記述することができます。

オプション記述例

$('#example1')
    .awesomeCursor('paper-plane', {
      color: '#2cb2da',
      hotspot: 'top right'
    });

オプションではサイズ・色・角度などを変更することができます。
オプションの詳細は下記ページ内、Optionsの項目で確認できます。
Awesome Cursor – a jQuery plugin for using FontAwesome icons as custom CSS cursors
サンプルも同ページ内で確認できます。

jQuery Sortable Photosとは

jQuery Sortable Photosは、複数の画像をタイル状に配置するためのjQueryプラグインです。

jQuery Sortable Photos by Gergely Lekli

特徴

タイル状画像配置プラグインというと、Masonryというプラグインが有名です。
jQuery Sortable Photosはこれと比べて、設定項目が少ないため、初心者でも比較的簡単に設置が行えます。
また、後述するsortableの設定によって、ドラッグ＆ドロップで画像順の入れ替えができるのも特徴です。

関連サイト

公式ページ：jQuery Sortable Photos by Gergely Lekli
使い方：glekli/jQuery-Sortable-Photos · GitHub
ダウンロード：Releases · glekli/jQuery-Sortable-Photos · GitHub

設定方法

必要ファイルダウンロード

実装に必要なファイルはjquery-sortable-photos.jsとjQuery本体。
jQuery Sortable Photosのダウンロードは上記「関連サイト」項目中の「ダウンロード」から行えます。
jQuery本体は下記、公式サイトより
jQuery

ファイル読み込み

<script src="jquery.js"></script>
<script src="jquery-sortable-photos.js"></script>

各ファイルへのパスはご自身の制作フォルダ階層にあわせて適宜変更してください。

htmlマークアップ

<div class="my-container">
  <div class="my-item"><img src="image1.jpg"></div>
  <div class="my-item"><img src="image2.jpg"></div>
</div>

初期設定

<script>
$('.my-container').sortablePhotos({
  selector: '> .my-item',
  sortable: true,
  padding: 2
});
</script>

<script src="jquery.js"></script>
<script src="jquery-sortable-photos.js"></script>
.
.
.
<script>
$('.my-container').sortablePhotos({
  selector: '> .my-item',
  sortable: true,
  padding: 2
});
</script>

コード解説

$(‘.my-container’)
この表記にて、class=”my-container”のなかにある要素がタイル状表示の対象になります。
ご自身のhtmlマークアップにあわせて適宜変更できます。


selector: ‘> .my-item’,
この表記でタイル状にするアイテムを指定します。
これもご自身のhtmlマークアップにあわせて適宜変更できます。
この例では
class=”my-container”の子要素(＞)である.my-itemが対象要素になります。

sortable: true,
この表記によって、マウスのドラッグ＆ドロップによって、画像順の入れ替え動作が可能になります。
falseに設定することで解除されます。


padding: 2
この表記によって、画像間の余白を設定できます。
この例では、2ピクセルが設定されています。

おすすめ記事のアドレス

ScrollMenu.js | A new interface to replace your old boring scrollbar.

筆者のひとこと

スクロールバーがページ内リンクにも。
縦長のエンターテイメント系サイトで活用できそう。
詳しい解説は上記ページ内「API Documentation」ボタンから。ダウンロードは「Download」ボタンからgithubページへ。

Simple.Timerとは

Simple.Timerは、Webページにさくっとカウントダウンタイマーを設置できるjQueryプラグインです。

関連ページ

公式ページ(デモ・ダウンロードあり)：Simple.Timer by caike
githubページ：caike/jQuery-Simple-Timer · GitHub

使用方法

必要ファイル

必要ファイルは「jquery.simple.timer.js」と「jquery.js」の２つ。
どちらも上記「関連ページ」項目に記載した「公式ページ」内のダウンロード項目より入手できるファイルに内包されています。

設置方法

まずは上記の必要ファイルをhtmlファイルに読み込ませます。

<script src="jquery.js"></script>
<script src="jquery.simple.timer.js"></script>

ファイルへのパスは自身の開発環境のフォルダ階層にあわせて変更してください。

記述箇所に明確な決まりはありませんが、＜head＞~＜/head＞タグ内、もしくは＜/body＞タグの真上がおすすめです。

この記述の下に、プラグイン呼び出しの記述をします。

</script>
$(function(){
$('.timer').startTimer();
});
</script>

続いて、タイマーを設置したい箇所にhtml要素を追加します。

<div class="timer" data-seconds-left=1800></div>

クラス名は上記したプラグイン呼び出しの
$(‘.timer’).startTimer();
この箇所に記述したクラス名と合致するように。

さらに、
data-seconds-left=1800
この記述で、カウントダウンの時間を秒単位で指定します。
実際の表示は「時間：分：秒」となります。
基本的な設置方法はこれだけ。

そのほかオプションで、カウントダウンが0になった時の動作などの設定ができるようです。
詳しくは、上記「関連ページ」項目内「公式ページ」にある「Options」項目にて確認できます。

Progressionとは

Progressionは、Webサイトのフォーム入力欄に、ツールチップ上のヒントを表示させることができるjQueryプラグインです。

関連ページ

公式サイト(デモあり)：Progression.js
githubページ：aarondo/progression.js · GitHub
jQuery公式サイト：jQuery

設定方法

必要ファイルダウンロード

必要ファイルはprogression.css、progression.js、そしてjquery本体の3つ。

このうちprogression.cssとprogression.jsは、上記githubページ、Download ZIPボタンからダウンロードします。解凍したzipファイルのsrcフォルダに格納されています。

jquery本体については、上記関連ページ項目内、jQuery公式サイトよりダウンロードができます。

必要ファイルのhtmlファイルへの読み込み

上記3ファイルが入手できたら、それらを読み込ませるための記述を、htmlファイルにしていきます。

コードサンプルは以下。

<link href='progression.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="progression.js"></script>

ファイルのパスやjQuery本体のバージョンはご自身の作業環境(フォルダー階層など)に合わせて適宜変更してください。

フォーム作成

ファイルの読み込み記述をしたら、htmlファイルにフォームを作成します。

まずはコードサンプル。

<form id="myform">
<p>
<label for="">Name</label>
<input data-progression="" type="text" data-helper="Help users through forms by prividing helpful hinters" name="name" value="" placeholder="" />
</p>
</form>

このプラグインを実装するために必要な記述は以下となります。

まず、formタグにidをつけること。この例ならformタグにmyformというidを付加しています。

つづいて、フォーム内の各要素に”deta-progression”という記述をします。これはツールチップにフォーム入力の進捗状況を棒グラフで表示させるためのものです。

さらに、ツールチップに表示させる文言をフォーム内各要素に、”data-helper=”ここにヒント文言を書く””と記述をします。

プラグインのイニシャライズ(初期化)

最後に、下記の記述を、上記した必要ファイルの読み込みより後に記述します。

$(document).ready(function ($) {
$("#myform").progression();
});

#myformという箇所を、上記「フォーム作成」で記述したformのidと合わせるようにしてください。

基本的な実装方法はこれにて完了です。

オプション設定

上記、イニシャライズ記述にオプションを記述することで、さまざまな設定をすることができます。

記述方法は下記を参考に。

$("#myform").progression({
tooltipWidth: '200',
tooltipPosition: 'right',
tooltipOffset: '50',
showProgressBar: true,
showHelper: true,
tooltipFontSize: '14',
tooltipFontColor: 'fff',
progressBarBackground: 'fff',
progressBarColor: '6EA5E1',
tooltipBackgroundColor: 'a2cbfa',
tooltipPadding: '10',
tooltipAnimate: true
});

オプションの種類については、上記「関連ページ」項目、githubページ内、「Options」項目にて確認できます。

おすすめ記事のアドレス

ukrbublik/grisel · GitHub

筆者のひとこと

アニメーションがよいデキで、実践で使いどころもありそうなjQueryプラグインです。
ちょっと公式の解説が少ないですが、ダウンロードファイルのなかのdemo.htmlでコードを解析できます。

おすすめ記事のアドレス

FullScreen Background Slider – jQuery SlideShow – JavaScript | CodeCanyon
Fullscreen Background Slider – jQuery SlideShow

筆者のひとこと

envanto marketにて、全画面背景にスライダーを設置できるjQueryプラグインが販売されていたのでご紹介です。
価格は10ドル。クレジットカードとPaypalが使えます。
全画面背景はWebページデザインのクオリティーを大きく左右する箇所ですので、10ドルでここまで優秀なスライダーが設置できるならかなりお得ではないでしょうか。

おすすめ記事のアドレス

Responsive Sliding Tabs Plugin with jQuery – Tabs.js | Free jQuery Plugins

筆者のひとこと

レスポンシブでハンバーガーメニューに変形するのが便利。

はじめに

drawerはその名の通り、ドロワーメニューを実装するためのjQueryプラグインです。

ドロワーメニューとは、よくスマートフォン向けWebサイトやWebアプリで見かける、横3本線のボタンを押すと、画面外からメニューが入り込んでくる仕組みです。

ドロワーメニュー作成用のjQueryプラグインは数ありますが、特に実装の簡単さで言うと今回紹介する「drawer」はかなりのすぐれものです。

関連ページ

プラグイン公式：Drawer – Flexible drawer menu using jQuery, iScroll and CSS.(このページ自体がデモになっています)

使用方法

CDNから必要ファイルを読み込む

必要ファイルについてはダウンロードすることもできますが、CDNが楽なので私はこちらを使うことが多いです。

CDNの使用方法は公式サイトにあるコードをまるごと自分のhtmlファイルにコピペするだけ。パスなどを変更する必要はありません。
下記公式サイトからコード引用の引用です。

<!-- drawer.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css">
<!-- jquery & iScroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
<!-- drawer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>

htmlマークアップ

htmlのマークアップも公式サイトのコードを引用するのが楽です。
以下引用。

<body class="drawer drawer--left">
<header role="banner">
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
<nav class="drawer-nav" role="navigation">
<ul class="drawer-menu">
<li><a class="drawer-brand" href="#">Brand</a></li>
<li><a class="drawer-menu-item" href="#">Nav1</a></li>
<li><a class="drawer-menu-item" href="#">Nav2</a></li>
</ul>
</nav>
</header>
<main role="main">
<!-- Page content -->
</main>
</body>

bodyタグにもクラスを付けるのがちょっと変わっているかもしれません。つけ忘れに注意しましょう。

呼び出す

最後にプラグインを呼び出すためのコードをhtmlファイルに記述していきます。
コード引用

$(document).ready(function() {
$('.drawer').drawer();
});

htmlファイル内に記述する際は＜script＞〜＜/script＞タグで囲うのを忘れずに。
なんと基本的な仕組みはこれだけで完成です。
諸々オプションもありますので、公式サイトで確認してみるといいでしょう。

ここがおすすめ

Featherlight.jsは軽量なライトボックス作成プラグインです。htmlで作成したテキストもライトボックスに挿入することができておすすめです。

この記事では、Featherlight.jsでテキストをライトボックスに表示させる方法を紹介します。

サンプル

Featherlight – The ultra slim jQuery lightbox.(左記公式サイト、メインビジュアル内左下のボタンがサンプルになっています)

公式サイト

Featherlight – The ultra slim jQuery lightbox.
GitHub – noelboss/featherlight:

導入方法

必要な段取り

このプラグインを使ってライトボックス内テキスト表示を実装するには

• 1.必要ファイルの取得と読み込み
• 2.htmlファイルへのライトボックス内容の記述

以上2点が必要になります。
以下、詳しく解説します。

必要ファイルの取得と読み込み

必要ファイルは

• featherlight.min.css
• jQuery本体
• featherlight.min.js

です。
上記のファイルをご自身で制作しているhtmlファイルに読み込みます。

<link href="//cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

このサンプルではファイルにCDNサービスで提供されている外部サーバーからのファイルを使用しています。
ファイルをダウンロードして使用したい場合は、公式サイトより可能です。

htmlファイルの記述

ライトボックスを表示させたいリンクに対して下記の記述を行います。

<a href="#" data-featherlight="#mylightbox">Open element in lightbox</a>

data-featherlightという記述をして、そこにライトボックスで表示させたい箇所のidを記述することがポイントです。

つづいて、ライトボックス内に表示させたい内容を下記のように記述します。

<div id="mylightbox">This div will be opened in a lightbox</div>

リンクで記述したdata-featherlight=”#mylightbox”とdiv側のidがmylightboxと一致しているのがわかります。

以上がFeatherlight.jsを使って、htmlで記述したテキストをライトボックスに表示させる方法でした。

ここがおすすめ

画面スクロールを基準(トリガー)として要素がアニメーションするページを作成できます。
比較的単純なアニメーションページを短時間で作るのに向いていそうです。

サンプル

ScrollTrigger – Scroll based animations with ease

公式サイト

GitHub – terwanerik/ScrollTrigger: Triggers classes on html elements based on the scroll position. Uses requestAnimationFrame so it doesn’t jack the users scroll.

導入方法

必要な段取り

このプラグインを使うには、

• 1.ファイルの取得と読み込み
• 2.htmlファイルへのプラグイン呼び出しの記述
• 3.アニメーションさせたい要素への「data-scrollアトリビュート(属性)」の追加
• 4.cssの設定

が必要になります。
以下、詳しく解説します。

必要ファイルの取得と読み込み

必要ファイルはScrollTrigger.min.js。
ダウンロードは上記公式githubページより。
これを制作しているhtmlファイルに読み込むための記述をします。

<script src="ScrollTrigger.min.js"></script>

htmlファイルへのプラグイン呼び出しの記述

さらにこのプラグインの呼び出しに必要な記述をします。

<script>
document.addEventListener('DOMContentLoaded', function(){
    ScrollTrigger.init();
});
</script>

date-scroll属性の追加

アニメーションさせたい要素に対してdate-scroll属性を記述します。

<div data-scroll></div>

cssの設定

date-scroll属性を記述した箇所に自動で付与されるclassについて、cssの設定を行います。

.invisible {
    transition: opacity 0.5s ease;
    opacity: 0.0;
}

.visible {
    transition: opacity 0.5s ease;
    opacity: 1.0;
}

この例では、invisible(アニメーションスタート時)は要素が完全に透過されている状態にし、visible(アニメーション完了時)に要素が完全に表示されるように設定されています。transitionにて要素の出現・消滅の時間(0.5s)、変化の進行割合(ease)を設定しています。

上記で基本的な設定は完了です。
このままでは単純なアニメーションしか実装できませんが、オプションを付加することで多彩な動作を実現します。
オプションについては上記公式githubページ内、Options項目にて、説明や記述方法のサンプルを確認できます。

ここがおすすめ

簡単なコードで画像にズーム効果を付けられておすすめです。imgタグでなくfigureタグを使っているのがちょっと変わっています。

サンプル

ZooMove | jQuery Zoom Image Examples項目

公式サイト

ZooMove | jQuery Zoom Image

jQuery

導入方法

必要な段取り

このプラグインを使うには、

• 1.ファイルの取得と読み込み
• 2.htmlファイルへのプラグイン呼び出しの記述
• 3.figureタグへのコード追加

が必要になります。
以下、詳しく解説します。

1.ファイルの取得と読み込み

このプラグインに必要なファイルは

• zoomove.min.css
• jquery-2.1.4.min.js(query本体)
• zoomove.min.js

jQuery本体以外は上記zoomove公式サイトよりダウンロードできます。
jQuery本体はjQueryの公式サイトより。

上記ファイルをhtmlファイルへ読み込みます。

以下公式サイトより引用

<!-- ZooMove CSS minified -->
<link rel="stylesheet" href="dist/zoomove.min.css">

<!-- jQuery CDN JS minified (must) -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- ZooMove JS minified -->
<script src="dist/zoomove.min.js"></script>

2.htmlファイルへのプラグイン呼び出しの記述

当プラグインを呼び出す記述をhtml内に記述します。

以下公式サイトより引用

<script>
   $('.zoo-item').ZooMove();
</script>

3.画像のタグへのコード追加

figureタグに必要なコードを記述します。

以下公式サイトより引用

<figure class="zoo-item" zoo-image="img/example.jpg"></figure> 

さらにここにオプションを記述することでさまざまな動作を実装できます。

以下公式サイトより引用

<!-- Image 1 | Default -->
<figure class="zoo-item" zoo-image="img/example.jpg"></figure>

<!-- Image 2 | Scale value "3" (300%) -->
<figure class="zoo-item" zoo-image="img/example.jpg" zoo-scale="3"></figure>

<!-- Image 3 | Over "true" and Move "false" -->
<figure class="zoo-item" zoo-image="img/example.jpg" zoo-over="true" zoo-move="false"></figure>

くわしくは、公式サイト内、How to use項目を参照してください。