[JS]サイズが不明でバラバラな複数の画像を指定サイズにフィットさせて配置するスクリプト -ImageFitサイズが不明でバラバラな複数の画像を指定サイズにトリミングして配置したり、画像全体が収まるように配置することもできるjQueryのプラグインを紹介します。 ImageFit ImageFit -GitHub ImageFitのデモ ImageFitの使い方 ImageFitのデモ デモはサイズがバラバラな画像が6枚、それぞれ同じサイズの矩形に配置します。 下のキャプチャは同じサイズの画像のように見えますが、既にトリミングして配置された状態です。
ActyWay.com is for sale | HugeDomains
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
カードが風で飛ぶように画像を切替えられるカッコいいスライダー実装jQueryプラグイン「Windy」:phpspot開発日誌
カードが風で飛ぶように画像を切替えられるカッコいいスライダー実装jQueryプラグイン「Windy」 2012年10月16日- Windy: A Plugin for Swift Content Navigation | Codrops カードが風で飛ぶように画像を切替えられるカッコいいスライダー実装jQueryプラグイン「Windy」。 画像送りのスクリプトはよくありますが、これはなかなか新しいかもしれません。 次へ、ボタンを押すとランダムな方向にカードが飛ぶようにフェードアウトして消えます でもページの３番目はスクロールバーが画像送りになっていてスライドすると画像がいっきに風に飛ばされるようでクールな演出が可能 スライダーどんだけ進化するんでしょうね 関連エントリ 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 これは新しい円形のスライダーが実装できる「Tiny Circ
20 jQuery Tutorials Teaching Super Cool Visual Effects
We all love the fancy effects that can be produced with the jQuery Javascript library. The tutorials in this collection are all based on different topics, but they all include some kind of super cool visual effect as part of their finished product. Follow the steps to recreate the described design, or use the steps to migrate the effects into awesome creations of your own. Making a Beautiful HTML5
これは使える！画像をレスポンシブに切り取るサンプルコード:phpspot開発日誌
Focal Point: Intelligent Cropping of Responsive Images | Design Shack これは使える！画像をレスポンシブに切り取るサンプルコード。 ブラウザ幅を小さくした際に、画像も小さくしてしまう、のではなく、元の大きな画像の指定した部分を切り抜いて表示する仕組みが紹介されています。 divのclassにどこから表示するのか？を記述しておくだけで、超簡単に場所を指定できるところもいいです。 ニュース等の画像では、重要な部分以外にも背景などが含まれる場合がありますが、スマホなどでは重要なところを大きく表示したいという事があるかと思います。 そういう時に、これを使えば便利そうですね。 関連エントリ レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」 レスポンシブなテーブル作りに役立つjQueryプラグイン
StackSlider: A Fun 3D Image Slider | Codrops
An experimental image slider that flips through images in 3D. Two stacks resemble image piles where images will be lifted off from and rotated to the center for viewing. StackSlider is a highly experimental jQuery image slider plugin that explores a different and fun viewing concept for thumbnails, utilizing CSS 3D transforms and perspective. The idea is to navigate through two piles of images whe
シンプルなパララックス効果付きのイメージスライダーを実装するjQueryプラグイン・jQuery Destaque - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 画像がスライドする際に視差効果 を与える事が出来るjQueryプラグ インのご紹介。イメージスライダー とは相性良さそうですね。シンプル なものですが、応用も出来そうです。 パララックスなイメージスライダーです。画像をスライドさせるとテキストがやや遅れて動きます。 デモが目にやり場に困る写真ですが・・工夫すれば訴求力のあるコンテンツに出来そうです。アニメーションはeasing使ってますです。 $('.foo').each(function(index, el){ $(this).destaque({ slideMovement: 100, slideSpeed: 1000, elementSpeed: 1100, easingType: "easeInOutExpo
クリエイティブなCSS3テクニック集「CSS3 Image Galleries, Slideshows and Image Effects」
TOP > WebDesign > クリエイティブなCSS3テクニック集「CSS3 Image Galleries, Slideshows and Image Effects」 限られたスペースを有効に利用するため、もっと魅力的に写真を見せるためにスライドショーを利用しているという方は非常に覆いと思いますが、今回紹介するのはCSS3で実現するクリエイティブなスライドショー集「CSS3 Image Galleries, Slideshows and Image Effects」。 Sliding Image Panels with CSS3 文字や、写真の動きなど、今までのスライドショーにはなかったギミックやエフェクトがCSS3によって実現されています。いくつかのスライドショーが公開されていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは
Draggable Image Boxes Grid | Codrops
Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area. Today we want to create a template with a fullscreen grid of images and content areas. The idea i
様々なホバー表現を可能にしてくれるjQueryプラグイン「Hoverizr」
WEBではインターフェース的にもデザイン的にも欠かすことができない、マウスオーバーした時のホバー処理。ちょっとしたギミックですが、全体のクオリティに影響する部分だと思います。今日紹介するのはわずか2.5KBと非常に軽量ながら、様々なホバー表現を可能にしてくれるjQueryプラグイン「Hoverizr」。 このプラグインではcanvasを利用して、白黒からカラーだったり、ぼかしからぼかしを取ったりと通常のホバー表現とは一味違った表現を簡単に可能にしてくれます。 詳しくは以下 実装方法は非常に簡単で、jQuery本体とHoverizrを読み込ませ、マウスオーバーさせたい部分のイメージのクラスもしくはIDを指定するだけです。様々なオプションが用意されており、使い方によっては面白い表現が可能になるかと思います。 jsのダウンロード、詳しい実装方法、サンプルなどは「Hoverizr – A resp
【ハウツー】HTML5 Canvas×jQuery、グレースケールの画像を自動生成する方法 (2) いざ、修正! | エンタープライズ | マイコミジャーナル
では、順に修正を施していこう。 1. jquery.jsをロードする jQueryをデプロイし、grayscale_image_test.htmlに次の1文を追加する。 <script src="jquery.min.js" type="text/javascript"></script> 2. JavaScriptコードをペーストする gray_scale_image_test.htmlに次のJavaScriptコードを追加する。(HTML5 Grayscale Image Hover - jQuery Codeより引用) このJavaScriptコードでおこなっている処理は次のとおり。 セレクタで選択した画像をもとに、グレースケール画像をCanvasで作成。オリジナル画像と同じ座標に表示する 画像にマウスカーソルが乗った(mouseover)際に、オリジナル画像の透明度(opacity
[JS]jQueryのプラグイン33+1選 -2011年4月
Slider Kit スライドショー、コンテンツスライダー、タブコンテンツ、カルーセルなどさまざまなスライドコンテンツに対応。
サムネイルをドラッグさせ大きな画像を省スペースで表示するJavaScript「jQuery Image Scroller Plugin」
サムネイルをドラッグさせ大きな画像を省スペースで表示するJavaScript「jQuery Image Scroller Plugin」 ECで縦長の、特にモデルが着用した画像を見せたい場合はスペースをとりがちです。 一方で、多くの画像を一覧で見せたいという願望もあるかと思います。 そんな悩みを解消するのが、jQuery Image Scroller Pluginです。 大きな画像を指定の大きさで表示させ、隠れた部分はサムネイルのドラッグで表示させられます。 使用方法 jQuery Image Scroller Pluginからファイル一式をダウンロード。 <link href="imageScroller.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.mi
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
jQueryでDashboardウィジェットを作ろう (1/4)
Mac OS XのDashboardのウィジェットは、HTML/CSS+JavaScriptの組み合わせでできているので、jQueryやPrototype.jsなど既存のJavaScriptライブラリーも使用できます。今回のJavaScriptラボは、jQueryを使ってスライドショーを表示するDashboardウィジェットを作成します。最終的には非同期通信を利用したRSSリーダーも作成します。 DashboardウィジェットでjQueryを使う Dashboardウィジェットは、ネットワーク上にあるライブラリーに直接アクセスできますが、ウィジェットが必ずしも通信できる環境で動いているとは限りません。そこで、ライブラリーはあらかじめウィジェットに組み込んで使用します。 jQueryライブラリーを以下のサイトからダウンロードしましょう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.jquery4u.com/plugins/10-hottest-jquery-plugins-june-2011/
Scott Robbin
http://www.blurjs.com/
http://html5example.net/entry/web-design/20-jquery-image-and-gallery-tutorials-and-plugins
http://labs.skinkers.com/touchSwipe/