WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

jQueryプラグイン

Colorbox コールバック関数 独自のクローズボタンを追加

デモ http://efu.sakura.ne.jp/web/colorbox/index2.html以前書いた記事 mmmmofu.hatenablog.com <html lang="ja"> <head> <meta charset="UTF-8"> <title>Colorbox</title> <link rel="stylesheet" href="css/colorbox.css"> <link rel="stylesheet" href="css/style2.css"> </link></link></meta></head></html>

グリッドレイアウトをソート、フィルタリングできるjQueryプラグイン Isotope

デモ http://efu.sakura.ne.jp/web/isotope/公式サイト isotope.metafizzy.co <html lang="ja"> <head> <meta charset="UTF-8"> <title>Isotope</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="style.css"> </link></link></meta></head></html>

画像の遅延読み込みをするjQueryプラグインlazyload

サイトが重い、画像の量が多い時などにGitHub github.comデモ http://efu.sakura.ne.jp/web/lazyload/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>lazyload</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/waeb/common/css/reset.css"> <link rel="stylesheet" href="./style.css"> </link></link></meta></head></html>

色をアニメーションさせることができるjQueryプラグインjQuery Color

github.comデモ http://efu.sakura.ne.jp/web/hover/jQueryのanimateは数値の値しかアニメーションさせることができない。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>hover</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="style.css"> </head> …</html>

リストを円形にできるExtremes

公式サイト Extremes jQuery plug-inデモ http://efu.sakura.ne.jp/web/extremes/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>Extremes</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <style> body { background: #111; color: #666; } .extremes { mar…</link></meta></head></html>

HTML5のaudioやvideoの埋め込み・再生ができるjQueryプラグインjPlayer

公式サイト jplayer.orgデモ http://efu.sakura.ne.jp/web/jplayer/ ※音が流れます <html lang="ja"> <head> <meta charset="UTF-8"> <title>jPlayer</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

Easy List Splitter

デモ http://efu.sakura.ne.jp/web/list/公式サイト www.madeincima.it <html lang="ja"> <head> <meta charset="UTF-8"> <title>Easy List Splitter</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

マウスオーバーした部分を拡大するjQueryプラグインelevatezoom.js

デモ http://efu.sakura.ne.jp/web/elevatezoom/ 公式サイト http://www.elevateweb.co.uk/image-zoom <html lang="ja"> <head> <meta charset="UTF-8"> <title>elevatezoom.js</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/jquery.elevateZoom-3.0.8.min.js"><…</meta></head></html>

スライダーjQueryプラグイン slick

http://efu.sakura.ne.jp/web/slick/公式サイト kenwheeler.github.io ドットのページャーの横にPREV,NEXT(枚数が変化しても対応) <html lang="ja"> <head> <meta charset="UTF-8"> <title>slick</title> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css"> </link></link></meta></head></html>

ブロックを隙間なく並べるjQueryプラグインMasonry

absoluteで位置を配置してくれる。 可変グリッドに対応masonry.desandro.comgithub.com デモはこちら http://efu.sakura.ne.jp/web/masonry/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>Masonry</title> <link href="https://fonts.googleapis.com/css?family=Asul:400,700" rel="stylesheet"> </link></meta></head></html>

日本地図をcanvasで表示できるjQueryプラグインJapan Map

デモ http://efu.sakura.ne.jp/web/japanmap/ takemaru-hirai.github.io 公式サイトからファイルを落としてくる jQuery本体とjquery.japan-map.min.jsを読みこむ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>Japan Map</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </meta></head></html>

世界地図をベクターデータで表示するjQuery Vector Maps

デモはこちら http://efu.sakura.ne.jp/web/vectormaps/jqvmap.com 公式サイトからファイルをダウンロードする HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Vector Maps</title> <link rel="stylesheet" href="css/jqvmap.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

文字をカーブさせることができるjQueryプラグインArctext.js

tympanus.net http://efu.sakura.ne.jp/web/arctext/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>Arctext.js</title> <link href="https://fonts.googleapis.com/css?family=Chango" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

textillate.js

文字にエフェクトがかけらるjQueryプラグインTextillate.js 公式サイトではアニメーションの組み合わせを試すことができる。 デモはこちら http://efu.sakura.ne.jp/web/textillate/jQuery本体と、textillate.js、lettering.jsとanimate.cssを読みこんでおく…

SCROLLIFY

決められた要素ごとにスクロールできるjQueryプラグイン 公式サイト projects.lukehaas.me デモはこちら http://efu.sakura.ne.jp/web/scrollify/ ページャとスクロールボタンを設置 <html lang="ja"> <head> <meta charset="UTF-8"> <title>SCROLLIFY</title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>

jQuery UIのDraggableで要素をドラッグできるようにする

