Xlune::Blog
非同期ページ(部分)遷移jQueryプラグイン(jquery.smartPage.js) 元々jQueryは基本的な非同期ページ遷移機能は付いてんだけど、もうちょっと機能を追加しつつ、汎用性を持たせたものが欲しいなーと思ってとりあえず書いてはみました。 ステータスとしては、「書いたよ」じゃなくて「書き始めた」けど限が無さそうなので、自分のサイトで使える程度でいいや、、、です。 html5のpushState(pjax)と"#!"を利用したロケーションハッシュによる非同期ページ遷移の両方を実装したモノを目指してます。非対応(IEとか)の場合は普通に同期遷移します。 非同期ソースに、"script"タグがあったり、"document.write"の記述があっても、なるべく表示を再現するよう試みますよー。 jquery.smartPageのオプション/コード Download github zi
画像を背景にフルスクリーンで表示する「jQuery Fullscreen Slideshow with zoom/slide animation」
twitter facebook hatena google pocket フルスクリーンで画像を背景に表示させるとインパクトが出せます。 jQuery Fullscreen Slideshow with zoom/slide animation | jQuery Pluginsは、これを可能にし、またズームなどのエフェクトを全自動で付けてくれます。 sponsors 使用方法 jQuery Fullscreen Slideshow with zoom/slide animation | jQuery Pluginsからファイルをダウンロード。 下記を記述すれば完成です。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.
jQueryでサイト内に簡単にRSSフィードを組み込めるプラグイン「zRSSFeed」｜BLACKFLAG
サイト内にRSSフィードを読み込む方法はたくさんありますが、 jQueryを使って簡単に組み込めるプラグインがないか探したところ、 必要最低限の要素で組み込むことが可能となる理想のプラグイン 「zRSSFeed」に辿りついたのでここでも紹介してみます。 zRSSFeed – RSS Feeds Reader for jQuery zRSSFeed – RSS Feeds Reader for jQuery 上記ページからダウンロードできるプラグインファイルと併せて 実行させる為のIDをつけた＜div＞などを用意し、 スクリプトを実行するだけ。 実装方法のサンプルについて。 HTMLは下記の様に任意のID名がついたブロック要素を配置します。 ※今回のサンプルではID名を「feed」にします。 ◆HTML <div id="feed"></div> そして下記の様にID「feed」に対して、ス
リッチな表現でデザインに差がつく、3D表現ができるjQueryスライドショープラグイン
Slideshow with jmpress.j... / RefineSlide
Circle Menu
A customizable jQuery plugin that emulates the menu in the Path application. Includes a selection animation and various animation options for opening and closing the menu. See it in action. Author Jason Hutchinson (zikes@zikes.me) How to Use Download and include the JS file in your page. Create a list, with the first list item representing the icon at the center of the menu. <ul> <li><a href="#">+
[JS]広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js
テーマ左上から、base、sunny、le-frog、ui-darkness 対応ブラウザは、下記の通りです。 iPadも対応というのはいいですね。 Chrome/Chromium Safari Firefox IE Opera iPad impress.jsからの移行 jmpress.jsは「impress.js」のjQuery版で、impress.jsの特徴全てと更に多くの機能を備えています。 impress.jsから移行するには、jquery.jsを加え、スクリプトをimpress.jsからjmress.jsにし、スクリプトの呼び出しを「$(selector).jmpress(); 」に変更します。 impressのデモをjmpress.jsで動かしたデモ jmpress.jsの使い方 HTML ルートとなるdiv要素に「id="jmpress"」をつけ、各コンテンツをdiv要素で配
Nedim Arabacı
Dependency-free notification library Features Dependency-free UMD Web Push Notifications with Service Worker support Named queue system Has 11 layouts, 5 notification styles, 5+ themes Custom container (inline notifications) Confirm notifications TTL with timeout option Progress bar indicator for timed notifications Supports css animations, animate.css, mojs, bounce.js, velocity and others 2 close
[JS]設置も超簡単、あなたのウェブページのスクロールを慣性スクロールにするスクリプト -NiceScroll
live demo: IFrame iframeを使ったデモです。 div要素と同様にスクロールバーのカスタマイズ、コンテンツのズームが可能です。 NiceScrollの特徴 既存のコードの修正無しで、簡単に設置ができます。 ページのスペースを必要としないスクロールバーを設置できます。 スクロールバーのデザインを変更できます。 すべてのブラウザでマウス・キーボードでスクロールができます。 スクロールは慣性スクロールに対応しており、スピードは調整可能。 コンテンツのズーム機能。 対応ブラウザ IE6を含めたデスクトップブラウザだけでなく、iPhone, iPadなどモバイルブラウザ、タッチデバイスに対応しています。 Firefox 4+ Chrome 5+ Safari 4+ (win/mac) Opera 10+ IE 6+ iPhone, iPadなどのiOSデバイス [ad#ad-2]
[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher
デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て（jqeury.jsも）が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>～</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi
[JAVASCRIPT] Vertical Sliding Info Panel With jQuery - スライドするインフォパネル
[JAVASCRIPT] Vertical Sliding Info Panel With jQuery – スライドするインフォパネル Pocket Tweet ページ横にあるタブをクリックすると、スライドして出てくるサイトインフォパネル。jQueryを使って制作されているようです。DIVボックスが拡大しながら出てくるので、なんだかあまり見ない動きで気持ちイイっすねこれ。全部で3パターンのデモがあるんですが、ページ下部に全部まとまってます。3つめのタブ固定バージョンがナイス。ソースコードも同様にページ下部からDLできます。その内使ってみたいなこれ。 Vertical Sliding Info Panel With jQuery
[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph
Tutorial demos さまざまな基本となるアニメーションのユニット集。 [ad#ad-2] jsMorphの実装 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="js/jsMorph_min.js" type="text/javascript"></script> JavaScript jsMorphの基本書式です。 var myMorph = jsMorph( Object obj, // HTML element, Array of elements or elementCollection that are rendered Object prop, // css properties of end position [Object params], // parameters that influence the motion (dur
[JS]設置も簡単、機能も豊富、キーボード操作でパネルをスライドする -FerroSlider
複数のパネルを縦・横のライン状、L字状、十字状などに配置し、スムーズなアニメーションでスライド表示するjQueryのプラグインを紹介します。 FerroSlider jQuery Plugin [ad#ad-2] FerroSliderの主な特徴 各パネルをラインやカラム、マトリックス状に配置が可能。 パネルのスライドはスムーズなアニメーション。 アニメーションのエフェクトはカスタマイズ可能。 アニメーション中は進行方向を表示。 各パネルはアスペクト比を維持してブラウザいっぱいに表示。 カスタマイズしたスクリプトをAJAXで実装可能。 コンテナの中にスライドするコンテンツの要約を設置。 キーボードの矢印キーで操作が可能。 クリックでも操作可能なナビゲーションも設置可能。 コンテンツをスルーできるリンクの設置も可能。 FerroSliderのデモ デモではデフォルトの状態をはじめ、さまざまな
[JS]任意のキーを組みあせて、イベントを設定できる超軽量スクリプト -jwerty
コナミコマンド（上上下下左右左右BA）など任意のキー操作を組みあせて、エレメントやイベントを設定できる超軽量(1.5kb)のスクリプトを紹介します。 jwerty [ad#ad-2] jwertyはjQueryなど他のスクリプトに依存しないで動作するスクリプトで、minified版で1.5kbと超軽量です。 ※jQueryと一緒に設置することはできます。 jwertyの使い方 使い方は簡単で、外部ファイルとして当スクリプトを指定し、キー操作ごとにエレメントやイベントを設定します。 キーボードのスタイルがかわいかったので、キャプチャで実装例を紹介します。 jwertyの実装例 [ad#ad-2] jwrtyのサイトでは、下記のショートカットが用意されています。 zipでダウンロード Ctrl+Alt+z tarでダウンロード Ctrl+Alt+Shift+z jwerty -GitHubにア
jQueryのプラグイン33+1選 -2011年9月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Loupe 画像の一部を拡大します、多彩なオプションが便利。 Slicebox 画像をダイナミックに3Dスライスするギャラリー。 E
jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。 - WEB人
jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。 公開：2009年11月 4日 21:06, 更新：2009年11月 5日 08:01 トラックバック(0) コメント(0) 最近の流行を抑えたサイトを見ていて気になる機能がありました。ページをスクロールして下へ移動すると、右下にスーッと出現する上向きのボタン。ポチっと押すと、ぬるっとスクロールしながらページのトップに戻ってくれる優れものです。 ホイールやスクロールバーを使って戻るのは、縦に長いページほど手間がかかるので、このプラグインがデザインの邪魔にならないのであれば是非実装してみましょう。場合によっては劇的にユーザビリティが向上します。 必要ファイルの準備 まずはjQueryのライブラリファイルを用意します。jQuery公式サイトに「Production (19KB, Minified and Gzi
Moleskine Notebook with jQuery Booklet | Codrops
Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. We will create a virtual Moleskine notebook with latest posts from […] Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. We will create a virtual Moleskine notebook with latest posts from the blog. You can find the beautiful M
Pull Out Content Panel with jQuery | Codrops
In this tutorial we will create a content panel that slides out at a predefined scroll position. It will reveal a teaser with related content and it can be expanded […] In this tutorial we will create a content panel that slides out at a predefined scroll position. It will reveal a teaser with related content and it can be expanded to full page size to show more. A custom slider allows to scroll t
[js] 画面全体をオーバーレイする | おれせか
Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-settings.php on line 472 Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-settings.php on line 487 Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-setti
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ajaxblender.com
[JS]jQueryのプラグイン33+1選 -2012年1月