スクロールをヘッダメニューで表現する「scroll-function」ライブラリ

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。

下駄です。
 

「スクロール」とかけまして、
 

「小学校の校長先生の朝礼挨拶」と、ときます。
 

そのココロは・・・
 

長くなると飽きられます。

スクロールはWEBページの基本概念

以前仕事で構築した、javascriptによるWEBページの解析システムでは、
 

インターネットwebサイトのスクロールは、「あまり縦に長くないほうがいい」とされている結果がでましたが、
最近では、ページ上部メニューにより、ハッシュタグ(#contentsなど)によるページ移動で、実際に縦長なのだけれど、画面下部までアクセスがあるUIなどの構築もでてきて、
 

スクロールによるページ管理が重要であることが分かってきました。
 

要するにこれまで、「ページの下の方って見られないよね」と言われていたのに、必要な内容が書かれていることをファーストビューで表示してあれば、ちゃんと見られるという事なんですね。
 

でも、ページのスクロールが膨大に長いと知るとユーザーが少しモチベーションが下がってしまうという心理要因もあるので、
非常に悩ましいところなのですが、
 

これを払拭できるかどうかわからないけど、いっそのことスクロール機能を、これまでのブラウザ右側の縦スクロールから、固定ヘッダによる横スクロールに切り替えて、progressっぽくしてみてはどうかというアイデアがあったので、実際にライブラリを作ってみました。

ライブラリ「Scroll Function」

fixedによる、固定ヘッダを扱っているページで利用することができるんですが、そうでないページでは、画面上部固定で「スクロール進捗バー」が表示されます。
 

ライブラリのソース一式は、Githubにアップしておきました。
 

https://github.com/yugeta/scroll_function
 

使い方

ライブラリの中にあるsampleフォルダを真似してもらうといいのですが、以下のようにセットします。
 

 

“scrollbar_target”は、fixedのヘッダ要素のselectorを記述してください。
 

ちなみに、position:Fixedになっていない場合は、ページ上部にへばりつくようになります。
 

“scrollbar_color”は、色指定ができます。
 

ページの背景色などに溶け込まない目立つ色を指定してください。
デフォルトは、”#00F”にしてあります。
 

画面イメージは以下のとおりです。
 


 

ついでに、画面上部のスクロールprogresのバーをクリックすると、その位置までスクロールをしてくれる機能も入れてあります。

今後の予定

scrollMagicというjavascriptライブラリがありますが、scroll位置に応じた色々なアクションが設定できます。
 

もっと簡易にこれと同じ処理をしたい時に、使える機能を構築する予定です。
 

スクロールのつまみをつけることで、通常のスクロールバーを表示しなくても、スクロールをコントロールできるようになります。
 

画面要素を”overflow:hidden;”で運用することも可能になりますね。
 

そんな感じでスクロールマーケティングも今後活性化していく事になることを想定して、ライブラリをアップデートしていきたいですね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です