【Sidr】Facebookアプリのようなメニュ... / 【jPanelMenu】横から出てくるサイドメニ... / 【Snap.js】フリック動作で出し入れが可能な...他...全4件
【Sidr】Facebookアプリのようなメニュ... / 【jPanelMenu】横から出てくるサイドメニ... / 【Snap.js】フリック動作で出し入れが可能な...他...全4件
水平・垂直に配置した画像やコンテンツを気持ちよくスクロールさせることと次に表示するアイテムのロジックにこだわったjQueryのプラグインを紹介します。 IE6にも対応してるのがびっくりです! 特徴は気持ちのいいスクロールだけでなく、ナビゲーションのロジックも直観的で、次に表示するべきアイテムを自動的に先頭に配置します。クリックでアクティブにしたアイテムも常に保持します。 操作は上部のバー、FRAME上でホイール、パネルのクリック、下部のナビゲーションがあり、また下部のボタンでは前・次、最初・最後・中央などの操作もできます。 ナビゲーションでの操作は次に表示するアイテムを先頭に配置します。 デモでは、水平方向のスクロールだけでなく、垂直方向、無限スクロールもあります。
グリッドに沿ってタイル状に配置した画像やテキストなどのエレメントをランダムな順番でふわりと表示するjQueryのプラグインを紹介します。 champagne.jsを実際に使用しているサイト「Perkstreet」 [ad#ad-2] champagne.jsの使い方 champagne.jsは、3ステップで簡単に実装できます。 画像やテキストをタイル状にCSSで実装。 jQueryと当スクリプトをインクルード。 親エレメントをjQueryのセレクタで指定し、スクリプトを実行。 下記に、デモページを例に実装方法を紹介します。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery
パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。
ちょっと珍しいタイプでしたので備忘録。 連続した要素を、指定した数に達したら 分割して、ページネーションを自動で 生成し、移動時にエフェクトが加わえる、 というもの。大量のリストをコンパクト に、という方に向いてそうですね。 連続した要素になら基本的になんでも使えるっぽいので何かしら応用できるかもしれません。コンパクトにまとめられるのは素敵ですね。 例えばli要素が100個くらいあったとして、これを10個ごと、10ページに分割し、ページ移動時にエフェクトも実装する、というもの。少々カスタマイズ性には欠けますがこれはこれで手軽に大量の要素をコンパクト化出来るので覚えておいて損はないかなと思います。 以下動作サンプルです。 Sample ページネーションの数字が小さすg コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1
【jQueryって何からjQueryの基本まで】... / 【jQueryの使い方から動作デモまで】jQue... / 【jQueryでのアニメーションからイージングま...他...全6件
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
Top 10 Javascript slideshows, carousels and sliders JavaScript製の画像スライダー・ギャラリーいろいろ。 JavaScriptで画像を使ってアニメーションさせたり、リスト管理したりするライブラリが多数紹介されています。 SpaceGallery Noobslide Accessible News Slider SmoothGallery jQuery Multimedia Portfolio JCarousel Glider Carousel Carousel slideshow Carousel.us 過去の画像ギャラリー関連エントリ スライドショー付きLightBox風イメージアルバムのサンプル jQueryベースのLightBoxクローン「prettyPhoto」 UIがクールでサクサク使えるMacウェブギャラリー風画像ギャ
画像ギャラリーはサイト制作の中でも多く利用するのではないでしょうか。 そのため選択肢の幅を広げ、よりサイトにあったJavaScriptを使うことをお勧めします。 今回はjQuery slideShow pluginを紹介します。 sponsors 使用方法 jQuery slideShow pluginからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.slideshow.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#id名').slideShow({ interval: 3,
テキストリンクをはじめ、p, span要素のテキスト、li要素のテキスト、div要素、img要素などさまざまなDOM要素に、アニメーションを伴ったツールチップを表示するjQueryのプラグインを紹介します。 jQuery Bubble Popup v.2.0 デモページ:さまざまなDOM要素への実装例 [ad#ad-2] Bubble Popupの対応ブラウザ Internet Explorer 6.5, 7, 8, 9 (beta) Firefox 3.5.x Safari 5.0.x Opera 10.x Chrome 6.0.x iCab 4.x Webkit based browser (reKonq, Arora) KHTML-based browser (Konqueror) Bubble Popupの主な特徴 あらゆるDOM要素にツールチップ、ポップアップを作成できます。 ツ
a要素に余白をpaddingで設定し、カラーを指定します。 a.foo { padding: 5px 10px; background: #9c3; } a.foo:hover { background: #690; } [ad#ad-2] 繊細なアニメーションを与えるスタイルシート CSS3 Transitionsを使用して、ふわっと繊細なアニメーションを与えます。 デモページ(当方作成) 追加するのは、L4-7です。 ※デモページではpaddingなどの値を若干変更しています。 a.foo { padding: 5px 10px; background: #9c3; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: al
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです!そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト! フォームの仕様 今回チャレンジするフォームの主な仕様です! グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける(モダンブラウザ) 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ?という人もひとつひとつ記述していけば意外と簡単に作れるはずです!リンクをクリックで各項目にジャンプします。 テキストボック
FancyZoom meet jQuery // Ordered List // We Make The Web Beautifully Simple 画像をスムーズに拡大できるjQuery版FancyZoom。 サムネイル画像をクリックするとそこからズームされる感じにアニメーションされるFancyZoomのjQuery版が出たみたい デモ jQueryな方にはよさそうですね。アニメーションがなめらかで、動作も軽いみたいです。 関連エントリ 画像を同一Window内でスムーズにズームしてくれるJSライブラリ色々
Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide […] Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect
MopBox 複数パネル(デモには100以上のパネルも)の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く