【jQuery 3Dエフェクト】で動きがイケてるメールフォームを作る

カテゴリーから探す

年別から見る

2012/09/06

【jQuery 3Dエフェクト】で動きがイケてるメールフォームを作る

flip!という良い感じのプラグインがあったので色々やってみた。

設置は簡単で


$( "#flipPad a" ).bind("click",function(){
    $( "#flipbox" ).flip({
        direction: "動き方",
        color: "#ffffff",
        content: "HTML"
    })
});

$( "#flipPad a" ).bind("click",function(){

$( "#flipbox" ).flip({

direction: "動き方",

color: "#ffffff",

content: "HTML"

})

});

という感じでボタンに対してイベントを付加する。
動き方には
左：rl
上：bt
下：tb
右：lr
のいずれかを代入する。

あとはエフェクト後の要素に何を入れたいか
を定義するのが
content
でありHTMLも可。

colorは背景色

サンプルのコードは以下。


$(function(){
    $( "#flipPad a" ).bind("click",function(){
        var $this = $(this);
        $( "#flipbox" ).flip({
            direction: $this.attr("rel"),
            color: $this.attr("rev"),
            content: $this.attr("title")
        })
    });
});

$(function(){

$( "#flipPad a" ).bind("click",function(){

var $this = $(this);

$( "#flipbox" ).flip({

direction: $this.attr("rel"),

color: $this.attr("rev"),

content: $this.attr("title")

})

});

CSS


#flipbox
{
    width: 500px;
    height: 200px;
    line-height: 200px;
    background-color: #d90071;
    font-size: 200%;
    color: #ffffff;
    text-align: center;
}
#flipPad
{
    width: 500px;
    text-align: center;
    margin-top: 10px;
}
#flipPad a
{
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    display: inline-block;
    margin-right: 3px;
    text-decoration: none;
    color: #333;
    text-align: center;
    padding: 3px 4px;
    background-color: #F2F2F2;
    background: -moz-linear-gradient(top, #fafafa 0%, #e2e2e2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#e2e2e2));
    text-shadow: 1px 1px 0px #ffffff;
    border: solid 1px #E3E3E3;
    border-color: #e3e3e3 #e3e3e3 #cccccc;
    box-shadow: 0px 0px 1px #ffffff inset;
    cursor: pointer;
    float: left;
}

#flipPad a:hover
{
    background: -moz-linear-gradient(top, #e2e2e2 0%, #fafafa 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(100%,#fafafa));
}

#flipbox

{

width: 500px;

height: 200px;

line-height: 200px;

background-color: #d90071;

font-size: 200%;

color: #ffffff;

text-align: center;

}

#flipPad

{

width: 500px;

text-align: center;

margin-top: 10px;

}

#flipPad a

{

-webkit-border-radius: 3px 3px 3px 3px;

-moz-border-radius: 3px 3px 3px 3px;

display: inline-block;

margin-right: 3px;

text-decoration: none;

color: #333;

text-align: center;

padding: 3px 4px;

background-color: #F2F2F2;

background: -moz-linear-gradient(top, #fafafa 0%, #e2e2e2 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#e2e2e2));

text-shadow: 1px 1px 0px #ffffff;

border: solid 1px #E3E3E3;

border-color: #e3e3e3 #e3e3e3 #cccccc;

box-shadow: 0px 0px 1px #ffffff inset;

cursor: pointer;

float: left;

}

#flipPad a:hover

{

background: -moz-linear-gradient(top, #e2e2e2 0%, #fafafa 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(100%,#fafafa));

}

HTML


<div id="flipbox">flip-box</div>
<div id="flipPad">
    <a href="#" class="left" rel="rl" rev="#c0d4e0" title="ああああああああああ">left</a>
    <a href="#" class="top" rel="bt" rev="#bfd3b9" title="いいいいいいいいいい">top</a>
    <a href="#" class="bottom" rel="tb" rev="#8c2230" title="うううううううううう">bottom</a>
    <a href="#" class="right" rel="lr" rev="#d3669d" title="ええええええええええ">right</a>
</div>

<a href="#" class="bottom" rel="tb" rev="#8c2230" title="うううううううううう">bottom</a>

<a href="#" class="right" rel="lr" rev="#d3669d" title="ええええええええええ">right</a>

</div>

また、これを応用させてメールフォームを作ってみた。

demo

以下のようにして要素を埋め込み次のステップの関数を呼ぶというようにしている。


<input type="text" id="tb_setp1"><input type="button" value="次へ" onClick="to_step2();"></div>

<div id="step2">
    <div class="box">
        <i>お名前</i>

        <input type="text" id="tb_setp2"><input type="button" value="次へ" onClick="to_step3();">
    </div>
</div>

</div>


function to_step2()
{
    str += "メールアドレス：" + $( "#tb_setp1" ).val() + "
";
    $("#flipbox").flip({
        direction: "rl",
        color: "#c0d4e0",
        content: $("#step2").html()
    })
}