画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」:phpspot開発日誌
Diapo | a free jQuery slideshow by Pixedelic 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」。 様々な切り替えエフェクトがあって、画像と共に動きも楽しむことができます。 キャプションのアニメーションもクールで、ボタンを設置できたりもします。 Youtube動画の埋め込みも可能です。 あとどうやっているのか不明ですが、Youtubeの動画なんかも次のようにスライドショーさせることができてます。 単に写真を配置するよりもこうしたものを使うほうがよりよく写真を見てもらうことができるのかも。 インデックスもついていて、カーソルを合わせるとツールチップでサムネイルが表示されるなどのこだわりも見られます。 関連エントリ 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 迫力あるフルスクリーンの背景スライ
背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」:phpspot開発日誌
背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」 2011年05月19日- Documentation: Overlay - Vegas Background jQuery Plugin 背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」。 背景画像を大きくサイトに使う場合に、単に写真を使ってもカッコイイのですが、ドットパターンを合成してよりカッコよくすることが出来ます。 その昔、Photoshopで画像にテレビに写ったような走査線を入れるようなプラグインが流行ったりしましたが、そういう処理は今やjQueryでやる時代のようです。 大きい写真を背景に使ったデザイン。 画像が小さくてもブラウザサイズに応じて引き伸ばしてくれる機能もついてます。 拡大してみると、まぁ
背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」:phpspot開発日誌
背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 2011年04月25日- jQuery Backstretch by Scott Robbin 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 大きな写真等を背景にしていると、ブラウザ幅によって折り返されたりしてかっこ悪くなってしまいますが、このプラグインを使えばブラウザ幅に応じて自動伸縮してくれます。 使い方はプラグインを読み込んだ後、次のように１行書くだけで実装できます。 <script type="text/javascript"> $.backstretch("http://farm3.static.flickr.com/2443/3843020508_5325eaf761.jpg"); </script> 背景に大きな画像を指定し
15 Hand-Picked Navigation Menus For your Website - CSSReflex
Navigation menu is an essential part of a website, here i have collected the best navigation menus from very simple XHTML and CSS to complicated and advanced jQuery, CSS3 and MooTools navigation menus. Be sure to bookmark this site for later use! Hope you will like all of them. Subscribe to the feed if you would like to be informed for the latest posts. You may also be interested in one of these
CSS3が非対応なブラウザでも利用できるようにするツールのまとめ
Modernizr [ad#ad-2] ツールの概要 JavaScript ドキュメント 利用できるプロパティ @font-face border-image border-radius box-shadow text-shadow opacity Multiple backgrounds CSS Animations CSS Gradients など CSS3 PIE ツールの概要 ビヘイビア スクリプト(htc) デモページ 利用できるプロパティ border-radius box-shadow border-image multiple background images linear-gradient as background image
ブラウザに分かりやすい通知を送れるスクリプト色々:phpspot開発日誌
あけましておめでとうございます。 今年も淡々と更新をしていきます。よろしくお願い致します。 今年一発目のエントリはブラウザに分かりやすい通知を送れるスクリプトを色々とまとめてみました。 jNotify ページ全体がグレーアウトし、メッセージが強調表示されます。 他の操作がしばらくできないので、確実にメッセージを読んでもらえるようにできます。 アイコンの変更や、メッセージにHTMLを使うことも可能。 Notimoo ページの右上なんかにフェードインしながらブロックをアニメーション表示させられるJSライブラリ。 複数メッセージを連続して出すことが出来ます。 jQuery Notify bar Twitterの通知バーっぽいＵＩでユーザ通知できるjQueryプラグイン。 これも非常に分かりやすい通知が行えます。 jQnotice 吹き出しっぽいデザインで通知が行えます SlideNote 指定位
word-break:break-allをFirefox等でも実現するjavascript - Webtech Walker
最近やたらとURLなどの文字列が折り返されない現象で頭を悩まされます。IEとSafari3以降はCSSでword-break:break-allを指定すれば折り返してくれます。Firefox3はハイフン(-)やスラッシュ(/）があればそこで折り返すのですが、半角英数のみだと折り返してくれません。word-break:break-allと少し挙動が違うようです。Firefox2はハイフン等の記号があっても折り返さず、突き抜けてしまします。 to-RさんがFirefoxとOperaでword-break:break-allを実現する「wordBreak.js」を公開していますが、tableだけにしか適用されずFirefox2をサポートしていないので、自分で書いてみました。（追記：ソースをgistにあげました） wordbreak.js for jQuery — Gist IEとFirefox2
操作に連動させて分かりやすくクールにメッセージ表示させるjQueryプラグイン「MessageBar」:phpspot開発日誌
操作に連動させて分かりやすくクールにメッセージ表示させるjQueryプラグイン「MessageBar」 2010年12月21日- MessageBar ? just another jQuery plugin 操作に連動させて分かりやすくクールにメッセージ表示させるjQueryプラグイン「MessageBar」。 エラーや何かメッセージを表示したい場合、一番分かりやすい例としてalertがありますが、なんとも味気ない感じになってしまうのは否めません。 MessageBarプラグインを使えば、指定したブロックエレメントの上部に分かりやすくアニメーションしながらクールにメッセージを表示できます。 デザインが色々と選べるのもこのプラグインの特徴です。 半透明で要素にオーバーレイして表示 角丸のウィンドウっぽいバーをスライドアニメーションしながら表示 シンプルですが落ち着いたデザインのバーを表示
HTML5でコーディングしたページでjQueryを使うときに気をつけること :: 5509
そろそろHTML5でコーディングする機会も増えてきたりするかもしれませんが、どうしてもブラウザ対応はしておきたいもの。jQueryで（※）要素をごにょごにょする際にちょっとはまったので一応書いておきます。 IE8以下での話ですが、IE8以下でHTML5を利用するときはHTML5の要素にCSSが適用されないので、html5.jsのようなスクリプトをヘッダで読み込ませたりすると思います。 ちなみに僕はわざわざ読み込むのもアレなので、以下のものを毎回貼ってます。 こんな感じでJavaScriptのcreateElementメソッドでHTML5の要素を追加すれば、CSSが使えるようになって見た目もだいたいばっちりになるんですけど・・・ jQueryで $(hoge).append('セクション') とか $(hoge).append([ '', '', // hogehoge '', '' ].j
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
認証がかかっています