Scroll Indicator

JavaScript

シンプルなスクロールインジケーターを実装できる「Scroll Indicator」

Scroll Indicatorは、スクロールによるアニメーションでコンテンツ表示させるスクロールインジケーターを実装することができます。シンプルでさりげないスクロールアニメーションで、下にあるコンテンツを表示させることが可能です。

Scroll Indicator

デモ

デモでは下矢印のボタンをクリックすると、自動で下にあるコンテンツまでスクロールします。それと同時に下矢印ボタンがうっすらと消えていくのがオシャレですね。

さりげないアニメーションにより、自然な流れでコンテンツを読み進めたくなってきます。また、逆に上へスクロールしていくと、下矢印ボタンが段々と濃く表示されていき元の状態へ戻ります。

というわけで、さりげないスクロールによるアニメーションでコンテンツを表示させたい人は、ぜひScroll Indicatorを活用してみてはいかがでしょうか。

Scroll Indicator

Apple WatchでスクリーンショットApple Watchでスクリーンショットを撮るための設定方法前のページ

6種類のモーダルウィンドウを実装できる「popModal」次のページpopModal

関連記事

  1. JavaScript

    フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLa…

    フォームを入力する際にあると便利なのがplaceholderです。しか…

  2. Folder Preview Ideas

    JavaScript

    フォルダに楽しいホバーアニメーションをつける「Folder Preview Ideas」

    Folder Preview Ideasは、フォルダにさまざまな楽しい…

  3. JavaScript

    スマホやタブレットでのスワイプに対応したモバイルにも最適なjQueryスライダー「Swiper」

    とてもよさそうだったのでメモしときます。スワイプで切り替えることができ…

  4. no-image

    JavaScript

    水平・垂直に対応したカルーセルスライドショー「jCarousel」

    jCarouselは水平・垂直に対応したカルーセルスライドショーを実装…

  5. JavaScript

    スクロールバーにあと何分で読めるかを表示してくれるjQueryプラグイン「jQuery Readin…

    とてもシンプルですが何気に便利そうだったので使ってみました。長文記事を…

  6. SMINT

    JavaScript

    1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイ…

    1ページだけのWebサイトを作る際にとても役立ちそうですね。ナビゲーシ…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP