2018年06月5日(火)
スマホ表示で横スクロールがある場合にアイコンを表示してくれるJavaScript「ScrollHint」
Webサイト内に横スクロールさせるエリアを作成した際に
スマートフォン表示ではスクロールバーを表示させることができず、
そのエリアが横スクロールさせることをユーザーに伝えるために苦労したりします。そんな時に使える横スクロールさせるエリアが出現した時に
アニメーション付きのアイコンを表示してそのエリアが横スクロールできることを
視覚的に伝えてくれるJavaScript「ScrollHint」が
とても活用できそうだったので自分用メモとしてご紹介します。スマホ表示で横スクロールさせるエリアにアイコンを表示してくれるJavaScript「ScrollHint」
ScrollHintこの動作を実装させておくと
ページ内を上からスクロールした際に
横スクロールさせるエリアが出現した時点で
そのエリアの前面にアニメーション付きのアイコンを表示して
横スクロールができるということを視覚的に伝えてくれます。実装もとても簡単で「scroll-hint.js」を読み込んで
対象要素に対して以下...
0
23
3
16
author:
BlackFlag
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログ
‹ PREV
ネット広告「不快になったことがある」75％。意図せぬ広告クリックは68％が体験【イーライフ調べ】
NEXT ›
UIデザインの作業状況やワークフローの変化を知り、自分にあった良い方法はどんどん取り入れよう！
Ads
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログBlackFlagの記事『スマホ表示で横スクロールがある場合にアイコンを表示してくれるJavaScript「ScrollHint」』についてまとめています。
この記事は特にレスポンシブ・javascript・アニメーション・アイコン・スマートフォンについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のBlackFlagで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとBlackFlagの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
