Quovolver 特定の要素を一定時間ごとにアニメーションで切り替えるjQueryプラグイン - 酒と泪とRubyとRailsと
Quovolver 特定の要素を一定時間ごとにアニメーションで切り替えるjQueryプラグイン Jun 3rd, 2013 Tweet 例えば検索キーワードを一定時間(秒)ごとにアニメーションで切り替えることで、検索ワードの候補を提示するときなどに便利なjQuery Plugin『Quovolve』の紹介です。 Quovolverのデモ jQueyr プラグイン Quovolverってどんなの？ということ下はDemoページのリンクです。 Webページ内の特定のHTML要素が変化していくので、目立たせたい場所には持って来いですね！ サンプルソース 導入もシンプルです。まずはこちらからファイルをダウンロード。 sebnitu/Quovolver · GitHub HTMLにjavascriptを宣言。
フォームで郵便番号を入れたら、住所を自動入力させる方法[Javascript] | TechMemo
Tweet TweetWEBサイトにお問い合わせフォームなどのフォームを設置することは多いと思います。 例えば、住所を入力してもらいたいときに、郵便番号と住所のフォームを設置したとします。ユーザーとしては、郵便番号を入れて、住所を入れて、と結構面倒に感じると思います。郵便番号を入力したら、住所も自動入力されると素敵ですよね。 とある方から、自身のWEBサイトに設置している注文フォームにこのようなフォームを設置したいと相談されました。しかしながら私はJavascriptは苦手です・・・なので、ネットで色々と調べてみたところ、色んな方が自動入力のフォームを実装するためのソースを公開しているんですね。 ありがたや～と執筆者様の方向におじぎをしながら拝見していたところ、その中でも比較的実装が簡単な方法を見つけたので、シェアさせていただきたいと思います。 jQuery.zip2addrのダウンロード
レスポンシブWebデザインに関しての備忘録 - NxWorld
This Is Responsive わざわざこのエントリーを書かないでも、ここ見れば良いじゃんという気もしなくはないですが...。 レスポンシブなWebデザインに関する情報やツールなどをまとめているリソース集でかなりの量があります。 Responsive Design in 3 Steps | Web Designer Wall viewport、IE用JS、Media Queriesなど、レスポンシブWebデザインを実装する際の基本的な3ステップ。 CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き | Webデザインレシピ Media Queriesの使い方や注意書きをまとめたエントリー。 わかりやすくまとまっているので、これからレスポンシブに挑戦するという方は特に一読してみるといいと思います。 レスポンシブ・ウェブデザインでの C
レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント
先日エントリーした「ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」」の続きで、レスポンシブWebデザイン制作にjQuery Masonryプラグインを利用するための重要なポイントについて詳しく解説します。 サンプル（リンクは２項） 手前味噌ですが、jQuery MasonryによるレスポンシブWebデザインの記事は他にも多く存在する中、実用レベルまで踏み込んでいるのはおそらくこのエントリーだけだと思います。 なお、jQuery Masonryプラグインの基本的な設定方法については割愛してますので、上記のエントリーを参照してください。 １．はじめに このエントリーでは「NHKスタジオパーク」のサイトを参考に、次の内容について解説します。 NHKスタジオパーク まず、カラムレイアウト全体をセンタリングさせるためのCSSの設定について紹介します。 ま
レスポンシブなレイアウトに役立つ２５個のjQueryプラグイン - colopixie
PCやスマートフォンなどに自動的に対応してくれるレスポンシブなサイトに役立つjQueryのプラグインが25 jQuery Plugins to help with Responsive Layoutsにありましたので、紹介したいと思います。 Response.js スマートフォンに最適化してくれるJS Menu to a Dropdown for Small Screens 画面が小さくなると、ドロップダウンのメニューになる Doubletake 画像のサイズを動的に変更してくれる FitText 画面のサイズに合わせてフォントサイズを変更してくれる jFontSize フォントサイズを変更してくれる Elastislide カルーセルメニュー。 スライドショー。 Responsly Blueberry wmuSlider PhotoSwipe FlexSlider Responsive
[JS]派手な演出は無し！レスポンシブ対応のレイアウトを素早く構築するスクリプト -jquery.columns
サイズを変更するとアニメーションでパネルが移動するなどの派手な演出は一切無しで、レスポンシブ対応のレイアウトを素早く提供するjQueryのプラグインを紹介します。 jquery.columns -GitHub jquery.columnsのデモ jquery.columnsの使い方 jquery.columnsのデモ 対応ブラウザは、IE9/10, Firefox, Chrome, Safari, Operaです。 まずは、デスクトップサイズとして幅1,200pxでの表示から。 デモページ：幅480pxで表示 jquery.columnsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.
レスポンシブウェブデザインに本当に役に立つツール・リソース まとめ | tagamidaiki.com
この記事はonextrapixelに掲載された Really Useful Resources and Tools for Responsive Web Design の内容を日本語訳したものです。 レスポンシブウェブデザインは最近まで小さなトピックの1つでしたが、今ではモバイルやタブレットブラウザをデザイナーやユーザーが最大限活かすべく多くのツールがモバイル端末周辺で開発されています。 レスポンシブデザインが小型端末に限られていないのは、最近公開された多くのツールはモバイルやタブレットの世界にターゲットを定め、綺麗で柔軟性に富むウェブサイトを出来るだけ簡単に構築しようとしているからです。 レスポンシブデザインに取り組むとき、ほとんどのデザイナーが考える最初のことは、メディアクエリーです。 この記事では、メディアクエリーの枠を超え、全てのモバイル用、タブレット用、そしてもちろんデスクトップ
[WP]カテゴリーのアイコンを表示するプラグイン「Category Icons」
各カテゴリーに任意のアイコンを設定・表示するWordpress用プラグイン「Catgory Icons」の紹介と日本語化ファイルの配布。 このプラグインは、カテゴリーそれぞれに独自のアイコンを設定することが出来て、 サイドバーのカテゴリーリストや記事のタイトルに設定したアイコンを表示してくれます。 インストール WordPress2.3～2.6.1対応 最新バージョン2.0.7 ※ver2.0.5の翻訳ファイルそのまま使用してても問題はありません。 ダウンロード後展開、wp-content/plugins/にアップロードしたら、有効化する。 日本語化ファイルは、解凍したmoファイルをlanguagesフォルダに入れます。 moファイルのアップロード形式はバイナリで。 2.0.5からプラグインに同胞されたようです。ﾜｰｲ ダウンロード var2.0.7» “category_icons-ja
![[WP]カテゴリーのアイコンを表示するプラグイン「Category Icons」](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ac9732c4f87aa5471cabd33e2d45b5045db503c/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2008%2F05%2Fcategory-icons-300x196.gif){kind=icon}
jqueryでロールオーバー時にふわっと背景を浮かび上がらせるjqueryコード | バニデザノート
JqueryでBoxのロールオーバー時に 背景をふわっと浮かび上がらせるjqueryコードです。 背景としてひとつ多くＢＯＸを取っているのがポイントです。 Js CSS .box a{ display:block; width:100px; height:100px; } .box_ov{ width:100px; height:100px; position:relative; overflow:none;} .box_bk{ width:100px; height:100px; background: gray; display:none;} .box{ width:100px; height:100px; position:absolute; top:0px; left:0px;} HTMLコード
透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた
以前作成した、透明度を利用するだけのロールオーバープラグイン、それを少し使いやすいようにバージョンアップいたしました。 今回は少しカスタマイズしやすいようにしたのと、機能をひとつ追加してみました。 ※追記（09/07/24） 若干修正し、2.1にバージョンアップしました。 （今までのでも問題なく動作します。） ダウンロード プラグインはjQueryと下記プラグインを一緒に使ってください。 opacity-rollover2.1.js 透明度を利用したロールオーバー これは以前と同じ通常の使い方。マウスが画像の上にのると、画像の色が薄くなるロールオーバー。 ■使い方 $('#over1').opOver(); 適応させたいセレクタを指定し、opOver()で適応させる。 ■サンプルプレビュー これだけでも十分使えると思われます。画像を複数用意しなくとも、色の濃い画像を用意するだけで画像が変わ
ホバー時にシャボン玉を飛ばすjQueryプラグイン-jBubbles | memocarilog
リンク要素にカーソルを合わせるとふわーっとシャボン玉が飛ぶ楽しいjQueryのプラグインです。画像を変えればシャボン玉ではなく星やハートでもなんでも飛ばす事が可能です。アイデア次第で色んな物を飛ばせそうですね。 オプションで飛ばすスピードや大きさなどが設定できます。 使用方法は以下です。 jBubblesのサイト真ん中くらいにあるDownloadの”source code”の所からjBubbles.jsのファイルをダウンロードします。 バブルの画像はjBubblesのサイトからダウンロードしてしまいました。 バブルの画像を適当な場所へアップロードします。 ”jBubbles.js”の4行目くらいに”image : “jBubble.png”,”という画像を読み込む箇所があるので、画像をアップしたパスへ書き換えます。 head内で下記を読み込みます。 <script type="t
スクロールバーをデザインするのに使えるjQueryプラグイン「Custom Scrollbar」 | Web活メモ帳
「Custom Scrollbar」はスクロールバーのデザインとスクロール量をカスタマイズできるjQueryプラグインです。 デザイン以外にも、イージング、マウスホイールへの対応など多彩なオプションが設定可能になっています。 OSが変わっても同じ見せ方をしたい場合などに良さそうですね。 詳しくは以下 デモ 多彩なオプション機能 以下のようなオプションが設定可能です。 スクロールの方法（縦か横） スクロール量 イージング量（スクロールを停止した後の慣性の量） スクロールバーの幅と高さ マウスホイールのサポート 使い方 jQueryやjQUery.uiなどのライブラリをheadタグで読み込みます。 <link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> <script src="http://aj
jQueryプラグイン サンプル（画像系）：skuare.net
JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連のjQueryプラグインを紹介しています。 JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」 JSONファイルに画像パスなどのデータが格納されている場合、処理を入れて画像スライダーにするのはそれなりの手間です。 jQueryプラグインのdcdeiv/jsonslider · GitHubを利用することでその手間が少し軽減できるかもしれません。 via：dcdeiv/jsonslider
フォームを設置するプラグイン Contact Form 7[WP] - ミblog : レビューや日常など
2008-05-03 WordPress プラグイン お問合せフォームなどを簡単に設置できるWordPressプラグイン。フォーム設置プラグインは他にもいくつかありますが、Contact Form 7は日本語に対応し、シンプルで使いやすのが特徴です。 Contact Form 7導入方法 ダウンロード → Contact Form 7 (日本語) « iDeasilo ※WordPress2.5.1で動作確認 ファイルをダウンロード 解凍してファイルごとwp-content/pluginsにアップロード プラグインを有効化 Contact Form 7の使い方 設定→Contact Form 7から各種設定を行います。 最初からContact form 1というフォームが作成されているので、そのままカスタマイズするか、新規追加から新しくフォームを作って編集します。フォームは複数作成すること
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
yuga.js についてメモ