|
|
ホットサンプル
行数:
|
◆ jQueryのFlipプラグインを利用して最新のつぶやきを表示する
(#1)
このサンプルは、jQueryの
Flip
プラグインを利用してTwitterの最新のつぶやきを表示します。
サンプルが表示されたらテキストボックスのTwitterのUser Nameを入力して[Submit]ボタンをクリックします。Twitterのアカウントがない方は[Submit]ボタンをクリックしてください。するとボックスがフリップして最新のつぶやきが表示されます。[Return]をクリックすると元のボックスに戻ります。
|
◆ jQueryのbgFadeプラグインでCall-TO-Action型のボタンを作成する
(#2)
このサンプルは、jQueryの
bgFade
プラグインを利用して
Call-To-Action型のボタンを作成します。
サンプルが表示されたら[Show Demo]をクリックしてボタンを表示します。
ボタンにマウスを移動すると、ボタンがフェイドします。
このサンプルは、CSS Spriteを利用してボタンを切り替えています。
|
◆ jQueryのTiny Carouselプラグインでイメージを垂直方向に回転させる
(#3)
このサンプルは、jQueryの
Tiny Carousel
プラグインで
イメージを垂直方向にスライドさせます。
サンプルが表示されたら上下の矢印ボタンをクリックしてイメージをスライドさせてください。
|
◆ jQueryのCloudZoomプラグインでPDFをズームさせる (Part3)
(#4)
このサンプルは、jQueryの
CloutZoom
プラグインを利用して
「Create a 3D eBook Cover」のPDFをズームインします。
左側に表示されているイメージにマウスを移動すると右側にズームインされます。
右側のサムネイルをクリックするとPDFのページを切り替えることができます。
|
◆ jQueryのSlimboxプラグインでイメージを拡大表示する
(#5)
このサンプルは、jQueryのプラグイン
Slimbox
を利用して
イメージを拡大表示します。
サンプルが表示されたら「Click here」をクリックしてください。
イメージが拡大表示されます。
このプラグインはLightboxの軽量版です。
|
◆ jQueryのCloud Carouselプラグインでイメージを回転させる(Part2)
(#6)
このサンプルは、jQueryの
Cloud Carousel
プラグインを利用して
イメージを自動的に回転させます。
手動で回転させるには左上の矢印ボタンをクリックします。
|
◆ jQueryでECサイトで重要な"Call TO Action"型のボタンを実装する
(#7)
このサンプルは、CSSとjQueryを利用して"Call To Action”型のボタンを実装しています。ECサイトなどで成約率を上げるのに役立ちます。
上の「Download」ボタンはCSSのみで実装しています。
下の「Contacts」ボタンは、jQueryのanimate()を利用してアニメーション化しています。
|
◆ jQueryでテキストにネオン効果を適用する
(#8)
このサンプルは、CSSとjQueryのfadeIn/fadeOutを利用して
テキストにネオン効果を適用しています。
ここでは、CSS Spriteで２種類のイメージを用意して
800ms単位でイメージを切り替えることにより
ネオン効果を実装しています。
ネオンが点灯するスピードは、fadeIn/fadeOutの引数に指定する
時間を調整します。
|
◆ jQueryのHighChartsプラグインで面グラフを作成する
(#9)
このサンプルは、jQueryのHighChartsプラグインを利用して面グラフを作成します。
ここでは、米国とロシアの核備蓄を面グラフで表示しています。このプラグインは、個人サイトで無料にて利用できます。面グラフにマウスを移動するとツールチップが表示されます。
|
◆ jQueryのTextMorphプラグインでもみの木を表示する
(#10)
このサンプルは、jQueryの
TextMorph
プラグインを利用して
テキスト文字でもみの木を描画します。
クリスマスツリーを表示するとき利用すると便利ですね！
|
|