IDEA * IDEAドットインストール代表のライフハックブログ
[JS]多彩なエフェクトが面白い、ボックスにパネルをスライド・フェード表示するスクリプト -Mosaic
デモページ ダイナミックな斜め方向のスライドのアニメーションで表示 Mosaicの実装 HTML: circle 上記の一番上のキャプチャ、「circle」の実装例です。 <div class="mosaic-block circle"> <a href="http://buildinternet.com/project/mosaic" class="mosaic-overlay"> </a> <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mosaic.jpg"/></div> </div> JavaScript:circle $(document).ready(function($){ $('.circle').mosaic({ opaci
横からニョキっと現れるコンテントパネル Pull Out Content Panel with jQuery - namarecoの日記
まずデモページをスクロールさせて一番下までたどり着いてください。 イメージはこんな感じです。 ■デモ ■サンプルページ HTML CODE <div class="pc_panel" id="pc_panel"> <div class="pc_label expand"></div> <div class="pc_label close"></div> <div class="pc_title">More on this topic</div> <div id="pc_wrapper"> <div id="pc_content"> <div class="pc_item"> <h2>Annotation Overlay Effect with jQuery</h2> <img src="images/22.jpg" alt=""/> <p> A slick overlay effect t
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」:phpspot開発日誌
jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-
jQueryのかっこいいスライドショースクリプト28 – creamu
かっこいいスライドショーを作りたい。 そんなときにおすすめなのが、『28 Useful JQuery Sliders You Need To Download』。jQueryのかっこいいスライドショースクリプト集です。 かなりいい感じのものが揃っています。 Automatic Image Slider w/ CSS & jQuery CSSとjQueryで作られた、自動でスライドするギャラリー Animate Panning Slideshow with jQuery 大きい画像の一部がパンしながら移動するスライドショー SlideDeck jQuery plugin とてもかっこいいスライドショー。無料版と$99の有料版がある。Basecampのサイト等、実装例多数 jQuery Infinite Carousel スムーズな動きのカルーセル（イメージスライダー） Easy Slider
IE6、7でも動いてくれる&実用性の高そうなjQueryプラグイン30個まとめ - かちびと.net
使いやすそうなjqueryプラグイン をまとめました。最低でもIE6,7でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 IE6、7でも動いてくれて、実用性のあるjQueryいろいろ。確認したブラウザはIE6,7とChromeです。他は大抵動くんじゃないかな（適当）。 デモで画像が透過されていないのもありますが、他のjsライブラリでIE6でも透過可能（DD_belatedPNG.jsとか）なのでそこは抜きにして動作する事を条件に挙げています。主観入ってるので参考程度に・・ Horizontal Subnav マウスオーバーでサブメニューがプルダウンするcssメニューです。サブメニューは横に広がってくれます。 Horizontal Subnav Simple jQuery tabs コンテンツをタブで切
[JS]CSSスプライトをアニメーションで変更するチュートリアル
Photoshopでの画像作成からはじまり、CSSスプライトをアニメーションで変更するボタンを実装するチュートリアルをTutorial9から紹介します。 Creative Button Animations with Sprites and JQuery デモページ デモではHTMLとCSSを使用したベーシックなCSSスプライトで実装したボタンだけでなく、XHTMLとCSSとJavaScriptを使用しフェードのアニメーションでじんわりと変更するボタンなどがあります。 エキスパート モードでは、一つの画像で複数のボタンを変更するもの、矩形ではなく円形のボタンをアニメーションで変更するものもあります。
[JS]メガドロップダウン型のナビゲーションを実装するスクリプト -Mega Menu
豊富なコンテンツを設置できるメガドロップダウンを実装するスクリプトをGeek Tantraから紹介します。 jQuery Mega Menu デモページ デモでは四種類メガドロップダウンがあり、データ量によってドロップダウンするパネルの幅が成り行きのもの、指定した幅のもの、表示位置が成り行きのもの、右寄せのものがあります。 実装は簡単で、スクリプトを外部ファイルとし、下記のようなスクリプトを記述します。 JavaScript <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".MegaMenuLink").megamenu(".MegaMenuContent", { width: "900px" });
サイトにTwitterの機能を組み込むためのjQueryプラグイン集:phpspot開発日誌
Best jQuery plugins for Twitter integration | AjaxLine サイトにTwitterの機能を組み込むためのjQueryプラグイン集。 Twitterの勢いがまだまだ衰えませんが、それにともなってサイトにTwitterの機能を実装したいというニーズも高まってきているのではないでしょうか？ そんな際に便利に使えるプラグイン集です。 Twitterのサイトが落ちた時にサイトが重くなってしまうという点に注意して使いたいですね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 ajaxファイルアップロードに使えるjQueryプラグインいろいろ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」
実務で使えるjQueryプラグイン3選 (1/3)
jQueryを使ったJavaScriptライブラリー「jQueryプラグイン」を使うと、Webサイトを手軽に装飾できます。「Web制作の現場で使えるjQuery UIデザイン入門」最終回では、実用性の高いjQueryプラグインを3つピックアップし、それぞれの具体的な使い方を紹介します。 table要素にソート機能を付ける「table sorter」 「table sorter」は、テーブル（表組み）にソート機能を追加できるjQueryプラグインです。大量のデータを表形式で表示したいときに重宝します。 ■利用方法 jQuery本体と配布ページからダウンロードしたtable sorterのプラグインファイル「jquery.tablesorter.min.js」を、利用したいWebページのhead要素内で読み込みます。 <script type="text/javascript" src="jq
[JS]jQueryのプラグイン33+1選 -2009年12月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Organic Tabs アニメーションで収縮するタブコンテンツ。 flips パネルを多彩なアニメーションでスライド。 bxSli
Aptanaで始めるJavaScriptライブラリ「jQuery」超入門
JavaScriptライブラリ「jQuery」とは？ 最近、Flashの代わりにJavaScriptを利用してリッチなデザインのWebサイトを構築する事例が増えてきました。特にグーグルのサービスは、JavaScriptをうまく取り入れている例として誰もがご存じでしょう。 例えばGoogleマップは、Webブラウザ上でマウスをドラッグ＆ドロップするだけで、地図を自由に操作できます。このような操作感は、まるでWebサイトであることを意識させない作りになっています。 本来、JavaScript自体はインターネットが広まり始めたころから存在していて、決して目新しい技術ではないのですが、Webブラウザの種類やバージョンによって挙動が異なることから、JavaScriptを使って大掛かりな仕組みを作ることは不可能だと考えられてきました。 しかし、最近ではWebブラウザは自動的にバージョンアップされるよう
jQuery flips plugin
PAGE 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in c
素晴らしいjQueryチュートリアル集 – creamu
AjaxLineで、素晴らしいjQueryチュートリアルがまとまっています。 ざっといくつかご紹介。 » Animated Menu Using jQuery jQueryを使ったアニメーションするメニュー » How to create tab with JavaScript シンプルなタブ切り替えコンテンツの作り方 » Animated Navigation with CSS & jQuery マウスオーバー時にくるっくるっと切り替わるかっこいいメニュー » 5 Sliding Content Techniques, Examples & jQuery How to’s 画像をスライドで切り替える超クールなテクニック » jQuery FAQs: Scroll To and Highlight Tutorial ページ内リンクのスクロール後、対象のコンテンツをハイライトしてくれる »
[JS]jQueryのプラグイン33+1選 -2009年8月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 slideView 動きが面白い画像のスライドショー。 Mop Slider コンテンツのスライダー。バージョンアップ。 simpl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
［jQuery］Flashのように画像やテキストを切り替えるs3Slider.js | CSS Lecture
[JS]シンプルだけどフレキシブルなコンテンツスライダーの軽量スクリプト -simpleSli.de
[JS]CSSスプライトにアニメーション効果を加えるスクリプト -AutoSprites
jScroller a Autoscroller for jQuery by Markus Bordihn