【ページ内リンクのUIデザイン】悩んだ時に参考にしたいWebサイトまとめ | コラム | ホームページ制作 大阪 インフォメーションメディアデザイン株式会社
ページ内リンク（アンカーリンク）は、コンテンツ内の言わば目次のようなもの。 メインのナビゲーションに比べると、それほど重要性は高く見られていないかもしれません。 ですがデザイナーの私が、Webサイトの構成やデザインを考えるとき、 メインナビと同じくらい悩まされるのが、ページ内リンクのUIデザインです。 ・ターゲット層は？ ・企業イメージ・ブランドコンセプト・時代にマッチしてる？ ・コンテンツの重要度は？ などなど、、、、 今回は、ページ内リンクのUIデザインに悩んでしまった時、 参考になる15個のWebサイトを、タイプ別にご紹介したいと思います。 1. ブラウザに追従するタイプ 1-1. 川重商事株式会社 ファーストビューでブラウザの左下端にひょこっと現れて、小さく収納もできるページ内リンク。 PCもスマホも同じUIデザインで、リンクエリアの背景が少し透過されているところも親切です。 ●P
Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」 - かちびと.net
Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプトです 他のJSライブラリを必要としない非依存型で、アニメーションにはAnimate.cssを使用するため2kbと非常に軽量です 使い方も簡単です <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" /> <script src="https://cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.min.js"></script> Animate.cssとJosh.jsを読み込みます const josh = new Josh({ initClass: "foo", anima
Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス
スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。 実装が簡単 スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。 超軽量 1KBの超軽量ライブラリ。 依存は無し スクリプトは単体で動作し、他スクリプトへの依存は一切ありません。 ブラウザのサポート IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。
CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方
CSSのscroll-snapプロパティを使用すると、スマホのホーム画面のようにちょっとずらすだけで、すぐに次のコンテンツを表示させることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装できます。 scroll-snapプロパティの基礎知識と便利な使い方を紹介します。 Practical CSS Scroll Snapping 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スクロールにスナップさせる「scroll-snapプロパティ」 「scroll-snapプロパティ」のサポートブラウザ 「scroll-snapプロパティ」の基礎知識 親要素の「scroll-snapプロパティ」 子要素の「scroll-snapプロパティ」 「scroll-snapプロパティ」の便利な使い方 スクロールスナ
Matter.jsを使ってスクロール時に背景をアニメーションさせる・「Floaty Bubbles」 - かちびと.net
物理エンジンのMatter.jsを使って、背景をスクロールに応じてアニメーションさせるサンプルです。物理エンジンに沿った動きをするのでランダム性があります。なんとなく目にも優しい印象ですね。Matter.jsの存在を知らなかったので備忘録として。 Floaty Bubbles
実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V
CSSだけでも実装できる！ページ内アンカーやページ上部にアニメーションでスクロールさせるCSS, JavaScriptのまとめ
ページ内のアンカーやページの上部にアニメーションで、スムーズにスクロールさせるCSS、単体のJavaScript、Vue.jsやjQueryのプラグインを紹介します。 現在では、CSSだけでも実装できるようになりました。IEは例のごとく非対応ですが、ポリフィルがあるので利用できます。 イラスト: Girls Design Materials CSSでページをアニメーションでスクロールさせる JavaScript単体でページをアニメーションでスクロールさせる プラグインでページをアニメーションでスクロールさせる CSSでページをアニメーションでスクロールさせる CSSのプロパティ「Scroll-behavior」を使用すると、アニメーションを使用してスムーズにスクロールさせることができます。 Scroll-behaviorのサポートブラウザ scroll-behavior -MDN web
水平スクロールができることを示唆してくれる「ScrollHint」 – bl6.jp
ScrollHintは水平スクロールができることをポインタアイコンを使って示唆してくれるJavaScriptライブラリです。スクロールできることを教えてくれるので、ユーザーが必要な情報を見逃す心配も減りそうですね。 以下のページからScrollHintの実際のデモ動作をチェックできます。 デモ デモではテーブルデータ内に「scrollable」と書かれたポインタアイコンが表示されています。これを見れば水平にスクロールできるということがすぐに分かるので、ユーザーにとっては助かりますね。 ポインタアイコンは横へスクロールすることで消えていくので、ジャマになることもなくとてもいい感じの機能です。スマホなどのモバイルでもしっかり表示されるので、水平スクロールが必要なテーブルを設置したい時にはとても役立つJSライブラリになるはずです。 オプションもいろいろ用意されているので、気になる人はぜひチェック
たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方
短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポートされています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃい
フルスクリーンに最適なナビゲーションメニュー「Fullscrenn-Menu-Jquery-Plugin」 – bl6.jp
Fullscrenn-Menu-Jquery-Pluginは、フルスクリーンに最適なナビゲーションメニューを実装することができるjQueryプラグインです。サイドに表示するシンプルでコンパクトなナビゲーションメニューを取り入れたい人にオススメです。 メニューから目的のコンテンツの位置まで自動スクロール 以下のページから、Fullscrenn-Menu-Jquery-Pluginの詳しい使い方やダウンロードができます。ダウンロードしたファイルから実際のデモ動作もチェック可能です。 Fullscrenn-Menu-Jquery-Plugin デモではフルスクリーンによるコンテンツが全部で6つ用意されています。下へスクロールしていくことでコンテンツが切り替わっていきます。 画面右側にはシンプルなナビゲーションメニューが設置されていて、現在表示されているコンテンツがどの位置なのかが瞬時にわかるよう
長すぎるスマホサイトをスマートにリデザインする6つのコツ
スマホ対応していないWebサイトはもはや少なくなりましたが、あなたのサイトはよいUXを提供できていますか？ 「長すぎるページ」を解決するデザインのコツを紹介します。 進化の早いデジタルの世界におけるデザイナーの役割は、ユーザーに無駄な時間を使わせないようなシンプルなインターフェイスを提供することです。デザインをシンプルにした分だけ、よい多くのコンバージョンを期待できます。とはいえ、市場の大半をモバイルデバイスが占めている現在では、シンプルなインターフェイスを提供するのは簡単ではありません。 なによりモバイルデバイス経由のオンラインショッピングが増えている中で、モバイルユーザーにとって使い勝手が良いWebサイトを構築することが欠かせません。そこで問題になるのがロングスクロールのWebサイトです。 ロングスクロールページの問題 モバイルユーザーはロングスクロールWebサイトへのアクセスを敬遠し
スムーズなアニメーションのスクロールトップ実装「ScrollPress」 – bl6.jp
ScrollPressは、スムーズなアニメーションによるスクロールトップを実装することができるjQueryプラグインです。スクロールトップボタンもアニメーションで表示されます。オプションもかなり豊富なので、カスタマイズ性にも優れています。 ScrollPressの実際のデモページは以下になります。 デモ デモでは下へスクロールしていくと、右下にトップへ戻るためのボタンがアニメーションとともに表示されます。ここをクリックするだけで、スムーズなアニメーションで画面上部までスルスルとスクロールされます。 ランディングページや長文記事が多いブログなど、縦長のページにはピッタリの機能ですね。 また、デモでは左側にID1〜ID5までの項目も設置されており、いずれかのIDをクリックするとその場所まで自動でスクロールされます。もちろん、こちらもアニメーション付きでのスクロールになります。 縦長でボリューム
スクロールに合わせてナビゲーションに現在地を明示するスクリプト・「Progress Nav」 - かちびと.net
Progress Navはスクロールとともにナビゲーションに現在地を明示するスクリプトです。上の動作サンプルのようにスクロールに合わせてナビゲーションに用意したバーが動いて現在地を教えてくれる、というもの。この手のは同じように明示する方法ありますけど、この方法も悪くないと思ったので備忘録。 Progress Nav On Github
jQueryでスクロール量に応じて拡大するヒーローイメージ
jQueryでスクロール量に応じて拡大するヒーローイメージ 最近はトップページでメインビジュアルを画面いっぱいに表示することが多いですよね。 ヒーローイメージというらしいですが、今回はjQueryを使用してスクロール量に応じて画像を拡大する方法をご紹介します。 投稿日2016年12月28日 更新日2016年12月28日 HTML 画像はCSSので配置するのでscale-bgというクラス名の空のdivを配置します。 fixedで固定表示するので他の要素とは別にしておきます。 HTML <div class="scale-bg"></div> <h1>Title</h1> <div class="contents"> ・・・ </div> CSS scale-bg に fixed、contents に relative を指定して位置を調節します。 CSS .scale-bg { backgr
繰り返し画像を横にスクロールさせるjQueryプラグイン「infiniteSlide」｜アド･エータイプ スタッフブログ
今回はjQueryのプラグイン「infiniteSlide」をご紹介します。 「infiniteSlide」は横方向に繰り返し画像をスクロールさせることができるプラグインです。 WEBサイトのメイン画像などは複数の画像を使用して、自動で繰り返しスライドさせたいということがあると思います。 jQueryのプラグインでも画像をスライドさせる物はたくさん存在しますが、 とてもシンプルで活用できそうだったので下記に使用方法を記載します。 「infiniteSlide」で無限に画像をスクロールする方法 下記のページから「infiniteSlide」をダウンロードします。 https://github.com/woodroots/infiniteslide ファイル読込 jQuery、ダウンロードした「infiniteSlide」を読み込みます。 <script type="text/javascri
スクロールで背景カラーを変化させる「Changing Background Color while scrolling」 – bl6.jp
Changing Background Color while scrollingは、スクロールすることで背景カラーを徐々に変化させることができます。いろんなカラーを楽しめるので、コンテンツの雰囲気や配置に合わせて変化させるのもおもしろそうですね。 HTML、CSSに背景カラーを設定 以下からChanging Background Color while scrollingの詳細や実際のデモ動作をチェックできます。 Changing Background Color while scrolling 下へスクロールしていくことで、鮮やかなブルーからダーク系のブルーに変化していきます。途中、グリーンやオレンジ、パープルなどの色にも変化します。滑らかに変化していくので、スクロールが楽しくなりますね。 デモでは、HTMLのdiv（クラス名：slide、slide-five）とCSSのbodyに背景
スクロールでフッターメニューを表示させる「footerMenu」 – bl6.jp
footerMenuはスクロールするとフッターメニューを表示させることができるシンプルなjQueryプラグインです。スクロール時にヘッダーではなく、フッターを固定させて表示させたいという方にはピッタリのプラグインですね。 以下はfooterMenuのデモになります。 デモ デモでは、下にスクロールしていくとフッターメニューが滑らかなスライドアップとともに表示されます。逆に一番上までスクロールすると、今度はスライドダウンしながらフッターメニューが非表示になります。 自然な感じでさりげなくメニューが表示・非表示されるので、煩わしく感じることも少ないのではないでしょうか。 スクロールでメニューが固定表示されるので、いつでも各メニュー項目にアクセスできるのが便利ですね。シンプルで利便性も高い機能だからこそ、活用してみたくなります。 というわけで、スクロールでフッターメニューを表示させたい方は、ぜひ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://chibinowa.net/note/js/fixedheader.html
ScrollMagicを使った追従メニュー・追従サイドバーの実装例。 | ネクストページブログ
スクロールしたらヘッダーの一部だけ固定する - Qiita
