これはカッコイイ！アイテムを浮かせて斜めにスライドさせるコンテンツスライダー -Tilted Content SlideshowTilted Content Slideshow コンテンツの各アイテムをふわりと浮かせて、斜めのクロスを軸にびゅーんとスライドさせるかなりかっこいいコンテンツスライダーを紹介します。 Appleのプロダクトページに使われそうなエフェクトですね。 アニメーションgifでは一部の動きなので、下記のデモページで他のエフェクトもお楽しみください。
[JS]テキストにSci-Fi styleのかっこいいアニメーションのエフェクトを与えるスクリプト -Text Effects
ランダムな文字を次々に表示し、一つのテキストを生成するSci-Fi styleのアニメーションのエフェクトを与えるjQueryのプラグインを紹介します。 Text Effects Text Effects -GitHub ※上記のアニメーションgifは軽量化のため、間引いてます。実際はもっと多くの文字列が高速に表示されます。 Text Effectsのデモ Text Effectsの使い方 Text Effectsのデモ テキストのエフェクトにはいくつかのバリエーションがあります。 上記のアニメーションgifのようなシンプルなエフェクトをはじめ、複数のテキストを使ってループで表示したり、逆からテキストを生成するリバースなどがあります。 Text Effectsの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。
[JS]グリッドで配置したパネルをダイナミックなアニメーションでコントロールするスクリプト -gridSelector
Googleトレンドのようなグリッド状に配置した複数のパネルにダイナミックなアニメーションを与えるスクリプトを紹介します。 Dynamic Grid with Transitions デモはChrome, Firefoxでご覧ください。 ※Safariで見たら、クラッシュしました。 Demo 1: No transitions Demo 2: Transitions without delays Demo 3: Transitions with delays 3種類のデモは、1:アニメーション無し、2:ディレイ無しのアニメーション、3:ディレイ有りのアニメーションとなっています。 Demo 3のディレイ有りが一番かっこいいです！ Demo 3のアニメーションgif 左上からパネルの表示数・レイアウトが変更すると、アニメーションで変更します。 実装 div要素で配置したパネルと外部ファイルと
ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」:phpspot開発日誌
Pretty Pie Menu Demo ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」 次のような円形のメニューを実装できます。アニメーションがカッコいいので実際に見てみましょう デモページ 使い方は以下のようにオプションを渡すみたいです。画像は自分で作れるので画像を変えれば全く印象の違ったものを作れそうです 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 かなりクールなjQueryのメニュープラグインやチュートリアル集 ページスクロールでついてくるメニューを実装＆色々カスタマイズできるjQueryプラグイン「stickyFloat」 通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」 折り畳み可能なシンプルツリーメニュー実装jQ
超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」:phpspot開発日誌
jQuery Marquee Animation Plugin Preview - CodeCanyon 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」。 ホームページをつくりはじめた時には誰もが使ったマーキー。覚えていくにつれ、ほとんど使われないかわいそうなマーキー。 そんなマーキーもjQueryで超かっこ良く、まるで映画のプロモーション動画に使われるようなエフェクトに生まれ変わったようです。 生まれ変わったマーキーを見てみよう 実装は超簡単！ <script language="javascript"> $(document).ready(function() { $('.marquee').fMarquee({width: 960, height: 100}); // サイズをオプション指定 }); </script> <!-- 内容はdivに入
多彩なエフェクトが魅力なイメージギャラリー用jQueryプラグイン・Skitter
なかなか使いやすそうで、汎用性 もあるかなと感じたので備忘録。 エフェクトが多数あり、機能も中々 良く、クロスブラウザ対応している イメージギャラリー用のjQueryの プラグインです。 イメージギャラリーは数多に存在するのでまぁ選択肢の一つです。まぁ後発の方が機能が良くなりやすいっていう見方も出来なくは無いですね。 22のFlashライクなエフェクトから選べます。どれもクールなエフェクトですよ。 エフェクトにはそれぞれデモが用意されているので触ってみてください。 フルスクリーンにも出来ます。 サムネorボタンのナビゲーション ナビゲーションを選択できます。ボタンかサムネイル。 ナビゲーションの表示の有無 そのナビゲーションを常時表示させるか、マウスオーバー時に表示させるかを選択できます。 IE6、7でも IETesterで確認。問題有りませんでした。 オプション いろいろ用意されてます。
ShineTime – A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects | AddyOsmani.com | Where Web Businesses Grow
This week I’d like to show you how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve. I always think it’s useful to see a demo of what we’
サムネイルのナビゲーションギャラリー
In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties […] In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have
Zoom-Info – How To Create An Informative Image Gallery With jQuery & CSS | AddyOsmani.com | Where Web Businesses Grow
Question: Have you ever wanted to neatly display a few lines of text about an image in your site but didn’t want to compromise on the design of your overall layout? In today’s post I’m going to show you how to create a useful information-rich jQuery Image Gallery that solves that problem. The best part of it is that it’s so simple to write up that all you’ll need are jQuery’s excellent .hover() an
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA