JavaScript

CSS3のTransitionでダイナミックなページ遷移。

2012.04.22 / Labs

CSS3のTransitionによるアニメーションで、Flashのような動きのあるダイナミックなページ遷移のサンプルです。

 

実はこれは「impress.js」というプレゼンテーション用のスクリプトを拝見してとても興味を持ったので、理解する目的で自分なりに作成してみたものです。

 

CSS3のアニメーションには「jQuery Transit」というプラグインを使わせてもらっています。
サンプルはこちら

 

仕組み的には拡大・縮小と回転を取り入れて、ページ(コンテンツ)の移動の際にアニメーションを行います。キーボードはスペースキーでページを送り、また方向キーでそれぞれ進む/戻るを設定しています。
HTMLでは、外側のコンテナと内側のボックス、さらにその中に各コンテンツを並べています。

CSSでは各コンテンツのサイズを座標を指定しています。

JavaScriptは外部ファイルに記述しています。
コードの大部分は、各要素の座標を管理するためのものです。

習作用のためシンプルな構成ですが、これだけのコードでもCSS3を使ったダイナミックなコンテンツが可能になります。現在はIEがCSS3のアニメーションに対応していないのが残念ですが、今後は思い切ったデザインのサイトも増えていくように思います。

jQueryで画像を非同期で読み込み。

2012.04.13 / Notes

jQueryで非同期通信で画像データを読み込んで、読み込み完了時に処理を行うスクリプトのメモです。
サンプルはこちら

リンクをクリックした際に画像データの読み込みを開始して、「bind」のイベントハンドラで読み込み完了時に「div#target」へ画像を挿入しています。

DrupalでjQueryを利用する際に気をつけること。

2012.03.01 / Notes

DrupalではデフォルトでjQueryが含まれていますが、利用の際には少し気をつける必要があります。
通常jQueryでは、ステートメントの最初に「$」マークのエイリアスから書き始めますが、Drupalでは、他のJavaScriptライブラリとのコンフリクトをさけるために、「$」から書き始めることができません。

 

それを回避する方法としては「$」エイリアスを使わずに、

というように「jQuery」から始めることで利用できます。
この場合、既存のスクリプトを再利用する際に「$」を「jQuery」に書き換えないといけないので、都合の悪いこともあります。
そのままの「$」を使いたい場合には、下記の様にステートメントごと「(function($){}(jQuery));」でくくって、「$」を「jQuery」に置き換える方法もあります。

jQueryを使ったシンプルなイメージスライダー。

2012.02.11 / Labs

jQueryを使ったシンプルなイメージスライダーのサンプルです。
ボックス内に複数の画像を横に並べて、左右にスライド表示をする仕組みです。
サンプルはこちら

HTML内では#galleryボックス内に画像を並べているだけです。画像の枚数には指定はありませんので、何枚でもOKです。

CSSでは基本的にボックスのサイズ指定と、オーバーフロー時に隠す設定のみです。

画像のスライドは「prev」「next」のリンクをクリックした際に、左右にスライドします。スライドする位置は、あらかじめ各画像サイズをもとに座標位置を配列に格納しておきます。

Google Mapsで住所、緯度・経度を取得。

2012.01.27 / Labs

Google Maps APIを使って、マーカーの位置から住所、緯度・経度を取得と、住所からマーカーの移動および、緯度・経度の取得するためのコードのメモです。
サンプルはこちら

マーカーのドラッグで緯度・経度を書き換えて、ドロップの際に住所を書き換えています。
また住所から検索で、マーカーを移動して、緯度・経度を書き換えています。
JavaScript自体のコードはこちら。