webサイトの動きを魅力的に演出する フリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」
webサイトの動きを魅力的に演出する フリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」 デザインだけでなく、独自の動きを取り入れることでwebサイトはより魅力的なものに変化します。今回はそんな時に参考にしたい、webサイトの動きを魅力的に演出するフリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」を紹介したいと思います。 jquery.adaptive-backgrounds.js • A jQuery plugin for extracting dominant colors from images and applying it to its parent 組み込むだけで、webサイトを魅力的に演出してくれるプラグインが揃ってい
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
スマホアプリのような横から出てくるサイドメニューを実装できるjQueryプラグイン
【Sidr】Facebookアプリのようなメニュ... / 【jPanelMenu】横から出てくるサイドメニ... / 【Snap.js】フリック動作で出し入れが可能な...他...全4件
ブロック要素の高さを行毎にあわせるjQueryプラグインを習作する - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 既知の類似プラグインは多数あるこの課題ですが、ちょっと習作してみました。 横並びにレイアウトされたブロック要素の高さを揃えるライブラリです。 なにをしたいのか 例えば、フロートなどで横並びにした要素があって、それぞれの高さを揃えたい時があります。 こんな感じに。この処理をしてくれるライブラリを書いてみます。 書いてみた物 jQuery.lineUp 使い方 例えばこんな要素があるとして <div class="items"> <!-- 異なるコンテンツ量のブロック達 --> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> <div class="item"
[JS]入力するのが楽しくなるアニメーションを備えたフォーム -Fancy Input
フォームにテキストを入力する際、ちょっと面白いアニメーション（5種類）を与えるjQueryのプラグインを紹介します。 colissと入力、そして削除すると、こんな感じです。 Fancy Input Fancy Input -GitHub Fancy Inputのデモ Fancy Inputの使い方 Fancy Inputのデモ デモはFirefox, Chrome, Safari, Operaでご覧ください。 IEはゴメンナサイとのことで、通常通りに入力できるだけです。 デモページ デモではテキストとテキストエリアの2種類があり、エフェクトはそれぞれ5種類用意されています。 ※日本語の入力は対応していないようです、残念。 Fancy Inputの使い方 実装は非常に簡単です。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。
【jQuery】jQueryでパラパラアニメを実現するプラグイン | バシャログ。
ノストラダムスのことも思い出してあげてください。minamiです。 jQueryを使ってちょっとしたアニメーションを作ることも多いかと思いますが、jQuery.animateのようにCSSのプロパティをいじってアニメーションするのに加えてちょっとだけgifアニメのようなことができたらな～ということでjQueryのプラグインを作ってみました。 まずはサンプルをごらんください。 サンプル アニメーションの出来はともかくとして、動いています。STOPボタンを押すと途中で止めることもできます。 しくみ 用意するもの アニメーション用png（スプライト） jQuery※サンプルではv1.8.2 jquery.backgroundpos.min.js jquery.limitAnime.js まずアニメーション用の画像ですが、下記のようにコマを均等な幅で作った一枚の画像を用意します。これを要素の背景画
[JS]木の葉が木枯らしに舞うように軽やかなアニメーションでコンテンツを次々に表示するスクリプト -Windy
画像や見出し・パラグラフなどを配置したパネルを木枯らしに舞う葉っぱのようなアニメーションで次々に表示するjQueryのプラグインを紹介します。 Demo 3: jQuery UI Sliderを使ったタイプ Windyの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.windy.js"></script> Step 2: HTML コンテンツはリスト要素で、各アイテムに画像や見出し・パラグラフを自由に配置できます。 <ul
[JS]指定した要素を抽出して、自動でページ内アンカーのナビゲーションを設置するスクリプト -MagicNav.js
ナビゲーションを抽出 ページ内の移動は、アニメーションを伴ってスクロールします。 MagicNav.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="magicnav.js"></script> Step 2: HTML デモではdl要素でFAQが実装されています。 dl, ulなどに限らず、hxの見出しなどでも構いません。 <h3>FAQ</h3> <dl> <div id="commercial" title="commercial"><dt><strong>よくある質問</strong></dt> <dd><p>回答</p></dd
テキストのサイズを調整し、両端をピッタリと揃えて表示するスクリプト・slabTextをWPプラグインとして日本語環境に対応・WP slabText
ご連絡頂いて、良さ気だったので ご紹介。以前記事にした、テキスト の両端を揃えるタイポグラフィ系 のスクリプト・slabTextを日本語 でも利用出来るようにし、且つWP で利用出来るようにしてくれました。 今年の1月くらいにご紹介したslabTextをWPで、且つ日本語で利用出来る、というプラグインです。slabTextに関しては以前の記事をご参照下さい。 テキストのサイズを自動調整して幅一杯に広げるレスポンシブWebデザイン対応のjQueryプラグイン・SLABTEXT 過去記事でも書いたように、普通に使っても日本語環境で使うのは若干微妙でした。（単語単位で半角スペースを入れる必要があった）これをうまく解消してくれているので需要も結構あるのでは無いかなと思います。 もともと目をつけていたスクリプトだったので日本語環境で利用出来るようになったのはとても嬉しいです。スクリプトの開発者さんは
これは新しい!パネルレイアウトが美しいスライドショー実装デモ:phpspot開発日誌
Responsive 3D Panel Layout | Codrops これは新しい!パネルレイアウトが美しいスライドショー実装デモ。 複数の文字や写真をアニメーション付きで美しく切り替えていくデモです。 Flashはなしで、レスポンシブに動くよう設計されています。とにかくカッコいいので一見の価値があります。 Flashを使わないでも実用的で有用な物がどんどん増えていきますね。 Flashに比べてカスタマイズが容易という点も特筆すべきポイントですね。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル PC・スマホ・タブレットで動くクールなHTML5スライドショー実装ができる「Juicebox」 ページ全体に広がるスライドショーを実装できるjQueryプラグイン「jQSlider」 レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretc
拡大時にアコーディオンのように画像が広がるカルーセルを実装するjQueryプラグイン・Accarousel
クリックで画像を拡大する際に アコーディオンのように広がる カルーセルを実装するjQueryの プラグイン・Accarousel。機能 はシンプルですが、動きが好み だったので備忘録。 カルーセルを実装するjQueryプラグインです。 見た目は普通のカルーセルですが、画像をクリックすると以下のように拡大されます。 なんと言うか、横にブワッと広がる感じ。ブワッと。 頭悪いから上手く言えないのでサンプル見てください。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script type="text/javascript" src="jquery.cjAccarousel.min.js"></scri
視差効果（パララックス）を簡単に導入できるJavaScript「skrollr」
twitter facebook hatena google pocket 昨今流行っている視差効果（パララックス）を導入してみたい人は多いのではないでしょうか。 Prinzhorn/skrollrを利用すれば比較的簡単に導入可能です。 sponsors 使用方法 Prinzhorn/skrollrからファイル一式をダウンロード。 <script type="text/javascript" src="skrollr.js"></script> <script type="text/javascript"> skrollr.init(); </script> <link href="skrollr.css" rel="stylesheet" type="text/css" /> あとはdivの中にdataで高さとエフェクトを指定していきます。 <div data-0="" //高さ0px
PC・スマホ・タブレットで動くクールなHTML5スライドショー実装ができる「Juicebox」:phpspot開発日誌
Juicebox - The Ultimate HTML5 Image Gallery PC・スマホ・タブレットで動くクールなHTML5スライドショー実装ができる「Juicebox」。 HTML5を使い、現在の主要な端末の殆どで動くスライドショーが実装出来ます。HTML5を使っているといえど、IE8でも問題なく動作。 なんかスライドショー入れてみたけどスマホで動かないよ、という残念にも対処可能。 ページ内にそのまま埋め込む他、フルスクリーンでも楽しめます。ナビゲーションも分かりやすい。 スライドショーを実装するものは多いですが、特定デバイスで動かないといった物は今後、論外ということになっていってしまうかも。 ありとあらゆるこうしたライブラリやプログラムがレスポンシブになっていく流れは避けられませんね 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル ページ全体に広がる
要素へのオーバーレイ効果を簡単に実現できるjQueryプラグイン「Simple Overlay」:phpspot開発日誌
要素へのオーバーレイ効果を簡単に実現できるjQueryプラグイン「Simple Overlay」 2012年04月24日- Simple Overlay | A jQuery Plugin For Lightweight, Flexible, and Customizable Overlays 要素へのオーバーレイ効果を簡単に実現できるjQueryプラグイン「Simple Overlay」 ディスプレイをよりリアルに輝いてみせるオーバーレイ効果を簡単に実現できます。$(elem).overlay(options) でOK. 効果は以下の画像のようになります. 画像をディスプレイにそのままうつしたような効果を<img>に適用して画像を綺麗にみせることが出来そうですね。 こういうのが今後も沢山でてきそうですね 関連エントリ アイテムを浮遊させられるjQueryプラグイン「jqFloat」 レス
可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」:phpspot開発日誌
Sweet Tooltip a jQuery & CSS3 Tooltips ? Webstuffshare ? Learn and share. The simplest harmony. 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」 次のような可愛いモダンなデザインのツールチップの実装デモが公開されています。 目立たせたい時や注目してもらいたい場合に使うと効果的ですね。通常のデザインも入っているようなので使い分けられそうです ファイルをDLすればデモのHTMLとCSS, JSが入っているので変更して容易に利用できます 関連エントリ もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 簡単コードで実装＆カスタマイズできるツールチップ実装jQueryプラグイン「Poshy Tip」 シンプルなツールチップ実装ができるj
見逃してない？最近注目されているjQueryプラグイン・JavaScriptライブラリ
Retina.js | Retina graph... / lake.js / Timeline他...全5件 Retinaディスプレイかどうかを判別して、高解像度の画像（@2x）をサーバーにアップしておけば、自動的に呼び出してくれるJavaScriptライブラリ。
要素にフローティング効果を手軽に与えられるjQueryプラグイン・jqFloat.js
画像とかをフワフワ動かすやつです。 指定した要素を、指定どおりに継続 的にサイト内で動かします。CPUの 問題とかもあると思うので多用は 出来ないと思いますが、よく見かけ るといえば見かけるので一応メモ。 オブジェクトにフローティング効果を与えます。キャラクターのあるキッズ、ファミリーをメインターゲットとしたWebサイトなんかと相性良さそうですね。 いろいろと画像が動きます。自動で動くものもあれば、マウスホバーで、クリックでアニメーションがスタートする、なども設定可能みたいです。 見た方が早いですかね。公式デモです。 Demo デモでは画像のみになっていますが、ボックス要素を丸ごと動かしていますので、テキストにしても同じ動作をしてくれます。 IEでも動く。 iPhoneでも動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jq
モバイルサイズになると自動でグローバルメニューをPathのような横スライド式に切り替える軽量jQueryプラグイン・PageSlide Responsive
結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。 これ結構いいんじゃないでしょうか。レスポンシブWebデザインにするとどうしてもナビゲーションが縦長になりがちなのでその不満は解消できるアイデアですね。 PathやFacebookのiPhoneアプリのような横スライドメニューは使いやすいかもしれない。 Pathのようにというか、全く同じじゃないんですが、モバイルサイズになると横スライド式のメニューに変更するjQueryプラグインです。 ちょっといいアイデアですね。プラグインも圧縮版は3KBと軽量です。 タップすると左からメニューがスライドします。 手抜きで申し訳ないんですがサンプルです。 Sample※表示確認はresponsivepxを使うと楽です 実機で重いのは僕が
Index :: Webデザイナーズレシピ
Sample Design Webデザインのサンプルです。 DropDown Navi jQuery を使ったドロップダウンメニューです。 Contents Slider jQuery Cycle Plugin を使ったスライダーです。 Form Validation フォームに入力された値を、送信前にその場でチェックします。jQueryプラグイン使用。 Form UI Elements チェックボックスやラジオボタン、セレクトボックスを画像で装飾！セレクトボックスにはjQueryプラグインを使用しています。 jQuery UI Accordion & Tabs jQuery UI を使ったアコーディオンとタブです。 Box Equal Heights コンテンツの量によって、バラバラだったボックスの高さを jQuery で揃えています。 Masonry jQueryプラグイン、Mason
テキストの量に応じてtextareaが自動でリサイズするようにできるjQueryプラグイン「Autosize for textarea」:phpspot開発日誌
テキストの量に応じてtextareaが自動でリサイズするようにできるjQueryプラグイン「Autosize for textarea」 2011年11月14日- jQuery Autosize for textarea elements テキストの量に応じてtextareaが自動でリサイズするようにできるjQueryプラグイン「Autosize for textarea」 次のようにテキストを入力するとちょうどテキストにフィットするようにtextareaのサイズが変わります。最初からあまり大きくしたくないけどスクロールさせたり利便性を損なうのは嫌、という場合に使えます。 この手のプラグインは過去にも紹介しましたが、jqueryプラグインなので、必要プラグインを読み込んだら、$('textarea').autosize(); のように初期化しちゃえば使えちゃうというのもいいですね jQue
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
