Flip!a jquery plugin - jQueryを使ったフリップをめくるような動きをするスクリプト

ちょっと面白い動きをするものがあったので紹介します。jQueryを使ってるわけだけど、ぺろっとフリップがめくれてFlashで作ってるみたい。
どのようなものか説明しづらいのでこちらのサンプルでご確認ください。

Flip! - A jQuery plugin

Flip! - A jQuery plugin
基本的な構造はサンプルを見てもらうとしてポイントは以下の部分
$("#flipBT").click(function(){
    $("#flipBox").flip({
                direction: 'bt',
                color: '#D46419',
                speed: 400,
                content: ""
                });
    });
それぞれの意味はこんな感じです。
direction : めくれる方向を指定(デフォルトは tb)
  tb → 上から下へ
  bt → 下から上へ
  lr  → 左から右へ
  rl  → 右から左へ

color : 背景の色
speed : めくれるスピード(デフォルトは500)
content : 中身をここに記述します
また、デフォルトだとめくった際にページ上部まで移動してしまうので、ページの下のほうで使用する場合はボタンの部分を以下のほうにしたほうがよいと思います。
<a id="flipBT" title="下から上へめくれます" href="#buttons">bottom > top</a>
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
質問です。
Webparkさんのブログで日々勉強させていただいています。

jQueryでのFlipに関する質問です。フリップ前とフリップ後の写真を入れ替えたいのですが、フリップ後の写真データはどこに、どのように記述すれば良いのでしょうか?

質問わかりづらく申し訳無いですが、回答よろしくお願いします。

※例題として、ダイエット前→ダイエット後
【2011/07/29 03:14】 | daidai #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加