Xlune::Blog
非同期ページ(部分)遷移jQueryプラグイン(jquery.smartPage.js) 元々jQueryは基本的な非同期ページ遷移機能は付いてんだけど、もうちょっと機能を追加しつつ、汎用性を持たせたものが欲しいなーと思ってとりあえず書いてはみました。 ステータスとしては、「書いたよ」じゃなくて「書き始めた」けど限が無さそうなので、自分のサイトで使える程度でいいや、、、です。 html5のpushState(pjax)と"#!"を利用したロケーションハッシュによる非同期ページ遷移の両方を実装したモノを目指してます。非対応(IEとか)の場合は普通に同期遷移します。 非同期ソースに、"script"タグがあったり、"document.write"の記述があっても、なるべく表示を再現するよう試みますよー。 jquery.smartPageのオプション/コード Download github zi
ページ遷移時にエフェクトを与えるjQueryプラグイン「jQuery Pageswitch Plugin」
twitter facebook hatena google pocket ページ遷移の際に何らかのエフェクトが発生するサイトがありますが、今回紹介するjQuery Animated Pageswitch Pluginを利用することで、それを簡単に再現可能です。 sponsors 使用方法 jQuery Animated Pageswitch Pluginからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.4.3.min.js"></script> <script src="jquery.pageswitch.js" type="text/javascript"></script> <script> $(function() { $('#id名 a').pageswitch({ url: '/test/', //
流行のjQueryでスクロールするサイトを集めてみました
jQueryでコンテンツをスクロールさせる海外サイトを最近見るのですが、あれはかっこいいですね。そこで、今回の記事では、jQueryでコンテンツをスクロールさせているサイトをいくつか紹介しつつ、このタイプのサイトに特有の問題についても触れてみたいと思います。 はじめに コンテンツをスクロールバーではなく、JavaScriptでスクロールさせる場合、ブラウザのスクロールバーが出ないため、「ブラウザからはみ出るコンテンツをどのように扱うか」の課題に直面します。以下のサイトで、この問題をどのように解決しているかにも、注目して見てください。 01. Reverse Büro 自由自在に縦、横方向にスクロールします。マウススクロールにも対応しています。コンテンツ自体がブラウザ幅に合わせて拡大・縮小するのでスクロールは必要ないですね。写真だけのサイトでは、こういった解決策もアリなんだと思います。 ※サ
画像を背景にフルスクリーンで表示する「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」に対して、ス
スクロールバーのデザインをカスタマイズできるjQueryプラグイン「jQuery CUSTOM CONTENT SCROLLER」｜BLACKFLAG
Webページ内で限られた範囲内にテキストなどを多くの情報を掲載する場合、 インラインフレームの様なスクロールエリアを設置することはよくあること。 ですが、ブラウザのデフォルトスクロールバーでは見た目があまりにカッコ悪かったりします。 その様な際に使える簡単にスクロールバーのデザインをカスタマイズできるjQueryプラグイン 「jQuery CUSTOM CONTENT SCROLLER」のご紹介。 ≫jQuery CUSTOM CONTENT SCROLLER ≫デモはこちら【Demo: jQuery custom scrollbar demo】 デモ画面やサンプルデータにあるように 様々なパターンのスクロールバーのデザインが用意されています。 実装しても動作が重くなるようなこともなく、 マウスホイールでのスクロールもきちんと対応しているところなどが◎。 スクロールの「縦」と「横」の種類の
Mega Moolah dan Immortal Romance: Duel Slot Legendaris
Selamat datang dalam dunia slot online yang dipenuhi dengan keajaiban! Dua slot legendaris, Mega Moolah dan Immortal Romance, dipandang sebagai favorit pemain dengan fitur-fitur unik serta pengalaman bermain yang tak terlupakan. Mega Moolah dikenal sebagai slot yang mempunyai jackpot progresif terbesar. Dengan tema safari yang menghibur, pemain dapat meraih hadiah besar melalui mekanisme jackpot p
リッチな表現でデザインに差がつく、3D表現ができるjQueryスライドショープラグイン
Slideshow with jmpress.j... / RefineSlide
レスポンシブWebデザインに対応したjQueryスライドショープラグイン
RefineSlide / Camera | a free jQuery s... / CarouFredSel他...全7件
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
アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate
使いどころもありそうだったので 備忘録。文字をアニメーションし ながら少しずつ表示させていく様 なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。 プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。 lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。 以下動作サンプルです。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src
[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
horinaja.com - このウェブサイトは販売用です！ - horinaja リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
[JS]jQueryのプラグイン33 1選 -2011年10・11月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 FlexSlider シンプルながら高性能でセマンティックなマークアップのスライダー。 Slidorion 画像スライダーとアコーデ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]jQueryのプラグイン33+1選 -2012年1月