縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
![[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/12d806b696946054b69c1dc3670ffa2dc1985773/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112505.png)
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
jQueryプラグイン「Waypoints」でスクロール中に要素が出現するサイトを作ろう！ | Neganin(ネガニン)
2. ダウンロード 「jQuery」本体はダウンロードするか、Googleにホストされているファイルを読み込みましょう。 「Waypoints」のバージョンは3.1.1です。下記サイトからダウンロードし「lib」フォルダ内の「jquery.waypoints.min.js」を使用します。 jQuery Waypoints <header id="header"> <h1>Waypoints</h1> </header> <p id="text">jQuery Waypoints Demo</p> <div id="content"> <div id="wrapper"> <section class="section"> <figure class="thumb"><img src="img/thumb1.jpg"></figure> <h2>Title</h2> <p>Text Text
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
CSS切替なしでフォントサイズを変更するjQueryのスクリプト | Web Mugen
前に作ったフォントサイズを変更するjQueryのスクリプトの改良版です。元々はフォントサイズ切替用のスタイルシートを作るのがメンドイので作ってみました。改良点は画像でもテキストでも使えるし、クリックするとアクティブ用のクラスが付くのでCSSを適応できます。さらにロールオーバー画像のオンオフも切り替えれます。おまけにフォントサイズの段階（標準・大とか小・中・大みたいな）もいくつでも設定できます。ちなみにプラグイン風？に作りました。もちろん自己満の為です。 画像タイプDemo テキストタイプDemo 対応ブラウザ Google Chrome Safari4~ Firefox3~ Internet Explorer6~ Opera11 ※Windowsのみの確認です。 ※IE6はテキストタイプの場合、a要素を使用していない為ホバー機能が効きません。a要素を追加しても問題ないかと思いますが、リンク
jQueryで、透過pngをIE6に対応させる
jQueryで、透過pngをIE6に対応させる jQuery2008年12月7日 2008月11月現在、IE7の世界におけるシェアは47.39％を占めています。 （Net Applicationsより） 確実にIE6→IE7への移行は進んでいますが、まだまだIE6は無視できないのが現状です。 色々な方が透過pngをIE6でも機能させる方法をご紹介されていますが、実はjQueryのプラグインを使用する事で、あっさりIE6にも透過pngを対応させることができます。 「IE7.jsで対応」「iepngfix.js」といった方法もあるにはありますが、前者はちょっと反則的な気がしますし、後者は余計なソースがどんどん増えますし、マニアックなバグの調整作業をしなければならないのが難点です。 jQueryであれば、きちんとブラウザがサポートされているので安心ですし、余計なコードも増えません。（2～3行ほど
1行のコードで既存のテーブルにソート機能を追加·Table Sorting MOONGIFT
Table Sortingは既存のHTMLテーブルにソート機能を追加するJavaScriptライブラリです。 業務システムなどでテーブルを表示すると常に足らない機能を求められます。その第一が並べ替え機能でしょう。DBを操作しても良いですが、もっと単純に解決したいならTable Sortingを使ってみても良さそうです。 デモです。 カラムのクリックでソートが実行されます。 金額部分もきちんとソートされます。 JavaScriptのコードです。単純にクラスを指定するだけ。 HTMLのコードです。数値部分にも特に設定を行っていないところに注目。 Table Sortingは既存のテーブルを渡すだけで自動的にソート機能を追加してくれます。オブジェクトの型も判断して並び替えてくれるので手間いらずです。 Table SortingはJavaScript製、GPL v3のオープンソース・ソフトウェアで
Meerkat: A jQuery Plugin (Basic Demo)
$('#meerkat').meerkat({ background: 'url(images/meerkat-bot-bg.png) repeat-x left top', height: '120px', width: '100%', position: 'bottom', close: '.close-meerkat', dontShowAgain: '.dont-show', animationIn: 'slide', animationSpeed: 500 }); Meerkat & Jquery Are Lovers Meerkat, named for its pop up like behavior, is a jQuery plugin created by myself, Jarod Taylor. It was originally created to serve
BlackFlag - Web Development Technical | jQuery,HTML,CSS,iPhone,iPad,Twitter etc...
Categories HTML／(X)HTML (33) HTML5 (26) CSS (125) CSS3 (85) jQuery (334) TIPS (157) プラグイン (147) プラグイン集 (39) ライブラリ情報 (2) JavaScript (31) Mootools (8) iPhone／iPad／iPod／Android (26) Twitter (6) Facebook (2) IE (17) Firefox (6) SEO (10) Flash (2) WordPress (3) Silverlight (3) Webサービス (53) WebサイトGallery (17) Web素材 (46) Web開発用ツール (30) Web情報 etc… (8) リリース情報（その他） (18)
パララックス制作などで使えるスクロールして特定の位置でアニメーションなどの処理を実行させることが出来るjQueryプラグイン「jquery-peekaboo」「jQuery Waypoints」｜BLACKFLAG
パララックスサイト制作の際などで活用できる ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る jQueryプラグインがいろいろ使い道がありそうだったので 自分用のメモ書きとして紹介してみます。 uniba/jquery-peekaboo・GitHub 使い方はとても簡単で ページをスクロールしてアクションを実行させるポイントになる箇所に対して 下記のような記述で処理を実行させます。 ◆SCRIPT $(function(){ $('.point').on('appear',function(){ $(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000); }); }); この記述の場合は、ページをスクロールして 「.point」とクラス付けされた要素の位置に辿り着いたら その要素に対してフェ
jQueryでCSSアニメーションを実行させる方法｜BLACKFLAG
以前ここでも「CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード／マウスオーバー／クリックアクション】」と題して、 CSSアニメーションの実行パターンをいくつか紹介しましたが、 アニメーションの実行制御をCSS側でなくjQueryで操作させる方法が 簡単でいろいろとこの先使えそうだったので紹介してみます。 構成としてはCSS側でアニメーション設定をしておいて jQuery側でコンテンツ要素に対してclassを付けたり外したりさせることで その要素に対してアニメーション制御をする形になります。 例えばHTMLには 以下のようなidを付けたdivを用意して、 ◆HTML <div id="action"></div> CSS側では 以下のようにアニメーションをセットします。 ◆CSS #action{ top: 0; left: 0; width: 50
jQueryでThickboxの様なモーダルウィンドウを簡易的に実装するサンプル｜BLACKFLAG
jQueryでのモーダルウィンドウライブラリは有名どころでは「Thickbox」や「LightBox」などさまざま。 これらのライブラリはサイトを制作する上でのさまざまな条件にも対応可能な素晴らしいライブラリですが、サイト上のちょっとしたところでモーダルウィンドウを使用する、って場合には何かと不必要な機能が多かったりするもの。 そこで「Thickbox」や「LightBox」の様な、大掛かりでは無いモーダルウィンドウを実装する際のサンプルスクリプトの紹介。 まずは基本的なボタン（リンク）をクリックすることで、モーダルウィンドウを立ち上げるタイプ。 ≫サンプルはこちら（ページ内の「≫モーダルウィンドウOPEN」をクリック） まず、スクリプトはこんな感じに。 $(function(){ $('.modal').click(function(){ $('html').css({overflow:
jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法｜BLACKFLAG
このところ立て続けに、 Webページ上に初回アクセスのみ動画を表示させたい、 Webページ上に初回アクセスのみモーダルウィンドウを表示させたい、 など、初回アクセス時に処理・制限を変える要望があり、 「jquery.cookie.js」を使ってのクッキー処理にて それらを制御するサンプルを作ってみたので、 メモ書き程度に紹介してみます。 今回のサンプルでは、 初回アクセス時のみページ上に「初回アクセスです。」の メッセージテキストを表示するサンプルです。 jQuery Cookie First Access Control まずは動作サンプルから。 下記のリンクをクリックして表示されるページは、 初回アクセス時のみ、ページ上に「初回アクセスです。」のテキストが表示されます。 ※リロードしてアクセスが2回目以降となるとテキストは非表示になります。 ≫jQuery Cookie First A
jqGrid Demos
jqGrid 4.0 New search module, Tree Grid and SubGrid improvements, new colModel cellattr event and much more... Enjoy Please, support the jqGrid project by clicking on our sponsors ad!
csv2tablejQuery でCSVをテーブル表示
あと、最近のブログはここ JavaScript++かも日記 Facebookの仮想通貨Libra/Diemが来春リリースらしいので久しぶりに触ってみてます Facebookの仮想通貨Libra/Diem関連 |Blog | Demo | Facbook JavaScript部 | jQuery › Downloads › Plugins › csv2table | ( ccchart/ jQchart ) nightly- testing themeroller width jQuery 1.3. test-tm.htm blog デフォルトCSSのリセット方法 Reset the CSS ( default style sheet of csv2table ) csv2tableのデフォルトCSSをリセットし、自由にCSS設定する。 このページに$.csv2table.cssReset(
jQueryプラグインで要素をｷﾘｯっと切り替える「MobilySelect」
ポートフォリオをWEB、紙・・・などと切り替えるときに使えそうなjQueryプラグインMobilySelectを紹介します。 これを導入すればユーザーへの訴求力が高まるかもしれません。 sponsors 使用方法 MobilySelectからファイル一式をダウンロードします。 <link href="default.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script src="mobilyselect.js" type="text/javascript"></script> <script> $(document).ready(function(){ $('.class名').mobilyselect({ col
Instagram APIを使用し、タグで絞った画像を一覧表示する方法 | Stronghold Archive
どうもこんばんは。今回のtipsは【Instagram APIを使用し、タグで絞った画像を一覧表示する方法】になります。方法に関してはとても便利なプラグインがありましたのでそちらを使用してみます。 実装方法 クライアントIDの取得 まずはクライアントIDが必要になります。コチラより開発者登録をしてください。 コード Potomakのダウンロード JS <script src="jquery.1.X.X.js"></script> <script src="jquery.instagram.js"></script> <script> $(function() { $(".instagram").instagram({ hash: ‘検索対象のタグ（ハッシュ）’, show: 12,//表示件数 clientId: ‘ここにクライアントID’ }); }); </script> HTML <
ツイッターのツイートに含まれる画像を、サイトに一覧表示する方法を探しています。 - TwitPicのページには公式のブロ... - Yahoo!知恵袋
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example</title> <script> var TPic = { targetID: 'twitpic', displayLimits: 5, callbackID: 'twitpicCallback' + (new Date).getTime(), keyword: '', script: null, jsonp: function (src) { var head = document.getElementsByTagName('head')[0] || document.documentElement; var script = document.createElement('script'); head.appendChild(script); scri
jQueryを使用して指定したハッシュタグのつぶやきを取得する
jQueryを使用して指定したハッシュタグのつぶやきを取得する Twitterのつぶやきを表示しているWebサイトがだいぶ多くなってきた昨今。イベントサイトなどでは特定のハッシュタグのつぶやきを表示するといった使い方もされているようです。 ということでこの記事ではjQueryを使用して指定したハッシュタグのつぶやきを取得して表示してみます。 投稿日2010年12月11日 更新日2011年04月02日 Twitterのハッシュタグを検索し取得するURI Twitterからはさまざまな形式でデータを取得できますが、jQueryを使用するならjson形式が便利です。 ハッシュタグを取得するURIは下記です。 http://search.twitter.com/search.json?q=%23[ハッシュタグ名] [ハッシュタグ名]は取得したいハッシュタグ名に置き換えてください。 たとえば「#wo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery plugin: Tablesorter 2.0