デモはこちら http://efu.sakura.ne.jp/web/drag/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery UI Draggable</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </link></meta></head></html>

コンテンツを縦横斜めにスライドさせるjQuery faux-3D Viewport

デモはこちら http://efu.sakura.ne.jp/web/3d/jQueryとjQuery easingを読み込んでおく HTML <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery faux-3D Viewport</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </link></meta></head></html>

ループアニメーション

デモはこちら http://efu.sakura.ne.jp/web/loop/velocityjs.org HTML <html lang="en"> <head> <meta charset="UTF-8"> <title>Velocity.jsでループアニメーション</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </link></meta></head></html>

GoogleMAPにオリジナルマーカーや吹き出しが簡単に設置できるjQueryプラグインAxGmap

objc-lovers.comGoogleMAPにオリジナルマーカーや吹き出しが簡単に設置できるjQueryプラグイン マップの色変更には対応していない デモはこちら http://efu.sakura.ne.jp/web/axgmap/GitHubからファイルをダウンロードする github.com「jQuery」と「Google M…

スクロールバーのデザインを変更したり惰性スクロールが実装できるjQueryプラグインNiceScroll

github.comGitHubからファイルを落としてくる。 ファイルを開き 「jquery.nicescroll.js」もしくは「jquery.nicescroll.min.js」を 取り出し読みこむ デモ http://efu.sakura.ne.jp/web/nicescroll/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>NiceScroll</title> <style> .test { padding-top: 1000px; } .e</meta></head></html>…

Colorbox

高機能なモーダルウインドウプラグイン 画像だけでなく、YouTube等iframe読み込み、やインラインhtml、ajaxでファイルの読み込みなどをモーダルウインドウで表示することができる。Colorbox - a jQuery lightbox デモはこちら http://efu.sakura.ne.jp/web/c…

bez

CSS3のアニメーションのイージングを指定できるcubic-bezierのような書きかたで jQueryのeasingを記述できるjQueryプラグインgithub.com $(".content").animate({ 'top': -2000 }, 500, $.bez([0.68, -0.55, 0.265, 1.55])); 関連記事 mmmmofu.hatenablog.com

雪を降らせるプラグインJQuery-Snowfall

デモはこちら http://efu.sakura.ne.jp/web/snowfall/GitHubからファイルをダウンロードする github.comダウンロードしたファイルの中から 「snowfall.jquery.js」を取り出し読みこむ $(function() { $(document).snowfall(); }); これでデフォルトの設定で…

jQuery Easing Plugin

jQueryのアニメーションのイージングは最初の状態だと「linear」と「swing」しか使えないが、 jQueryプラグインの「jQuery Easing Plugin」を使用すると、 様々なイージングを使用することができる。 デフォルトは「swing」サイトからファイルをダウンロード…

cookie.js

github.comcookie.jsはcookieを簡単に操作できるjQueryプラグインGitHubからダウンロードして読み込む cookieを保存する方法 $.cookie("KEY", "VALUE", { expires: 1 }); KEYにcookieの名前、VALUEに値を入力する。 {}の中には様々なオプションを設定するこ…

PJAX

ページ遷移時に、非同期通信で指定した箇所のみ通信し、 スムーズな画面遷移が可能。Redirecting… $(function() { $.pjax({ area: '#main', link: 'a.target', wait: 800 }); area 切り替える範囲 link PJAXさせるリンクを指定 wait リンクをクリックしてか…

本のようにめくれるjQueryプラグインbookblock

tympanus.net HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>bookblock.js</title> <link rel="stylesheet" href="css/demo.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/custom.css"> </link></link></link></meta></head></html>

カテゴリ分けやソートができるjQueryプラグインMixItUp

mixitup.kunkalabs.com Get startedから記述が入手できる。 MixItUpのjQueryはCDNがある。 デモはこちら http://efu.sakura.ne.jp/web/mixitup/ <html lang="ja"> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></link></meta></head></html>

カテゴリ分けをアニメーションで見せるjQueryプラグインfreamework.js

デモはこちら http://efu.sakura.ne.jp/web/freamework.js/ サイトからファイルをダウンロードできる。 code.tutsplus.com HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>framework.js</title> <link rel="stylesheet" href="style.css"> <script src="js/jquery.js"></script> <script src="js/framework.js"></link></meta></head></html>

モーダルウインドウjQueryプラグインFancyBox

FancyBoxはモーダルウィンドウのjQueryプラグイン googlemapや動画等の外部コンテンツも読み込めるFancybox - Fancy jQuery lightbox alternative デモはこちら http://efu.sakura.ne.jp/web/fancybox/ <html lang="ja"> <head> <meta charset="utf-8"> <title>FancyBox</title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>