Blog

jQueryのイージング効果をスクロールでいろいろ試せるデモを作ってみた

2012.08.08Cat:jQuery デザイナー

最近縦長のサイトが増えてきており、

体外そういうサイトは、ページ内リンクのスクロールに

アニメーション効果がされていることが多いかと思います。

 

そのアニメーション効果は基本的には変わらないので、

なにか面白い動きができないものかと思い、

jQueryのプラグインのjQuery Easing Plugin のイージング効果を利用しよう!

と思い、いろいろと試してみました。

 

その結果、

本家のサイトにも試せるものはありますが、

どれかひとつだけしか試せないのもなんなので、選べるようにしました。

スピードも調節できます。

 

デモは下記リンクから

DEMO

 

違いがわからない動きが多いですね。。。

ものによっては、ものすごい効果のもありますね?

 

イージング効果を付ける方法を説明します。

 

基本的には、jquery.easing.1.3.jsを読み込めばOKです。

(jqueryはもちろん必要です。)

 

あとは、アニメーションスクロールのスクリプトのanimateを以下のように設定すればOKです。

 

なにかおもしろい動きをつけるとちょっと印象には残りますよね。

これからどんどん動きのあるサイトは増えてくるとおもいますので、

その中でどれだけ「ユーザーの記憶に残る」ことができるか、

そのような工夫をしていかなければと思う今日この頃です。

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