
スマホでアニメーションするときはcss3の「translate3d」を使おう
スマートフォン向けのサイトでアニメーションさせたいとき、PCサイトのようにjQueryのanimateを使ってしまうと動きがガタガタになってしまい。これがWebアプリの限界なのかー。って叫びそうになりますが、そんなときはcss3の「translate3d」を使えば滑らかに動きますよ。
- 投稿日
- 更新日

スマートフォン向けのサイトでアニメーションさせたいとき、PCサイトのようにjQueryのanimateを使ってしまうと動きがガタガタになってしまい。これがWebアプリの限界なのかー。って叫びそうになりますが、そんなときはcss3の「translate3d」を使えば滑らかに動きますよ。

GoogleMapはカスタマイズでさまざまなことができますが、コーポレートサイトで使用するときはほとんどピンを立たせてウィンドウを表示させるくらいなんじゃないかなと。
さくっと表示させたいときはiFrameでいいんじゃね? というつっこみ聞かなかったことにしてとりあえずJavascriptでコピペで使えるコードです。

テーブルを操作するのに大掛かりなことはプラグインがいろいろありますのでそちらを使うとして。
ここでは、わりと細かいことをjQueryでやってみます。

自分のブログにTwitterを表示するは当たり前になりつつありますが、「便所なう」とか「トイレなう」とかどうでもいいことまでブログに表示されるのはちょっとあれですね。
そこで専用のハッシュタグをつけてツイートすれば、自分の指定したつぶやきだけ表示できるのでいいかんじかもしれません。

通常はマウスホイールでのスクロールするとピタッと止まりますが、止まるときに余韻が残ったりするとなんだかリッチな感じがしますよね。
ということでjQueryで、その動きを作ってみました。

JavaScriptの関数って他の言語では見ない書き方をされていることがたびたびあります。(自分自身他の言語を詳しく知っているわけではありませんが、、、)
そこで今更ではありますが、JavaScriptの関数の基礎をちょっとだけ勉強してみました。

通常のWebサイトは縦長でマウスホイールで下に移動していきますが、最近よく見かけるようになった横長タイプのコンテンツをjQueryを使用して作成する方法をご紹介します。
機能としてはマウスホイールで横に移動と、ナビゲーションボタンをクリックで指定位置までスライドするということをやってみます。
html5のcanvasを使えば色々できるみたいですが、リストとかのアイコンをcanvasで描いてしまうのはどうなんだろ。ということでやってみました。

「jQuery-URL-Parser」は現在のURLや指定したURLをパースして簡単にパラメータやディレクトリ名などを取り出せるjQueryプラグインです。
HTMLにはさまざまな属性がありますが、HTML5からはdata属性を使用することで独自の設定がきるようになりました。最近ではjQueryMobileで使用されていることもあり、お目にする機会も増えたのではないでしょうか。
この記事ではjQueryを使用してこのdata属性にアクセスする方法をご紹介します。