ITエンジニア/デザイナ向けにオープンソースを毎日紹介

何のことを言っているのか分かるでしょうか?

最近、最初の表示はインパクト強く1枚の画像で表示して、スクロールすると本来のコンテンツを表示するタイプのページがあります。Summallyのページがちょうどそんな感じになっています。

似たようなページデザインを実現してくれるライブラリがdoormatです。さっそく使ってみましょう!

doormatの使い方

最初の表示です。大きなドアマットが表示されています。
最初の表示です。大きなドアマットが表示されています。

スクロールしていきます…何もない真っ白なウィンドウです。
スクロールしていきます…何もない真っ白なウィンドウです。

スクロールしきったタイミングでコンテンツが表示されました。
スクロールしきったタイミングでコンテンツが表示されました。

スクロール中から文字を表示させることもできます。
スクロール中から文字を表示させることもできます。

シングルページアプリケーションのパララックスイフェクトを使ったテクニックと同じですが、完全にスクロールするまでコンテンツを表示しない点はユニークです。未ログインユーザに対してサービスの魅力をアピールしたりするのに使ったり、アプリ紹介ページで使うのも良さそうです。

doormatはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

doormat | wipe your fingers before you come in!

jh3y/doormat

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2