[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It
アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src='js/css3-animate-it.js'></script> </body> Step 2: HTML HTMLはまずは、通常通りに各エレメントを配置します。 <div> <h2>見出し</h2> </div> 親要素に「.animat
jQuery maphilight documentation
maphilight applies to images with a 'usemap' attribute, and outlines the areas defined in their map on mouseover. It provides a single jQuery function: $('.foo').maphilight() This would hilight every image with a map on the page: $('img[usemap]').maphilight() Demos The simple demo (with awful art, and examples of data attributes) A map of the world A map of the USA A few feature-demonstrations Plu
[CSS]画像やボタンなどのクリック・ホバー時にCSS3アニメーションを簡単に与えることができる -All Animation
画像やボタンなどの要素にclassを与えるだけで、さまざまな面白いCSS3アニメーションを利用できるスタイルシートを紹介します。 トリガーにjQueryを使うことで、クリックやホバーなどのアクションでも簡単に利用できます。 All Animation All Animation -GitHub All Animationのデモ All Animationの使い方 All Animationのデモ デモでは数多くのCSS3アニメーションが楽しめます。 ほんの少しですが、gifアニメーションにしてみました。 ぶるぶる震えて拡大して、フェードでスライドして、ぱたっと開いて、ぷら〜んと落ちます。 実装できるアニメーションの一覧 All Animationの使い方 アニメーション自体はCSSで、クリックなどのトリガーにjQueryを使用します。 もちろん、ホバーなど他のアクションを利用することもでき
【※注: 2023年現在開発終了】受託案件で活躍しそうなWordPressメールフォームプラグイン「MW WP Form」を使ってみた
2023年9月現在、MW WP Form の開発はすでに停止しています。 新規での導入は行わないようにしてください。 詳細は、開発者のキタジマさんご自身も出演されているYouTubeチャンネル hook wp_ の放送にてご確認ください！ WordPressでメールフォームが必要なとき、 ブログとか、簡単でいい時はContact Form 7 コーポレートサイトで、一般の問い合わせを受ける程度ならTrust Form 入力項目が細かくてフロントに凝りたいときや、カスタムフィールドとかと連携させて投稿内の情報をフォームに反映させたい場合はプラグインを使わず外部のPHP製メールフォームを埋め込み という風に使い分けています。 そこに、フォームプラグインの第三極が現れました！ ことのきっかけは、使用ケースの多いロリポップやhetemlと、Trust Formの相性が今一歩なことにはじまります。
個別のHTML, CSS, JS, PHPを追加・管理できるプラグイン -CSS & JavaScript Toolbox | コリス
WordPressで特定のページだけ個別のスタイルシートやスクリプトを使いたい！ しかも1ページだけでも複数のページにも適用する場合がある！ そんな要望を叶えてくれます。 投稿記事、固定ページ、カテゴリページ、カスタム投稿記事に、個別のHTML, CSS, JavaScript, PHPのコードを追加でき、一元管理もできるプラグインを紹介します。 CSS & JavaScript Toolbox CSS & JavaScript Toolbox -WP Plugin Directory 以前、紹介したCustom CSS and JSは記事や固定ページごとにそれぞれ個別のCSS, JavaScriptの外部ファイルやコードを追加できるプラグインで、これは手軽に利用できて便利ですが、今回紹介するのはそれより高機能。 まずは、その画面をご紹介。 当ブログにインストールした画面です。 左パネルで
プラグインまとめ20選 | 株式会社LIG
1月が終わってしまった・・・・・ どうも正月が恋しい段田です。 今回はWordPressサイトを構築している時に役に立つプラグインを紹介したいと思います。タイプ別で分けて紹介します。 目次 デバッグ系プラグイン 記事操作系プラグイン パーマリンク系プラグイン データ移行・操作系プラグイン その他 デバッグ系プラグイン WordPress構築時にWordPress内の情報を確認したい場合に利用すると便利なプラグインです。 Debug Bar 開発時のデバッグで利用するとても有名なプラグインです。パラメータ情報やエラー情報を確認できたりします。 また、このプラグインの拡張用プラグインもいくつかあるので、多機能です。 必須プラグインと言っていいでしょう。 Debug Bar Debug-Bar-Extender 先ほど紹介したDebug Barを拡張するプラグインになります。利用するときはDeb
[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars
最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 Slidebarsの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。 <head> ... <link rel="stylesheet" href="slidebars.min.css"> <head> <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="slidebars.min.js"></script> </body> St
とりあえずjQueryのプラグイン作ってみる | Web | position: absolute;
このエントリーはjQuery Advent Calendar 2013の18日目になります。 jQueryのプラグインといえば何かしらお世話になっている人がほとんどだと思いますが、自分で作成するというのもできるのでとりあえずサクッと作ることができる範囲で紹介します。 という導入ですので、比較的軽い内容になりますー。 jQueryプラグインを作る？ 別に作って公開して世界中で使ってもらえという話ではないです。たとえば自分や会社内でよく利用する機能とか、比較的jQeryを利用したJavaScriptのプログラム群が大きくなってきたという時にプラグイン化してしまえば、他の機会に使いやすくなったり、意図せず他のプログラムに影響を与えてしまうということが避けられたりとメリットが結構あります。 プラグイン化するというのはパッケージにしてしまうということなので、プログラム群から独立して活用できますし、オ
qTip - The jQuery tooltip plugin - Home
About qTip2 is the second generation of the advanced qTip plugin for the ever popular jQuery framework. Building on 1.0's user friendly, yet feature rich base, qTip2 provides you with tonnes of features like speech bubble tips and imagemap support, and best of all... it's completely free under the MIT/GPLv2 licenses!
jQueryでフリック／スワイプ付きの自動再生スライドショーを作成する実験｜BLACKFLAG
前回の記事で、iPhoneやiPad、Androidなどに加えてPCでも動作する フリック／スワイプ動作UIをjQueryで実装する方法を紹介しましたが、 前回の単純なフリック／スワイプのUI動作に加えて、 自動で次の画像に切り替わるスライドショー動作と メインビジュアル部分にNEXT／BACKのボタンを追加したパターンでの 画像ギャラリーを作ってみたので紹介してみたいと思います。 jQueryでフリック／スワイプ動作付きの自動再生スライドショーを作成する実験 まずは動作サンプルから。 別枠で表示する場合はこちらから 一定の間隔で自動で次の画像に切り替わります。 画像の切り替えはサムネイルクリックの他、メインビジュアル部分の左右にあるNEXT／BACKボタンと メインビジュアル部分をフリック／スワイプすることで切り替えることが可能になっています。 メインビジュアル部分にマウスオーバーしてい
エレメントを立体的に回転させられるjQueryプラグイン「Vortex」:phpspot開発日誌
jQuery Vortex エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 製品画像などを動きをつけて回転させるなどの用途に使えそうです。 スピードの調整ができたり、奥行きなんかもパラメータで自由に調整できるので、平面的に回転させることもできるっぽい 関連エントリ スプライトアニメーション作成用jQueryプラグイン「Phantascope」 3Dのキューブのアニメーションで迫力あるエフェクトを付けられるjQueryプラグイン「HexaFlip」 アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」 CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」
ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」:phpspot開発日誌
jQuery.Shapeshift ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」。 最初に一度出して終わりなレイアウトではなくて、ユーザがドラッグ＆ドロップでレイアウトを変えられるプラグインです。 ドラッグ中もアニメーションして動きがなかなか面白いです。 関連エントリ Pinterest風のWordPressテーマ集 Twitter,Facebook,YouTube,PinterestのRSSフィードURLまとめ PinterestのPinIt機能実装jQueryプラグイン FacebookやTwitterの内容をまとめてPinterest風に表示できるPHPアプリ「Infinite-social-wall」
今このブログで使ってるオススメWordPressプラグイン24個の備忘録。
最近、WordPressの 事もあまり書く機会がなくなっていたので、たまには書いてみようかと思いまして、とりあえず、今このブログで使っている『WordPress プラグイン』をすべて挙げてみようと思います。 …というか、改めて挙げると、ぼくはやっぱり WordPress のことなんかちっともわかっちゃいないな…(･_･; まぁ、いっか。 ということで、今この『ノリロウ戦記』で使っているプラグインはこんなものたちです。 合わせて、参考にさせていただいた記事を掲載しておきます。ありがとうございます。(○´―`)ゞ｡o ○ WordPressでまずは最初に入れておきたいプラグイン なんだかよくわからないけど、WordPressをインストールしたら、まずはとりあえず入れとけと言われた（誰ともなく）ので入れているプラグインたち。 1. Akismet WordPress › Akismet « Wo
jQueryのanimateを使ったアニメーション
今回はjQueryのanimateを使って、要素をアニメーションさせる方法を試してみようと思います。 本当はCSSのアニメーションだけで済めば良いのですが、特にIEを考えると難しいところです。そこでjQueryを使っての基本的な方法をおさらいしておきたいと思います。 書き方 まずanimateの書き方ですが、このような感じ。 animate(params, [duration], [easing], [complete]); animate(params, options); 2通りありどちらの書き方でも動きます。 1つめの書き方はそれぞれ引数を指定する方法で、2つめは連想配列で指定できるようになっています。今回は2つ目の連想配列の方法で説明していきます。 params ここには、アニメーションさせたいスタイルを書きます。 $('#btn01').click(function(){ $('
Photoshopでよく使うパーツをどのドキュメントでも利用できるようにするプラグイン -Pixel Dropr
Pixel Dropr 簡単に機能を説明すると、アイコンやパーツなどよく使うエレメントをリフィルと呼ばれるセットにし、Photoshopでどのドキュメントを開いても呼び出せるプラグインです。 上記のサイトでは動画も公開されています。 インストールしてみた！ Pixel Droprは有償のプラグインで、無料版のRefill Readerもあります。二つの違いは、オリジナルのリフィルを作成できるかできないかです。 上記はとりあえず無料版のRefill Readerです。 無料版のRefill Readerは配布されているリフィルを利用することができます。 リフィル配布サイト 配布サイトへはRefill Readerのパネルの左から2番目のボタン「load Refill」をクリックすると行くことができます。 プラグインのインストール Refill Readerのインストール方法を紹介します。 お
jQuery 勉強になったドキュメント - ｊQuery メモ帳
公式なページ jQuery 公式ブログ Official jQuery Blog | New Wave Javascript JQueryのインタラクション jQuery UI IBMの解説 jQuery を使って Ajax 開発を単純化する 日本語 jQuery 開発者向けメモ サンプル中心 jQuery リファレンス Ajaxライブラリの中で、 ニュータイプなJSライブラリjQueryを使ってみよう！ Javascript http://allabout.co.jp/internet/javascript/closeup/CU20071020A/ リファレンス jQuery - StackTrace チューニング http://labs.unoh.net/2007/11/jquerytips.html 後で読んでみたい http://wiki.kyosuke.jp/jqueryjQue
[Mac] QuickLookをもっと快適にする！僕が入れているお薦めプラグインまとめ | Appdrill
Spaceキー を押すだけでプレビューを表示してくれる便利なQuickLookですが、もっと快適にするためにお薦めプラグインをまとめてみました。 Lion、Mountain Lion とOSがアップデートされる度に、標準で表示できる形式も増えましたが、下記に紹介するものを入れればさらに便利になるかもしれません。是非参考にしてみてください！ QLColorCode ファイル中のソースコードをカラーリングしてくれます。100以上の言語に対応するようです。 ダウンロード QLStephen .htaccessファイルや拡張子の無いテキストファイルを表示できるようになります。 詳しくはこちら ⇒ [Mac] .htaccess や拡張子の無いテキストファイルを QuickLook で表示する「QLStephen」プラグイン ダウンロード qlImageSize 画像をQuickLookした時にプレ
![[Mac] QuickLookをもっと快適にする！僕が入れているお薦めプラグインまとめ | Appdrill](https://cdn-ak-scissors.b.st-hatena.com/image/square/63c1c311efe7a38f13fb1832374e546f1c1e88ed/height=288;version=1;width=512/https%3A%2F%2Fappdrill.net%2Fwp-content%2Fuploads%2F2013%2F01%2F517b3ab0a676634c10e9f33fb3c8f91a.jpg)
JavaScript書くときに便利なVimプラギン集 - Life goes on
この記事はVim Advent Calendar 2012の52日目の記事です。 前回の記事はasion_mさんのフロントエンジニアがちょっと幸せになるかもしれないプラグイン作ってます。でした。 良い具合に、フロントエンドのお話続きになっており「流れがキタ！」などと浮かれていたところ、はてなブログが0時から8時まで長時間のメンテに入っており泣きたい気分で一杯になっています。 気を取り直して、エントリを書いていきたいと思います。 さて、自分は一応JavaScriptを書くことで(または書かない事で)オマンマを食べさせていただいてる訳ですが、そういえばあんまりJavaScript書く環境についてブログに書いてないなーと思い、自分が使ってるJavaScript関連のプラギンと設定なんかを紹介していこうと思います。 もちろん、「これは常識でしょpgr」などというものが多数含まれていることは予想され
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home | Shuffle.js
Loading...