【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする | unitopi - ユニトピ -
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする こんにちは。 pushStateやpopStateというHTML5 HISTORY APIをご存知でしょうか。 もともとhistory APIは前からあり、history.back();などでブラウザの戻ると同じ挙動をさせることができます。 今回はHTML5で追加されたpushStateとpopStateに注目していきましょう。 よくAjaxなど、画面遷移を伴わずコンテンツなどの入れ替えを行う際に活用されています。 Facebookの例 ※個人情報の観点からスクリーンショットがご用意できずすみません。 メッセージページでは左側にメッセージのやり取り相手の写真が並びます。 それらをクリックすることによってメインのやり取りが表示されていく
[JS]アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons
Googleが提唱する「Material Design」は、Webページやアプリなどさまざまなメディアに採用されるようになってきました。そのMaterial Designの中の一つ、サイズやカラーや形を変えることができるデジタルの紙（クァンタムペーパー）をメタファにしたボタンを実装できるスクリプトを紹介します。 デモのアニメーション Quttonsの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプト、jQueryとVelocityを外部ファイルとして記述します。 <head> ... <link rel = "stylesheet" href = "Path/To/Quttons.css" /> </head> <body> ... コンテンツ ... <script src = "Path/To/jQuery" type = "text/javascript"></scr
![[JS]アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons](https://cdn-ak-scissors.b.st-hatena.com/image/square/732285fae252960d582f0d7d1f3f578a0f23f796/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015061608.gif)
[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js
最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。 モーダルウインドウとサイドバーのデモ コマを落としているので分かりにくいですが、ボタンをクリックするとモーダルウインドウやサイドバーに、アニメーションで変形して表示されます。 cta.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="src/cta.js"></script> </body> Step 2: HTML 一つ目のデモ「タイル状コンテンツ」のHTMLは、こんな感じです。 data
![[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3b796beb0e3307e8d7086ea2aaa29efd7e12d443/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015042101.png)
Hide header on scroll down, show on scroll up
When was the last time you looked at a website’s menu and thought “gosh, that is just so pretty.” Unless you’re a designer, chances are it’s never. People don’t visit your website to admire the UI. They go there for the content. They go there to get shit done. “Good design is as little design as possible.” Dieter Rams Fixed headers are fairly common nowadays with big name brands like Facebook, Twi
[JS]コンテンツを効果的にナビゲートするjQueryのプラグインのまとめ
スマフォ・タブレットでよく見かける三本線のナビゲーションをはじめ、コンテンツをスライドしてかっこいいアニメーションで表示されるサイドバー、1ページで構成されたサイト用のナビゲーションなど、あなたの大切なコンテンツを効果的にナビゲートするjQueryのプラグインを紹介します。
[JS]既存のナビゲーションを簡単にレスポンシブ対応のトグル型にするスクリプト -Naver
水平型など、今使用しているナビゲーションをスマフォやタブレットで表示した際に、トグル型ナビゲーションに自動で変更するjQueryのプラグインを紹介します。 スマフォ時の表示 Naverの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <link rel="stylesheet" href="jquery.fs.naver.css" type="text/css" media="all" /> <script src="jquery.fs.naver.js"></script> Step 2: HTML HTMLはナビゲーションの要素を指定できるように実装します。 ※ここでは、navで指定。 <nav> <a href="#">Home</a>
jQuery Menu: Dropdown, iPod Drilldown, ...
jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready Update: We contributed this menu plugin to the jQuery UI library. It’s currently being refactored and slated for upcoming release. You can track its progress at the jQuery UI Planning Wiki (Menu planning page), or better, post feedback or share your own ideas about the jQuery UI planning process by joi
Microsoft – クラウド、コンピューター、アプリ & ゲーム
すべての Microsoft 製品 Global Microsoft 365 Teams Copilot Windows Surface Xbox セール 法人向け サポート ソフトウェア Windows アプリ AI OneDrive Outlook Skype OneNote Microsoft Teams PC とデバイス Xbox を購入する アクセサリ VR & 複合現実 エンタメ Xbox Game Pass Ultimate Xbox Live Gold Xbox とゲーム PC ゲーム Windows ゲーム 映画とテレビ番組 法人向け Microsoft Cloud Microsoft Security Azure Dynamics 365 一般法人向け Microsoft 365 Microsoft Industry Microsoft Power Platform W
UI Layout Plug-in - Home
OVERVIEW This plug-in was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI Layout plug-in can create any UI look you want - from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc. Combined it with other jQuery UI widgets to create a sophisticated application. There are no limitations
Interface elements for jQuery - About Interface
Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery. The collection is dual licensed with the MIT license and the GPL, which basically means you can use it for free for both non-commercial and commerci
RedLine Magazine : jQueryのスルスルスクロールを指定1つでバシバシ使う
jQueryのスルスルスクロールを指定1つでバシバシ使う このブログでも使っているjQueryを使ったスルスルーと動くスクロールなんですが、どこからどこへ移動したのかを目で追えるので分かりやすいし、動きも気持ちいいので大好きです。 多くの案件では1ページ内にページの先頭へ戻るアンカーリンクのみコレを利用してたんですが、この動きがクライアントに大好評のようでページ内の他のアンカーリンクでも使いたいという要望が増えてきました。今までこの動きの指定をJSで指定してたところに1つリンクが増える程度ならclassとリンク先だけ変更して同じ記述をコピーしちゃえばいいやってJSが分からない私の発想で乗り切ってたんですが、1ページ内に5個も6個も増えてくるとさすがに書くのが面倒というか、ほとんど同じ処理なのに重複した記述は要領悪いよなぁと思い始めまして・・・。 例えばリンクのページなんかでカテゴリが5個あ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Column Navigation Demonstration
Google Code Archive - Long-term storage for Google Code Project Hosting.