ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル:phpspot開発日誌
Making an Interactive Picture with jQuery | Build Internet IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル 室内のいい感じの写真をベースに家具を紹介するあのIKEAサイトのUIをjQueryを使ってクールに再現しているチュートリアルです。 単純な商品の紹介よりも、より商品を魅力的にみせることに成功していると思うのですが、これを自分でもやりたいという時に参考にできます デモページはこちら ECサイトを構築する際等に、いい仕事ができるかもしれませんね。 関連エントリ オシャレなECサイト構築用のWordPressテーマ３０ PR: 全部入りECサイトを安価に構築できる「Live Commerce」が素晴らしい！ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ
レイアウトに関する強力なjQueryプラグイン６つ:phpspot開発日誌
6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C
スクロール位置に応じて注釈表示が可能なｊQueryプラグイン「SmartScroll」:phpspot開発日誌
SmartScroll スクロール位置に応じて注釈表示が可能なｊQueryプラグイン「SmartScroll」 スクロールバーが長いとどの位置に何があるかっていうのを知りたくなりますが、SmartScrollを使えば次のように、この位置にこんなことが書いてあるよ、を示すことが可能。 使い方次第では長ったらしい文章も分類して分かりやすく表示することができそうですね。 注釈だけじゃなくてデザインも色々と変更できるみたいです。 注釈を付ける部分も何がいいって実装が簡単な点。 ちゅうす役をつけたい位置に次のようにマークアップしておけばいいっていうのはお手軽ですね 上記コードで次のように表示 スクロールバーも次世代に。ｊQueryが出来ることをどんどん拡張していってくれますね。 本当にjQueryは偉大です。 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「deskt
diagonalFade : A jQuery plugin
is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you're off and away. diagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern bro
[JS]jQueryのプラグイン33+1選 -2011年2・3月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 MobilySlider 軽量ながらも高性能なコンテンツスライダー。 jShowOff さまざまなオプションを備えたコンテンツスライ
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
サイトの使い方をその場でアニメーションしてチュートリアルさせられる凄いjQueryプラグイン「Embedded Help System」:phpspot開発日誌
サイトの使い方をその場でアニメーションしてチョートリアルさせられる凄いjQueryプラグイン「Embedded Help System」 2011年01月20日- Embedded Help System サイトの使い方をその場でアニメーションしてチョートリアルさせられる凄いjQueryプラグイン「Embedded Help System」。 これはかなり便利かもしれません。クリックすると、その場でマウスポインタが現れ、アニメーションと吹き出しでサイトの使い方を教えてくれちゃいます。 普通は、こうして次にああして、と文書での説明になりますが、これだとビジュアルに視覚的に分かるということで非常に分かりやすいものが作れますね。 デモページで左カラムの「How to...」の下にあるメニューをクリックで確認してみましょう。 更に、アニメーションだけではなく、ＵＩの上に、[ 1 ] [ 2 ] [
最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」:phpspot開発日誌
最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」 2010年12月06日- jQuery Apple Effect 最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」。 最近Appleのサイトを見たことがある方なら分かると思いますが、最初に1枚の画像を表示しておいて、ナビゲーションなんかは少し待たせて、フェードインしながら表示するというカッコいい効果を作れます。 最初に1枚の画像を表示 フェードインしながらナビゲーションを表示する こちらのデモで動きを確認 実装は1行。 $('#target').appleEffect(); オプションを渡すことでアニメーション開始までの時間を設定したり、コールバック関数を指定できたりします。 ちょっとめんどくさそうなこの機
jQueryのプラグイン「Page Scroller」を商用利用でも無料に変更しました：更新- 3.0.7
当サイトで配付しているページ内をスムーズにスクロールできるスクリプト「Page Scroller」をバージョンアップ（3.0.7）して、商用利用でも無料に変更しました。 スクリプトは当サイトでも下記のキャプチャのように、いろいろな箇所に利用しています。 簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 [ad#ad-2] 3.0.7の変更点 スクリプトのライセンス スクリプトのダウンロード 3.0.7の変更点 主な変更点は、下記の通りです。 3.0.7 ライセンスが変わりました。 詳しくは、「スクリプトのライセンス」を参照ください。 スクリプトのライセンス ライセンスを下記のように変更しました。 変更前： 表示 - 非営利 - 継承 2.1 日本 変更後： 表示 - 継承 2.1 日本 使用条件 上記のライセンスに従い、個人でも商用で
Dynamic FAQ Section w/ jQuery, YQL & Google Docs
In this tutorial, we are making a dynamic FAQ section. The script, with the help of jQuery & YQL, will pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers. The best aspect of this solution, is that you can change the contents of the FAQ section from within Google Docs - just edit the spreadsheet. You can eve
[JS]ページ遷移にフェードやスクロールのアニメーションを加えるスクリプト -Pageswitch
リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。 デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="//coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> [ad#ad-2] JavaScript PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。 $(document).ready(fun
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://daily.d3js.info/?p=296
Loading...
クールなドアノブ風の％グラフを描画できるjQuery Knob:phpspot開発日誌
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
