2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
jQueryのプラグインを探す時に便利なサイトのまとめ
星の数ほどあるたくさんのjQueryのプラグインから、目的にあったものを探すのはなかなか大変ですよね。そんな時に役立つ便利なサイトをまとめました。 まずは手前ミソで自分がまとめたものから。 これは本当に多大な労力と実際の動作確認もしているので自信をもってオススメできます。 jQueryのプラグイン100選 -2013年総集編 日々チェックしているスクリプトから厳選して一年単位でjQueryのプラグインをカテゴリごとに選出しています。プラグインの半分近くは個別に記事も書いてあります。 jQueryのプラグイン100選 -2012年総集編 jQueryのプラグイン100選 -2011年総集編 jQueryのプラグイン100選 -2010年総集編 jQueryのプラグイン100選 -2009年総集編 jQueryのプラグイン100選 -2008年総集編
【個人メモ】bespoke.jsを使ってプレゼン資料を作成する - Qiita
なんだこのプレゼンは？ と思ったプレゼンをネット上で見かけた。 Build Warsへのリンク JavaScriptのプロダクトをうまい具合にビルドするためのツール、 Gruntとglupを比較したプレゼンだ。 gifアニメが多用されてるし、オサレでカッコイイ。 何使ってこのプレゼン作ってるんだ！？と思って調べてみたら、 このプレゼンの作者が自分で作っていた。 bespoke.jsというアプリだった。 bespoke.jsというプレゼンアプリを早速使ってみたい。 セットアップや、プレゼンのスケルトン作成って めんどくさいのかなと思ったんだけど、yeomanを利用して テンプレを作成する形になってて、 プレゼン作成準備に必要な手間は少ししかなかった。 bespoke.jsを使うまで bespoke.jsをセットアップするのに必要なツールは以下の通り。 node.js yeoman Mac O
jQueryで指定されたイベントの定義場所を取得する方法
jQueryで指定されたイベントの定義場所を取得する方法 セミナー時にHTML上のイベントが指定されている要素から、実際にイベントを指定したコードが書かれているJavaScriptファイルや場所を知りたいと質問を受けました。 調べたところ良さそうな方法があったのでシェアしておきます。 ちょっと動画に取ってみたので、動画でご確認ください。 なにをやっているかというと、まず、デベロッパーツールを開き、検証したい要素を選択します。 次に右クリックして「Add attribute」から適当なidを指定します。今回は「js_debug」というidを指定しています。 次にデベロッパーツールの右上のアイコンからコンソールを開き以下のコードを入力しEnterを押します。 $._data($("#js_debug").get(0), "events"); Object->click->0の順番に開いていき、
Rails 4のturbolinksについて最低でも知っておきたい事
Rails 4のturbolinksについて最低でも知っておきたい事 （追記）turbolinksに関するセキュリティ上の懸念について turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。 高速化は大歓迎なのですが、JavaScriptのイベントの起き方が変わるため、Rails 3までの書き方をしているとまず間違いなく問題が起きます。しかも、Rails 4ではデフォルトの機能ですので、最新版を使いたいなら必ず知っておかなければいけません。 本エントリではturbolinksを使うために絶対に知らなければいけないことを分かりやすく紹介したいと思います。 動作 turbolinksの動作は、すごく大雑把に言うと以下の通りです。 リンクのclickイベントをフッ
クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」
TOP > plugin > クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」 魅力的なwebサイトを実現させるためには、他にはないデザインや動きを取り入れることで、より理想に近づけることができます。今回はそんな魅力的な動きを実装できるフリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」を紹介したいと思います。 （Drop） そのまま利用しても、自分のデザインと組み合わせて使っても、クリエイティブなwebサイトを作り出せるプラグインがまとめられています。 詳しくは以下 scrollReveal.js スクロールするとバーの動きを楽しむことができるプラグイン。個性的なデザインのサイトに仕上げたい時におすすめ。 leas
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
jQuery ジャバスクリプト サンプルダウンロード
jQueryJavaScriptSampleDownloadでは、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ「jQueryプラグイン」をメインに紹介する、Webクリエイター向け情報サイトです。
SVGMagic
div要素の背景画像としてSVGを使用します。 SVGMagicの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="SVGMagic.min.js"></script> </head> SVG画像をPNG画像に変換するのには、PHPを使用しています。 converter.php（ダウンロードファイル一式に含まれています） SVGMagic.min.js内では、配布元のサーバーのファイルを参照してい
吉川徹さん（@yoshikawa_t）の「DOM操作の最適化によるJavaScriptチューニング」問題解説記事 #javascript｜CodeIQ MAGAZINE
吉川徹さんによる「DOM操作の最適化によるJavaScriptチューニング」問題解説記事です。JavaScriptのDOM操作について基本的なパフォーマンスチューニングができるかどうかを評価する問題でした。 チューニングを行うことで、具体的にどういった形のコードになるかを中心に解説していただきましたので、ぜひ参考にしてくださいね！ by 馬場美由紀 （CodeIQ中の人） 吉川徹です。 少し前になりますが、私の方から以前、JavaScriptのパフォーマンスチューニングについての問題を出題しました。今回は、その問題の解説をしていきたいと思います。 また、この問題は、HTML5 Experts.jpとの連動企画となっており、こちらの記事を読んで頂くとおおよそのチューニング方法について理解できるというものになっています。ぜひ、合わせてご覧頂ければと思います。 問題文 あるHTMLファイルに記述
レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」:phpspot開発日誌
VenoBox - responsive jQuery modal window plugin レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 LightBox派生スクリプトは多々ありますが、レスポンシブでクールなフラットデザインで、地図、動画、画像、iframeなどなんでも埋め込めるので、今の時代にかなり使いやすそう。 関連エントリ フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 スワイプできるLightBox実装jQueryプラグイン「Swipebox」 LightBoxはここまで進化したよ「VisualLightBox」
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
チュートリアルを実現するjQueryプラグイン達 - ぽっちぽちにしてやんよ
最近チュートリアルを実現したり，特定の要素をハイライトしたり，用途的に似たようなライブラリがぽこぽこ出てきてどれがいいのか試したのでまとめてみる． Chardin http://heelhook.github.com/chardin.js/ Apache License v2.0 概要 一度に複数の要素に対して，説明を書ける． ステップで実行などはないが，completion handlerで再度実行すればできる． Gmailの新機能で使われたチュートリアル風味． 実現方法はbody直下に黒半透明オーバーレイ要素を重ね，その後ろに説明用のレイヤーを追加する．ハイライトする要素をオーバーレイより大きいz-indexを追加し，上に持ってくる． ハイライトする要素にz-indexがinline styleで付いていると隠れてしまう． 導入方法 css追加
jQueryのフィルタを使った際の実装サンプルと基本的な機能のまとめ
jQueryのフィルターが便利なんですが、 なかなか全部把握出来ないので自分用 にまとめることにしました。マイチート みたいな記事です。フィルターはかゆい ところに手が届く便利なもので、場合 によってはコードも短く済ませること も出来るかもしれません。 というわけでフィルター一覧です。あんまり把握出来てなかったのでこの機会に全部目を通して触ってみました。機能というか、どんな感じで要素を取得出来るか、みたいな内容になります。 しっかり使いこなしてきた人間の書いてる記事じゃないので、もしかしたら解説が間違ってるかもしれません。一応公式のリファレンス見ながらやってますけどそれでも勘違いしていたらご指摘頂けると嬉しいです。 カテゴリごとにjsfiddleで全サンプルを用意してありますのでフォークしてご自身向けに変更して頂ければと思います。 Basic Filter(基本フィルタ)Sample基本フ
SAP、業務アプリ用のJavaScript製UIライブラリ「OpenUI5」を公開。レスポンシブ対応でモバイルデバイスにも
SAP、業務アプリ用のJavaScript製UIライブラリ「OpenUI5」を公開。レスポンシブ対応でモバイルデバイスにも 業務アプリケーション最大手の独SAPは、業務アプリケーションのためのJavaScript製JavaScrit UIライブラリ「OpenUI5」をオープンソースとして公開しました。 OpenUI5は、同社のモバイルアプリケーションなどに用いられているJavaScript製ライブラリ「SAPUI5」の主な機能をオープンソース化したもの。jQuery、CSSプロセッサのLESS、ODataライブラリのdatajsなどが使われています。 ボタンやアコーディオン、メニュー、テーブル、ダイアログと言った部品だけでなく、レスポンシブ対応のグリッドレイアウトなどのレイアウト用部品も含まれており、モバイルデバイスに対応するレスポンシブデザインのUI構築が可能になっています。 JavaS
The 50 Most Useful jQuery Plugins for Frontend Development – Speckyboy
Although there are many JavaScript frameworks available, jQuery has remained the most popular and influential in web design and development. Its main purpose is to simplify the process of writing complex JavaScript functions by bundling them into methods that can be called with just one line of code. This makes it lightweight and easy to extend with free plugins for almost any functionality you ca
その場で編集／実行できるシンタックスハイライター jQuery プラグイン | CYOKODOG
Ex Code Prettify は、Google Code Prettify をベースとしたシンタックスハイライトを行う jQuery プラグインです。ソースコードの編集／実行をその場で行う機能や、外部 CSS / JS ファイルの動的インポート機能等を使用して、jsdo.it や jsFiddle のようなライブデモ機能を自サイトに実装することができます。 変更履歴 v0.5.2(2014-11-17) 外部 css, js ファイルの読み込み指定時、それらファイルが読み込まれた後にコードが実行されるように修正しました。 v0.5 JavaScript のコード内で 自身のデモエリアを格納した$DEMO、API オブジェクトを格納した API という変数を参照できるようにしました。 code / demo を横並びレイアウトで表示した際、画面幅に応じたレスポンシブレイアウトになるように
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
class.pm
Netzgesta.de • Advanced Visions
webdesignandsuch.com
