スマートフォンサイトのデザイン実装で、横長の要素を画面幅からハミ出して「scroll-x:auto;」させたいシーンってたまにありますよね。
でも、上記の表現をしようとすると、スマートフォンの画面サイズによってはキリの良いところで要素が切れてしまって、ハミ出た部分の要素に気付かれない…という恐れがあります。
実際、自社サービスのスマホサイト実装で上記のような表現をするシーンがあり、社員から「なんとかして欲しい」という要望がありました。
自分の中では100%の答えではないのですが、ある程度認知はされるかな、というレベルの回避策が実現できたので、紹介したいと思います。
先ほどお話ししたのは、WebikeカードTOPページの「Webikeカードご利用例」部分です(スマートフォンサイトの方です)
tableなので、レスポンシブで表現するのも難しく、「overflow-x:auto;」で横スクロールする方法を選択しました。
しかしそのままだと、スマホによっては右側にコンテンツの続きがあるのか分かりにくく、見落とされてしまう場合があります。
そこで、下の画像のような表現方法を思いつき、実装してみました。
表示領域がtableに近づくと、矢印がひょこっとアニメーションする仕組みになっています(実際にスマートフォンでWebikeカードTOPページを見て頂けると分かりやすいと思います)
アニメーションすることにより、閲覧者の意識が一度そちらに向くので、ハミ出したコンテンツに気付かれる確率が上がります。
必要な部分のソースを抜粋＆分かりやすく簡素化すると
html
<div class="contents"> <!-- 横長のコンテンツがここに入る --> </div>
css
.contents {
overflow-x: auto; /* x方向にスクロール表示 */
-webkit-overflow-scrolling: touch; /* スマホでスクロールをスムーズな動きにする */
position: relative;
}
.contents:after {
content:"＞"; /* 矢印 */
position: absolute;
right:50px; /* 初期位置 */
font-size:80px; /* 大きさ */
margin-top: -40px;
top:50%;
opacity: 0; /* 透明度100%で実質非表示 */
}
.contents.show:after {
opacity: 0.2; /* 透明度の変化で表示させる */
transition: .8s; /* アニメーション */
right:5px; /* 移動 */
}
.contents.del:after { /* 矢印を隠す */
display: none;
}
javascript
※jQueryの読み込みが必要
$(function(){
$(window).scroll(function(){
$(".contents").each(function(){
var arrowPos = $(this).offset().top; // 矢印の位置
var scrollPos = $(window).scrollTop(); // スクロールの上位置
var windowHeight = $(window).height(); // 画面の高さを取得
if($(".contents").scrollLeft() == 0){ // .contentsが左に寄っているか判別
if (scrollPos > arrowPos - windowHeight/2){ //矢印付近まで来て、画面の半分に差し掛かった辺りで
$(".contents").addClass("show"); //.showを追加
} else {
$(".contents").removeClass("show"); //.showを削除
}
} else {
$(".contents").removeClass("show");//.showを削除
}
});
});
$(".contents").on('touchmove',function(){ // .contentsに触れたら2度目は出さない処理
if($(this).scrollLeft() != 0){ // 動かしてない状態のタップは除外
$(this).addClass("del");
}
});
});
矢印はcssの疑似要素「:after」を「transition」でアニメーションさせています。
アニメーションの部分はcss、スクロールでの表示非表示・1度タップして動かした場合は表示させないなどの表示処理はjavascriptで行っています。cssのposition・contentの中身の変更や、javascriptでの表示タイミングなどをいじれば、いろいろと応用が効きそうですね。
アニメーションは閲覧者の注意を払うのにはとても効果的だと思います。ただ、多用は厳禁です。鬱陶しいサイトになってしまうので(笑)
あくまでも部分的に使うのが好ましいです。
同じようなことでお困りの方がいらしましたら、是非実装してみてください。
