背景画像を全エレメントにブラーをかけつつ摘要できるjQueryプラグイン「blur.js」:phpspot開発日誌
blur.js 背景画像を全エレメントにブラーをかけつつ摘要できるjQueryプラグイン「blur.js」。 次のように、全体の背景をベースに、ブロックにブラーがかかった背景画像を設定するプラグインです ぼかしのレベルは制御可能です。 数年後、WEBページってどんな感じになってるんだろうって、こういうのを見るといつも思ってわくわくします 関連エントリ 画像ホバー時に２０種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」 時間の入力を楽にすることが出来るjQueryプラグイン スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」
[JS]スムーズなアニメーションで地図（大きい画像）をダイナミックにスクロールさせるスクリプト -CraftMap
地図のような大きい画像を指定サイズにクリップし、クリックやドラッグ操作でスムーズにスクロールさせるjQueryのプラグインを紹介します。 CraftMap [ad#ad-2] CraftMapのデモ CraftMapの実装 CraftMapのデモ デモは二つあり、ページ内の一部に配置したものとウインドウいっぱいに配置したものがあります。 地図のスクロール方法は3種類の操作が可能です。 ナビゲーション（左のパネル）の各ラベルをクリック 地図上のマーカーをクリック 地図をドラッグ 各ラベル・マーカーをクリックすると、それに対応した付加情報をパネルで表示します。 Demo 2: ウインドウいっぱいに配置 [ad#ad-2] CraftMapの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="js/jquery.js" type="
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
jQuery初心者向けの基礎をしっかり学べるサイト
【ｊQueryって何からjQueryの基本まで】... / 【jQueryの使い方から動作デモまで】jQue... / 【jQueryでのアニメーションからイージングま...他...全6件
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
複数枚の画像をマウスの動きに対応してアニメ風に立体的に動かせるjQueryプラグイン「zLayer Plugin」:phpspot開発日誌
zLayer jQuery Plugin - Orientate Elements | Devin R. Olsen Web Developer 複数枚の画像をマウスの動きに対応してアニメ風に立体的に動かせるjQueryプラグイン「zLayer Plugin」。 マウスの動きに対応するということもあって、広告等、注意を引きたいところに活用できそうです。 デモページ マウスの動きに反応してそれぞれ動きます。 ちょっとデモの画像が微妙な気はしますが、使い方次第ではクールな演出が可能ではないでしょうか。 関連エントリ ブロック要素の背景だけアニメーションさせて注意をひけるjQueryプラグイン
たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」:phpspot開発日誌
Pina たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」 pina(20, 'blue', 'classname1'); のようにするだけで角丸が実現できます。 IE6のような古いブラウザにも対応しているのが特徴。 CSS3になって対応ブラウザでは便利になったとはいえ、クロスブラウザ対応というと１行では実現できないので、利用を検討してみてもよさそうです。 pina 関数の第一引数の値で角丸のradiusサイズを指定できます。 関連エントリ CSSで角丸テクニック２５ IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル
IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」:phpspot開発日誌
IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック２５ 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す
[JS]実装のロジックを理解して、自分に適したツールチップを作成するチュートリアル
ツールチップのスクリプトやプラグインは、数多くリリースされています。 ここではjQueryを使用したツールチップをどのようなロジックで実装するかを解説したチュートリアルを紹介します。 Simple Tooltip w/ jQuery & CSS デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 1. マークアップ -HTML 2. スタイル -CSS 3. エフェクト -jQuery 4. スクリプトのロジック 5. 注意点 1. マークアップ -HTML マークアップをする際に気をつけることは可能な限りシンプルするのと同時に、さまざまなシナリオに対応できるよう柔軟にすることです。 メインとなるa要素にはツールチップを表示するために、class名「tip_trigger」を記述します。また、ツールチップのコンテンツを配置するspan要素には、class名「tip」を記述
jQueryとCSS3、HTML5でここまで出来るホバーインタフェース:phpspot開発日誌
WanderWall ? A jQuery, CSS3 & HTML5 Hover-Based Interface | AddyOsmani.com | Where User Interface Ideas Grows jQueryとCSS3、HTML5でここまで出来るホバーインタフェース。 jQueryで様々なことが出来るようになっているのはご存知だと思うのですが、更にCSS3とHTML5も組み合わせるともっとすごいよ、という１つのデモです。 まだまだインタフェースは進化するのだな、という可能性を感じるものになっているので一回見ておいたらよいかも。 WanderWallのデモ とにかく実際にHTML5対応のブラウザで見てみもらうのが一番分かりやすいです 上のメニューにカーソルを合わせると画面がアニメーションしながらクールに切り替わります。 HTML5ブラウザがデフォルトになり、こうした技
WordPressで困った時に役立つお助けコード8つ
2013年3月23日 Wordpress WordPressでコーディング中、「理由はなんだかわかんないけどちゃんと動作してくれない！」なんて事がありませんか？私は度々ありました。その都度ググって解決策を探していたのですが、そのお助けコードメモがEvernoteに結構たまってきたので記事にしてみます。よくわからないけど動かない！という時に試してみてください！ ↑私が10年以上利用している会計ソフト！ お助けコードを使う前に 今まで動いていたのに突然動かなくなった！そんな時は慌てず、とりあえず以下を確認してみてください。プラグインが原因で動作しなくなる事が多いですね。 有効化しているプラグインをすべて無効化して試す </head> の前に <?php wp_head(); ?> があるか </body> の前に <?php wp_footer(); ?> があるか PHPコード（特にif構文
[JS]jQuery初心者もOK、サイトにアニメーション効果を取り入れるチュートリアル
jQueryを使用して、サイトにフェードやスライド、表示・非表示、タイマーなどのアニメーション効果を取り入れるチュートリアルを紹介します。 Super-Easy Animated Effects with jQuery チュートリアルは英語ですが、使用する関数、ソース（HTMLとJavaScript）が必要最小限でまとめられており、デモページ（シンプルすぎかも）もあるため、英語が苦手な人でも大丈夫だと思います。 下記に、チュートリアルをいくつかご紹介。 アニメーションでフェードイン・フェードアウト <textarea name="code" class="html" cols="60" rows="5"> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascr
[JS]jQueryを使用したプリロード（画像の先読み）用のスクリプト
ロールオーバーで画像を変更する際に使用するプリロード用のjQueryを使用したスクリプトを紹介します。 Preloading Images with jQuery and JavaScript ロールオーバー時に表示する画像をその都度ダウンロードして表示すると時間のギャップが生じます。その時間の遅れを避けるために、画像を事前にバックグラウンドで読み込みます。 JavaScript <textarea name="code" class="html" cols="60" rows="5"> (function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length;
[JS]カラムの高さを揃える多機能なスクリプト -Equal Column Heights
カラムの高さを単に揃えるだけでなく、アニメーションで揃えたり、指定した値に揃えることができるスクリプトを紹介します。
[JS]後発だけに一味違う高性能なツールチップのスクリプト -Poshy Tip
Poshy Tip - jQuery Plugin for Stylish Tooltips デモページ ツールチップのスクリプトは既に多くリリースされていますが、このスクリプトはかゆいところに手が届くような便利な機能が豊富に備わったものとなっています。 まず、一番の特徴となるのは、背景に画像を使用している点です。画像はサイズが1024x768pxの大きなもので、これによりツールチップの拡大縮小表示が可能となっています。 また、画像を変更することで、好みの背景に簡単に変更できます。
[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider
クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。 標準的なスライドからフェードまで多彩な表示を用意。 各パネルへの直接リンクが可能（ブックマーク可）、ブラウザの「前へ」「次へ」をサポート。 パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。 自動再生でスライドショーも可能。 ループ再生も可能。 セットアップは簡単で、カスタマイズも簡単。 IE6+, Fx, Chrome, Safari, Opなど主要ブラウザの
jQueryを使ったストレッチする背景画像 – creamu
背景に大きくビジュアルを使いたい。 そんなときに参考になるのが、『Image Now』。jQueryを使った、背景画像がストレッチするサイトです。 jquery.backstretch.jsが使われていて、width:1024pxの画像が、ブラウザサイズに合わせて伸縮しますね。Flashサイトでなくてもこれができるのはいい感じ。 画像がランダムに切り替わるんですが、それはfunctionでJavaScriptが書かれています。 デザインも設計もクールなサイトなので、一度見てみてください。 Image Now LADの新作のレザーバッグを購入。前のが破れてしまって新しいのがほしかったので、ちょうどいいのが見つかっていい感じ。ふとボッテガ ヴェネタのも気になって見に行ったんだけど、結構するしまだいいかな、と見送りました。でもデザインも質もものすごくいいですね。 あとFenderロゴ入りの帽子も
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 - かちびと. net
IDEA * IDEA
