2012年7月5日のブックマーク (2件)

  • [JS]ウェーブ状のアニメーションでフェードイン・アウトさせる超軽量スクリプト -WaveAnimate

    エレメントをウェーブ状のアニメーションでフェードイン・フェードアウトさせるjQueryのプラグインを紹介します。 スクリプトは1.7kで超軽量です。 WaveAnimate jQuery Plugin デモ [ad#ad-2] WaveAnimateのデモ デモでは3通りのアニメーションがあり、上キャプチャのものは端のエレメントから順番にフェードします。 エレメント(右端の赤)を除外し、アコーディオンのようなアニメーションを適用することもできます。 赤いエレメントを除外したデモ WaveAnimateの実装 デモを例に、実装方法を紹介します。 HTML デモではdiv要素で実装したボックスを配置しているだけです。 <div id="demo1"> <div id="el1a" class="fademe">&nbsp;</div> <div id="el2a" class="fademe"

  • parallax.jsをいじってパララックスのデモ作ってみた。

    2012年2月17日 カテゴリ: Web制作 parallax.jsをいじってパララックスのデモ作ってみた。 Tweetちょっと前に視差効果のあるパララックスサイトまとめなどがよくホットエントリーに上がってきて、「自分もこんなの作ってみたいなー」と思っていたのでトライしてみました。 チュートリアルは下記サイトを参考にしています。 話題になったNikebetterworldに良く似たサイトを作って解説をしてくれています。 Nikebetterworld Parallax Effect Demo そして出来あがったのはこちらのデモサイトです。 以下、メモがわりの解説です。 まず、チュートリアルのサイトからサンプルファイルをダウンロードしてHTMLをみると次のようなjsファイルが読み込まれているのがわかります。 <script type="text/javascript" src="https: