2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
生き生きとしたモーションを作れるJSライブラリ、mo.jsがすごい｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは、デザイナーのサリーです。 相変わらずJSに対する苦手意識が拭えない私ですが、自分で動きまでつけられるになりたいですよね。私でも扱えそうなライブラリないかな〜と探していたら、「mo.js」というアニメーションライブラリのDEMOが素敵だったので、チュートリアルを見つつ使い方を勉強してみました。 今回は「mo.js」の紹介をしたいと思います。 mo.jsとは？ mo · js – Motion Graphics For The Web 去年リリースされた、滑らかなモーションを実現できるJSライブラリです。 モーションが感動するほど軽快なので、ぜひDEMOをご覧ください。 DEMO motion graphics for the web 公式DEMOその1、ロゴのアニメーションです。美しいです。 軽快にはずむボールが、ちゃんと楕円になっているところに注目・・・！ bubble lay
2015年総まとめ、jQueryのプラグインとスクリプト100選
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
[JS]一歩進んだレスポンシブ用の画像配置！見せたいエリアを中心に配置を美調整するスクリプト -ResponsifyJS
レスポンシブ用に画像の表示幅・高さを変更する際に、その画像の主題にフォーカスエリアを設定し、そのエリアを中心に画像を表示できるスクリプトを紹介します。 フォーカスエリアは、それぞれの画像ごとに異なる指定が可能です。
![[JS]一歩進んだレスポンシブ用の画像配置！見せたいエリアを中心に配置を美調整するスクリプト -ResponsifyJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/a809e86259b72db3d0f0346bf48e65e038b82a7d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015113001.png)
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
小さい画面で多くの情報を表示する、パネルをダイナミックに3Dでスライドさせるエフェクト -Meny
iOSの方がきれい Menyは3Dトランスフォームをサポートするブラウザで動作し、iPhoneのMobile Safariにも対応しています。 動作に必要なCSS, JavaScriptファイルは、下記からダウンロードできます。 Meny -GitHub
[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider
デモページ：Standard 操作は左右のナビゲーション、矢印キーを使ったキーボード操作にも対応しています。 外観はCSSのテーマファイルで変更することができ、アニメーションの変更、ビュレットのナビゲーション、サムネイルのナビゲーション、フルスクリーンスライダー、video/audioもサポートしています。 デモページ：Using API デモページ：Using Events デモページ：Multiple Sliders ダウンロードファイルに含まれているデモは、Retina用の画像も用意されています。 デモを幅480pxで表示 Ideal Image Sliderの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートを外部ファイルとして記述します。 「default.css」はスライダーの外観を定義したデフォルトのテーマです。 <head> ... <link rel="s
![[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/c553218678c826bd3f32579ee04c4e31354c3815/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091003.png)
[JS]美しいエフェクトを備えた水平タイプのアコーディオンのスクリプト -zAccordion | コリス
滑らかなスライドのアニメーション、繊細なドロップシャドウ、フェードで表示されるインフォボックスなど、美しいエフェクトを備えたアコーディオンのjQueryのプラグインを紹介します。 zAccordion - A Horizontal Accordion Plugin for jQuery 上記ページのスライドは、跳ね返るバウンスのアニメーションになっています。 [ad#ad-2] zAccordionのデモ デモでは、最小限の機能を備えたものから、最大限に拡張したもの、ちょっと面白いものまでが揃っています。 zAccordion — An Inverted Accordion スライドの重ね順を反転させたちょっと面白いデモ。 zAccordionの実装 HTML アコーディオンの各パネルはリスト要素で実装します。 <ul id="featured"> <li> <image src="/im
multiscroll.js - パララックスとはまた違うスクロールエフェクト MOONGIFT
パララックスエフェクトに代表されるようにスクロールで新しい視覚効果を生み出す試みがされています。単純な上下のスクロールでは得られない大きなインパクトを訪問者に与えることができます。 その新しい手法として紹介したいのがmultiscroll.jsです。スクロールによって起こる新しいエフェクトを楽しんでください。 multiscroll.jsの使い方 何はともあれ動画を見るのが一番分かりやすいかと思います。 いかがでしょう。スクロールすると上下から画像がスクロールしてきて合体します。パララックスとはまた違うインパクトがありますよね。 最初の表示はこんな感じ。 スクロールするとコンテンツが上下から表示されてきます。 視覚効果は慣れてしまうと思ったインパクトを与えづらくなります。パララックスイフェクトも最近では印象が残りづらくなっているかも知れません。そこで新しい視覚効果を考えてみるのは面白いと思
[JS]縦長のスクロールページに使いたい便利なスクリプト -isInViewport.js
Demo: Basic div要素が縦に並べてあるだけのページで、最初は背景のカラーが全てグレーです。スクロールするとビューポート内にある2番目のdivのみ明るいグレーになります。 アドバンスではビューポートを上から100px狭く設定し、適用しています。 ※ベーシックにもスクロールするとこの機能が発動します。 Demo: Advanced isInViewport.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="jquery.min.js"></script> <script src="isInViewport.min.js"></script> </head> Step 2: HTML HTMLは特に意識する必要はありません、通常通り実装します。 <div> ...
[JS]ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト -Scroll Depth
ユーザーがページを見た際に、どのくらいスクロールされているのか、また指定した要素がスクロールされて表示されるまでにどのくらいかかるのか、といったデータをGoogle Analytics上で解析できるようにするjQueryのプラグインを紹介します。 実装は簡単、ほんの数行ページに加えるだけです。 Scroll Depth Scroll Depth -GitHub Scroll Depthのデモ Scroll Depthの使い方 Scroll Depthのデモ Scroll Depthは、Universal Analytics, Classic Google Analyticsに対応しており、Google Tag Managerもサポートしています。 対応ブラウザは、Chrome, Safari, Firefox, Opera, IE7-10で、スマフォもiOS, Mobile Opera,
[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify
ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。 デモページ：Optionsからちょい下にスクロール かなり下の方までスクロールすると、二番目のアイテムが上部に貼りつきます。 Clingifyの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.clingify.js"></script> </body> Step 2: HTML スクロールしても上部に固定配置にする
軽量なJavaScriptライブラリをコレクションした・「microjs」 - かちびと.net
microjsは軽量なJSライブラリだけをコレクションしているWebサイトです。5KB以内のスクリプトだけを纏めているようですね。簡単に特徴も書かれています。かなりの数ですが検索も出来るのでそこそこ探しやすのでは無いかと思います。 microjs
2012年末に観ておきたいJavaScript20選: githubでwatch数の多い200件から - memo.yomukaku.net
GithubでJavaScriptのコードとして分類されており、現時点でwatch数の多い200件の中で、実際に使ったことがあり便利または面白いと感じた20件をまとめてみました。 backbone-boilerplate、requirejs、yeoman、lodashのような定番になってきているものから、TimelineJSのような全く汎用性のないものまであります。 d3.js Data-Driven Documents。サンプル集を観るのが手っ取り早いと思います。 pdf.js JavaScriptだけでPDFをレンダリングできる時代です。1年半ほど前にくらべると、かなりPDF製作者の期待通りにレンダリングできるようになってきています。 backbone-boilerplate Backbone.jsを使ったアプリの骨格構造。サーバー側でいわゆるMVC2のアプリを作っている人にはB
この順番で読めばOK！JavaScriptを理解するための14冊 | DECONCEPTER
JavaScriptの書籍はjQueryやサンプル中心のチップス本などを含めると、多数出ており、これから勉強したい人にとってはどれから読めばいいか迷うところだと思います。 今日はここ数年で出た書籍の中で初級者から脱中級者になるまでに読みたい書籍を、この順番で読めばステップアップできるという内容で紹介したいと思います。 STEP1. 初心者へのおすすめはダントツでこれ一択。 初心者向けの内容としてはこれがダントツでおすすめです。内容が易しく丁寧な上にサポートサイトで書籍の内容を動画で説明してくれています。 Amazon.co.jp： よくわかるJavaScriptの教科書: たにぐち まこと: 本 サポートサイトはこちら STEP2. 全体を把握するには十分なボリューム。脱初級者向けにはこの2冊。 2冊とも初級者にとっては少し厳しい内容になっていますが、この2冊が理解できれば後は作りまくる
ウェブページ上にツイートを表示するシンプルで軽量なJavaScript『Chirp.js』
ウェブページ上にツイートを表示するシンプルで軽量なJavaScript『Chirp.js』 Chirp.jsはウェブページ上にTwitterのタイムラインを表示するためのJavaScript。 jQueryなどのライブラリに依存しない単体の超軽量スクリプトで、カスタマイズ性が高く設置も超簡単という、この手のスクリプトとしては非常に優秀なシロモノです。 先ずはスクリプトをダウンロードしましょう。自分で自由に値段を付けて『Buy it!』をクリック。もちろん『0』を入力すればフリーでダウンロードできます。 ダウンロードしてスクリプトを解凍したら、適宜サーバーにアップロードしたら下準備は終わりです。 最も簡単な使い方としては、スクリプトのパスとTwitter名を指定した上でタイムラインを載せたいページの適当な部分（<body>内）に以下の2行を挿入するだけです。 （1行目のスクリプトタグは<he
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クリック時にパーティ風エフェクトを作る「party.js」:phpspot開発日誌
[JS]レスポンシブ対応の画像表示テクニック！見せたい箇所を中心にクロップして表示させるスクリプト -FocusPoint![[JS]レスポンシブ対応の画像表示テクニック！見せたい箇所を中心にクロップして表示させるスクリプト -FocusPoint](https://cdn-ak-scissors.b.st-hatena.com/image/square/89b7f74f30b33e347af5955101ddb9470c5139d7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082501.png)
Sidebar Transitions