サンプルを見る (IE6では確認できません

jQueryを使うとかなり簡単にページ内スクロールが実装できるのですが、さらにjQuery Easingプラグインと合わせるとなかなか面白い動きができたりします。

というわけで誰でも簡単に導入できるようにプラグインにしました。以前にslideScroll.js(jQueryプラグイン版）というページ内スクロールの記事を書きましたが、悲しいことに断然こちらのほうがおすすめです。動きが滑らか…そして自分の好きな動きから選べます。

今回はソースの解説もしてるので、興味のある人は見てみてください。

ページ内スクロールプラグインなのに、7KBもあるのはEasingプラグインの容量が5KBだから…これを機に他のアニメーション部分でもEasingプラグインも使うと一石二鳥になったりしますのでぜひ。

サンプルのセレクトボックスでEasingを選んで右の入力欄にDurationを入れて確認できます。
そもそもEasingが何かわからない人も、とりあえず左のセレクトボックスの値を変えて、右のテキストボックスには800あたりを入力して、中央のナビゲーションリンクをクリックしてみてください。

おすすめをちょっとあげてみます。（右の数字はDuration）

• easeOutBounce, 800
• easeInOutExpo, 600
• easeOutElastic, 800

具体的な動きの違いはjQuery日本語リファレンスのEasingページで確認できます。

Read more

もう先週の火曜日になるのですが、CSS Nite in OSAKA, vol.14に参加させていただきました。
そうです、この記事、今更感がいなめません…WordPressの記事を書く前にこっちを書けよという声が…

言い訳としては、WordPressの記事、あれは2日くらい前からの予約投稿だったんですね。
あ、こっちを予約しとけよ、という話ですかｗ

とにかくスタッフの皆様、僕のセッションを見てくださった方、お疲れ様でした・ありがとうございました！
反省する点もいろいろとありましたが、非常にいい機会になりました。なにより楽しかったです。

淡々と話をしているように見えたかもしれませんが、僕の中では色々な盛り上がりなどがあったんですｗ
その後の懇親会では印象が違いますね、と言われたりもしました…まったくそのとおりです笑

CSS Niteのフォローアップ記事からも見れますが、当日のスライドのリンクを残しておきます。

• jQueryプラグインを利用してユーザーフレンドリーなフォームを設計しよう

ついでにjQuery.validation.jsの記事も…

• jQuery.validation.js

jQuery.validation.js

一部対応が遅くなってしまいましたが、修正・更新をしました。
前回まではjQuery1.2.6を同梱してましたが、今回から1.3.2を同梱してます。
主な修正・更新箇所は以下になります。

• AjaxZip2の指定方法を間違っていたので修正しました。
• Dialogを使わずにSUBMITボタンをDISABLEDにするオプションを追加しました。
• Safariで必須チェックが一番上にきていなかったので修正しました。
• Webkit系でdocumentを一度クリックするまで固まる不具合がありましたが、jQueryを1.3以降に更新することで解消されます。

MTをサイト構築に採用するケースは非常に多いと思いますが、WordPressをサイト構築に採用するケースは少ないんじゃないでしょうか？

確かにWordPress単体ではCMSとしてはちょっと足りない機能が多いです。そこでWordPressをブログではなくCMSとしてサイトを構築をするときに便利なプラグインを紹介します。（というかただの個人的なまとめです。）

Read more

simpleSlideを使えば誰でも簡単にHTMLスライドを導入できます。

ファイルをダウンロードする

• simpleSlide.zip(23KB)

要素をマークアップする

simpleSlideではマークアップに決まりがありますが非常に単純です。

ページを分ける

1つのdiv.sectionが1つのスライドページに相当します。

ページにタイトルを付ける

スライドページには必ずひとつのタイトルが必要です。
div.section直下の子要素はHN要素にします。

  
これがタイトルになる

HN要素じゃなくてもいいんですが
とりあえずdiv.section > * のテキストがタイトルとして扱われます。

あとは適当に要素を入れていきます。
blockquoteとかpreとかその辺のスタイルは指定してないので
使う場合はCSSに追加してください。

  
これがタイトルになる
  
テキストテキスト
  

    
リストリスト
    
リストリスト
  

必要なファイルを読み込む

だけです。

こんな感じになります。

操作方法など

これまた簡単です。
ドキュメント上をクリックするとスライドを進めたり戻したりできます。
また矢印キーやスワイプでも操作できます。

• クリックはドキュメントの右半分なら進む、左なら戻る。
• 矢印キーは↑・←は戻る、→・↓は進む。
• Macの場合は上スワイプは戻る、下スワイプは進む。
• メニューをクリックするとタイトル一覧が表示されて好きなスライドに移動できます。
• Back To Titleからいつでもタイトルスライドに戻れます。

細かいところでは

• タイトルスライドは #slide-0 で数字部分が増えていきます。
• #slide-X をURI末尾に付けて呼び出すと対象のスライドで開けます。
• #slide-X の Xは(下部に表示されているスライドページナンバー -1)になります。
• タイトルはスライドのタイトルを付加したものに書き換えられます。

対応ブラウザ

IEには対応してません。。。
CSSのround-borderプロパティを使ってるので正式な対応ブラウザは以下だけです。

• Firefox3
• Safari3