縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトや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ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
Timeline JS
TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet, like the one we used for the Timeline above. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core functionality. Tips & tricks Keep it short. We recommend not having more than
[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip
スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです！ しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 Stripのデモ デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。 各画像をクリック・タップすると、拡大画像がスライドして表示されます。 拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。 デモ：幅780pxで表示 スライド表示させるのは画像だけでなく、YouTubeやVimeoなど
![[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4b391a890221ac5696699ef145a5921c27e5824/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014100601-01.png)
ScrollMagic
ScrollMagic helps you to easily react to the user's current scroll position. It's the perfect library for you, if you want to ... animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control). pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky ele
[JS]CSS3アニメーションを使ったページが簡単な記述で面白いように実装できるスクリプト -AniJS
スクロールするとヘッダがアニメーションで移動したり、コンテンツが次々とスライドして表示されたり、ページのロード時にふわっと表示したりなど、スクロール、ロード、クリック、ホバー、フォーカスなどのさまざまなイベントをトリガーにCSS3アニメーションを適用できるスクリプトを紹介します。 jQueryなどの他のスクリプトは不要です。 AniJS -CodePen こちらのデモでは、ロード時にぶらぶら揺れて表示し、ヘッダのクリック、フッタのクリックにもアニメーションが仕込まれています。 AniJSの使い方 Step 1: 外部ファイル 当スクリプトを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss
[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal
デモページ フッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル 当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述
東京スカイツリー TOKYO SKYTREE
このたびの「令和６年能登半島地震」により被災された皆様に心よりお見舞い申し上げます。 一日も早い復興をお祈り申し上げます。
ie9.jsを使うと出来ること、出来なくなること。 - Toro_Unit
最近ie9.jsを活用することが少々あるので、 いまさらながらまとめです。 配布場所 ie7-js http://code.google.com/p/ie7-js/で配布されています。 デモはhttp://ie7-js.googlecode.com/svn/test/index.htmlで見れます。 使い方 head内に [html] <!–[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]–> [/html] と貼り付けるだけです。フッターに貼ると誤作動起こす場合がたまに合ったような気がします。 できるようになること E > F 子セレクタ。直下の子要素にのみ適応するやつ。 E + F 隣接兄弟セレクタ。Eのすぐ下隣に居る弟要素
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
パララックス制作などで使えるスクロールして特定の位置でアニメーションなどの処理を実行させることが出来る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
タブやページネーションを簡単に実装できる！超軽量のjQueryプラグイン「vanity」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
※編集部注：jQueryプラグイン「vanity」は既にサービスを終了しています。 お疲れ様です、ももこです。 今回はタブやツールチップ等、ちょっとした動きをつけるのに便利で超軽量なjQqueryプラグイン「vanity」をご紹介します。 jSlider – スライダー ナビとページ遷移のついた基本的なスライダー、速度やイージングも調整がききます。 jTabs – タブ コンテンツの切り替えによく使われるタブ。簡単にアニメーションがつけられるのが個人的に気に入りました！ jPaginate – ページネーション ブログで大活躍するページネーション、オプションを細かく設定すればイイ感じに使えそうです。 jSpotlight – スポットライト 選択した要素以外を目立たせなくするスポットライト。タイトルが下からひょこっと出てくるのも良いですね！ 他にも…… 以下のツールを含め、7つの機能が使用
TimelineJSを利用して、ブログのタイムラインを作成してみる
昔作ったサービスとかで利用した事のあるTimelineJSのバージョンが上がって使い勝手がよくなったっぽいので、もう一度使ってみる。 TimelineJSはWordPressプラグインもあるようだけど、今回は別サイトにWordPressで作成したブログの更新情報を載せたかったので、その方法を記載してみた。 ※プラグインのほうも使おうとしてみたんだけど、タグを入れてみてもうまく動作しない。。こっちのほうはもうちょっと調査が必要かな。 1.お目当てのライブラリをダウンロード TimelineJS – Document Historyの右下にあるTimelineJSの「Download」からソースをダウンロード 2.自分のサイトに設置 ダウンロードしたファイルを解凍すると、色々なフォルダ・ファイルがあるけど、実際に使うのはcompiled配下のものだけなので、compiled/cssとcompi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
jQuery plugin: Tablesorter 2.0