CSSスプライトをフェードアニメーションさせるJQueryプラグイン「hoverfade」の使い方 | 株式会社WEB企画
マウスオーバー時にフェード処理をさせるJQueryプラグインは沢山あります。シンプルで実装が簡単なものからアニメーションの細かい設定が出来るものまで様々あります。 しかし、これがCSSスプライトで作ったコンテンツに対してとなると、作りが大きく変わってしまうので、imgタグに属性付けをするようなタイプのJQueryプラグインでは対応できない・・・ そこで今回はhoverfadeというJQueryプラグインを使用させていただき、CSSスプライトで作ったコンテンツにフェードアクションを付与する方法を解説していきます。IE7、8にもしっかり対応しているのでオススメです。 hoverfadeの設定・マークアップ方法 まずは、作製者さんのHPよりjsファイルをダウンロードしましょう。 http://www.danwellman.co.uk/plugin-update-hoverfade-1-0-2/
マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」:phpspot開発日誌
Maskify Slider demos マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」。 画像をマスクでくりぬいて更にその中身の画像を切り替えられるというものです。 元画像 繰り抜き 繰り抜いたり、重ねたり、応用することで様々なことができそうですね 関連エントリ パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 タッチ可能でレスポンシブなスライダー実装「RoyalSlider」 これは新しい円形のスライダーが実装できる「Tiny Cir
モバイルに最適化したjQuery互換の「jqMobi」、バージョン1.1が公開
わずか5kbの大きさしかないモバイルに最適化したjQuery互換ライブラリのjqMobiがバージョン1.1を公開しました。 1.1では、主に以下の改善点があると報告されています。 iOS5以上でのネイティブスクローリング Androidでのチャイニーズキーボード修正 JSスクローラの改善 $().html()が2番目のパラメータとして“cleanup”に対応。destroyイベントのディスパッチ用 setTimeoutの代わりに新しくすぐ実行するための $().asap()ファンクションを実装 DOMノードに対するイベントのバインドとトリガーのための$.bind/$.triggerの実装 小型軽量だが、UIフレームワークやプラグインも jQueryがデスクトップPCからモバイルデバイスまで、あらゆるWebブラウザを対象に開発されているのに対し、jqMobiはjQueryのサブセットとしてW
Useful WordPress Plugins for Web Designer and Developer
2016年6月8日 Wordpress, 便利ツール ブログツールとして大人気のWordPress。Wordpressを使って、WebやIT関連の情報ブログを書いている方も多いと思います。今日はWebデザイナーやプログラマー等の本職＋ブロガーとして働く皆さんの強い味方となるプラグインをいくつか紹介します！ ↑私が10年以上利用している会計ソフト！ Key Shortcut Formatter Key Shortcut Formatterはショートカットキーを表示するのに便利なプラグイン。アプリの使い方などでショートカットキーを説明する時に便利。例えばMacで「貼り付け」を説明するのに、通常「コマンド＋V」と書きますが、このプラグインを使えば コマンド + V と表示できます！ちょっとした違いかもしれませんが、見栄えがよくなりますね。また、画像を使わずCSSで装飾しているので、CSSをいじれ
CSS3を出力するPhotoshopプラグイン「CSS3Ps」 * R4 * Webサービスレビューサイト
Photoshopで作成したオブジェクトをCSS3で出力してくれるプラグイン「CSS3Ps」のご紹介です。 PhotoshopのバージョンはCS3～CS6まで対応しています。 このレビューではCS6を使用しています。 サイトにアクセスし、右上のボタンからCSS3Psをダウンロードします。 ファイルを開くと、Adobe Extension Managerが起動し、インストールが完了となります。 次にPhotoshopを起動し、メニューバーの「ウィンドウ」>「エクステンション」>「CSS3Ps」を選択すると、パネルが表示されます。 オブジェクトを作成して、CSS3を出力したいレイヤーを選択状態にします。 その状態でCSS3Psのパネルをクリックします。 （複数のレイヤーを選択すれば、それぞれのオブジェクトのCSS3が吐き出されます。） すると、ブラウザが立ち上がり、自動的に割り当てられたURL
Dreamweaverの拡張機能まとめ
Dreamweaver用の拡張機能をまとめました。 便利なものばかりなので、ぜひお役立てください。 タグ挿入・文字列変換 コメントを生成して挿入するDreamweaver用拡張機能 <!– /#container –>などのコメントを簡単に挿入できます。 IDやClass名は自動で取得してくれます。 Adobe – Dreamweaver Productivity : Close Tags 閉じていないタグを閉じてくれます。 Adobe – : Adobe Dreamweaver 10周年セミナー：全角・半角変換拡張機能 全角の数字やカナを半角に直したり、その逆もできます。 携帯サイト作成にも便利ですね。 Zen-Coding DreamweaverでZen-codingが使えるようになります。 （CS3の方は、Zen Coding for Dreamweaver v0.5を選ぶといいかも
作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.system-act.com/eclipse/aptana.html
http://www.xiii-xiii.com/2012/04/17/%E3%83%91%E3%83%A9%E3%83%A9%E3%83%83%E3%82%AF%E3%82%B9%E5%8A%B9%E6%9E%9C%E3%81%AEjquery%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%BE%E3%81%A8%E3%82%81/