ユゲタです。
「スクロール」とかけまして、
「小学校の校長先生の朝礼挨拶」と、ときます。
そのココロは・・・
長くなると飽きられます。
スクロールはWEBページの基本概念
以前仕事で構築した、javascriptによるWEBページの解析システムで、
インターネットwebサイトのスクロールは、「あまり縦に長くないほうがいい」とされている結果がでましたが、
最近では、ページ上部メニューにより、ハッシュタグ（#contentsなど）によるページ移動で、実際に縦長なのだけれど、画面下部までアクセスがあるUIなどの構築もでてきて、
スクロールによるページ管理が重要であることが分かってきました。
要するにこれまで、「ページの下の方って見られないよね」と言われていたのに、必要な内容が書かれていることをファーストビューで表示してあれば、ちゃんと見られるという事なんですね。
でも、ページのスクロールが膨大に長いと知るとユーザーが少しモチベーションが下がってしまうという心理要因もあるので、非常に悩ましいところなのですが、
これを払拭できるかどうかわからないけど、いっそのことスクロール機能を、これまでのブラウザ右側の縦スクロールから、固定ヘッダによる横スクロールに切り替えて、progressっぽくしてみてはどうかというアイデアがあったので、実際にライブラリを作ってみました。
ライブラリ「Scroll Function」
fixedによる、固定ヘッダを扱っているページで利用することができるんですが、そうでないページでは、画面上部固定で「スクロール進捗バー」が表示されます。
ライブラリのソース一式は、Githubにアップしておきました。
https://github.com/yugeta/scroll_function
使い方
ライブラリの中にあるsampleフォルダを真似してもらうといいのですが、以下のようにセットします。
...
<head>
...
<script src='scroll_function/src/main.js'></script>
</head>
<body>
...
<script>
new $$scroll_function({
scrollbar_target : "#header_block",
scrollbar_color : "green"
});
</script>
</body>
</html>
"scrollbar_target"は、fixedのヘッダ要素のselectorを記述してください。
ちなみに、position:Fixedになっていない場合は、ページ上部にへばりつくようになります。
"scrollbar_color"は、色指定ができます。
ページの背景色などに溶け込まない目立つ色を指定してください。
デフォルトは、"#00F"にしてあります。
画面イメージは以下のとおりです。
ついでに、画面上部のスクロールprogresのバーをクリックすると、その位置までスクロールをしてくれる機能も入れてあります。
今後の予定
scrollMagicというjavascriptライブラリがありますが、scroll位置に応じた色々なアクションが設定できます。
もっと簡易にこれと同じ処理をしたい時に、使える機能を構築する予定です。
スクロールのつまみをつけることで、通常のスクロールバーを表示しなくても、スクロールをコントロールできるようになります。
画面要素を"overflow:hidden;"で運用することも可能になりますね。
そんな感じでスクロールマーケティングも今後活性化していく事になることを想定して、ライブラリをアップデートしていきたいですね。
0 件のコメント:
コメントを投稿