タグ

html5に関するnonsectのブックマーク (5)

  • WebGL Water

    Made by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube. Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to move it around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytrac

  • PushStateとPopSatateを使った暗黒魔術 - Qiita

    顧客情報とか秘匿したままページ遷移したい場合、Ajax とPushState+PopState のPjax が便利ですよね(IE? ヤツは死んだよ。) で、まあ今作ってるサイトもそれでいけるかなーと思ったんですがなかなかくせ者でした。 上記ライブラリ自体が後付けって理由もなきにしもあらずなんですが、PHPフレームワークを使用しながらモーダルからAjax でページ更新する場合, http://[host_name]/# #はあってもなくてもいいんですがこの形なら正常にHTMLの上書きができるのですが http://[host_name]/index/index/index みたいな形だと何故かAjax処理の部分で失敗してうまく動いてくれません。 なので PushStateのURI書き換え機能を利用して URIを書き換えて http://[host_name]/# としてページのリロードをして

    PushStateとPopSatateを使った暗黒魔術 - Qiita
  • 16行 で pushState popState - Qiita

    2013/12/27 追記:初回アクセス時に popState イベントが発生しリロードしてしまう問題への対策を記載しました。(この追記により、タイトルが 15行 → 16行 に変更になりました^^) pushState popState とは Ajax を使ったスムーズな画面遷移でも、URL を書き換え履歴に追加し、ブラウザバックに対応することができる仕組みです。SEO への影響を出すこと無く操作性を向上させることができます。 現在、pushState/popState を使ったクライアントサイドルーティングを実現するライブラリがいくつか作られていますが、今回は jQuery だけで行うシンプルな方法を紹介します。 参考: Googleに続いてBingもAjaxにはpushStateを推奨 題 jQuery だけで、15行程度でできる pushState popState を使った A

    16行 で pushState popState - Qiita
  • History APIとスマホブラウザでのハマりどころ - Qiita

    仕事でスマホ用サイトをイジっておりまして、非同期処理でのページングを 修正するに際して、History APIを触ってました。 スマホのブラウザ周りの差分で色々とハマったので、メモしておきます。 History APIとは とりあえず復習しましょう。 概要 HTML5で追加された、履歴操作のAPI。 履歴スタックに履歴を追加(push)、現在の履歴の書換(replace)、 ブラウザバック等のアクションによる履歴移動を監視する(pop)、といったことが可能になる。 history自体は以前からあって履歴の操作は画面遷移を伴っていたが、これらのAPIの追加によって、 画面遷移を行わなくともJavaScriptからの履歴操作が可能となった。 pushState 履歴をスタックに追加する。

    History APIとスマホブラウザでのハマりどころ - Qiita
  • jQueryだけで(Pjaxを使わずに)Ajax+pushStateする方法

    Sensebahnのサイト内では、ページを遷移するときにページ全体の更新ではなくページの一部を書き換える方法をとっています。(2013/1/31のデザイン変更で廃止しました。) そうすることで、ページ全体を読み込むよりも速く遷移でき、さらに、画面がブランクになる瞬間が発生しないので目のチラツキを抑えられます。 仕組みとしてはAjaxを使います。 AjaxはJavaScriptで簡単に使うことができます。 JavaScriptを使って、Ajaxによりページの一部を、他のページの内容に書き換えるのです。具体的には、次のコードでやります。 example.html <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <scri

    jQueryだけで(Pjaxを使わずに)Ajax+pushStateする方法
  • 1