ICONIC FURNITURE

Webデザイン３つの良いとこ : 3 Good Point!

1. フラットWebデザイン
2. ペラペラめくるようなスクロール
3. コンパクトに収めたWebデザイン

私はWebデザインのココを見た！

• Tweet
• 

フラットデザインが素敵なベタ塗りWebデザインです。カーテンを開く、というか下からペラペラめくるようなスクロールアニメーションは、jQueryプラグイン「Curtain.js」によるもの。

ペラペラめくるスクロールアニメーション

実際にサイトにアクセスして頂くと簡単にわかりますが、カーテンが下から開く、というか画像をペラペラめくるような演出がスクロールで行われます。また、矢印キーでも利用が可能になっています。

これはjQuery「Curtain.js」を利用したもの。とっても簡単便利に利用できます。

まずHTMLとして、

<pre><ol class="curtains">
    <li class="cover">
        your content
    </li>
    <li>
        <div class="fixed"> <!-- if you need a "fixed" content -->
            a fixed content
        </div>
        [...]
    </li>
    <li class="cover">
       [...]
    </li>
    <li >
        <ul>
            <li class="step"> ... </li> <!-- Add the class "step" to an element to  -->
            <li class="step"> ... </li> <!-- make a break at this point with keyboard controls  -->
        </ul>
    </li>
</ol></pre>

のようなものがあった場合、coverというclassを指定して、jQueryを実行します。

<pre>$(function () {
    $('.curtains').curtain({
        scrollSpeed: 400
    });
});</pre>

これだけ。ちょうどペラペラめくる要素を、.curtainで指定してあげればOKです。

Victa / curtain.js

この簡単ではありますが、使い方次第でもとても印象的に魅せることができるjQuery。これをフラットデザインと融合させているこのWebデザインは、なにか新しいことが出来そうなインスピレーションを与えますね。

このサイトのフラットな家具イラストやタイポグラフィも素晴らしいんですよ！ですがその上で、やろうと思えば比較的簡単にもっと綺麗に魅せることが可能なんだなー。とjQueryの偉大さを改めて感じました。

この素敵なWebデザイン、「いいな」と思いました？
その気持ちをポチッと残しておきましょう！

• ツイート
•