ブログに戻る場合はこちらをクリック

jquery easing pluginを使ったページスクロールアニメーションのサンプルです。

下のセレクトボックスからeasingの種類と時間を選び

あ行〜ワ行のアンカーリンクをクリックしてください。

easingでInと書いているのは動き初めを

Outと書いているのは動き終わりの事を指します。

InOutと書いているのは動き初めと終わりという事になります。

durationを大きくすると、動作時間が長くなります。

似たような動きが多いですが、リスト最下部のBounceは他と違っておもしろいですね。

お気に入りのeasingとdurationを見つけてテンプレートをカスタマイズしてください。

現在の設定

そのままコピーしてテンプレートにペーストすると便利です。

TOP あ行 か行 さ行 た行 な行 は行 ま行 や行 ら行 わ行

あいうえお

 ↓

  ↓

   ↓

    ↓

     ↓

      ↓

       ↓

        ↓

         ↓

TOP あ行 か行 さ行 た行 な行 は行 ま行 や行 ら行 わ行

かきくけこ

 ↓

  ↓

   ↓

    ↓

     ↓

      ↓

       ↓

        ↓

         ↓

TOP あ行 か行 さ行 た行 な行 は行 ま行 や行 ら行 わ行

さしすせそ

 ↓

  ↓

   ↓

    ↓

     ↓

      ↓

       ↓

        ↓

         ↓

TOP あ行 か行 さ行 た行 な行 は行 ま行 や行 ら行 わ行

たちつてと

 ↓

  ↓

   ↓

    ↓

     ↓

      ↓

       ↓

        ↓

         ↓

TOP あ行 か行 さ行 た行 な行 は行 ま行 や行 ら行 わ行

なにぬねの

 ↓

  ↓

   ↓

    ↓

     ↓

      ↓

       ↓

        ↓

         ↓

TOP あ行 か行 さ行 た行 な行 は行 ま行 や行 ら行 わ行

はひふへほ

 ↓

  ↓

   ↓

    ↓

     ↓

      ↓

       ↓

        ↓

         ↓

TOP あ行 か行 さ行 た行 な行 は行 ま行 や行 ら行 わ行

まみむめも

 ↓

  ↓

   ↓

    ↓

     ↓

      ↓

       ↓

        ↓

         ↓

TOP あ行 か行 さ行 た行 な行 は行 ま行 や行 ら行 わ行

やゆよ

 ↓

  ↓

   ↓

    ↓

     ↓

      ↓

       ↓

        ↓

         ↓

TOP あ行 か行 さ行 た行 な行 は行 ま行 や行 ら行 わ行

らりるれろ

 ↓

  ↓

   ↓

    ↓

     ↓

      ↓

       ↓

        ↓

         ↓

TOP あ行 か行 さ行 た行 な行 は行 ま行 や行 ら行 わ行

わをん

 ↓

  ↓

   ↓

    ↓

     ↓

      ↓

       ↓

        ↓

         ↓

TOP あ行 か行 さ行 た行 な行 は行 ま行 や行 ら行 わ行

ブログに戻る場合はこちらをクリック