Scrolling HINTS

//CODE

<div class="scroll-hint">
<div class="barxflow my-2 no-scrollbar">

</div>
</div>


.scroll-hint {
  background-repeat: no-repeat;
  background-attachment: scroll;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) right/20px 100%;
}
.scroll-hint > * {
  background-repeat: no-repeat;
  background-attachment: local;
  border-collapse: collapse;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white 15px) 0 0/50px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), white 15px) right/50px 100%;
}

Ah! Scroll below!
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
The end!
No shadow there.


.scrollbox {
	overflow: auto;
	width: 200px;
	max-height: 200px;
	margin: 50px auto;

	background:
		/* Shadow covers */
		linear-gradient(white 30%, rgba(255,255,255,0)),
		linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,

		/* Shadows */
		radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background:
		/* Shadow covers */
		linear-gradient(white 30%, rgba(255,255,255,0)),
		linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,

		/* Shadows */
		radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

	/* Opera doesn't support this in the shorthand */
	background-attachment: local, local, scroll, scroll;
}

fadebox-方向 :徐々に消える、fadebox-方向-b:黒フェード

抜粋文をグラデーションで徐々に消えるようにする

ブログの記事一覧でタイトルと抜粋文を表示することはよくあります。抜粋文が長いときは文字数制限して「 ... 」を付加するなどということをします。それを徐々に消えるような表示にするTipsの紹介です。シンプルなHTMLに適用するサンプルコードと、当ブログで使っているWordPressテーマのLuxeritasの記事一覧に適すようする場合のサンプルコードも紹介します。

抜粋文をグラデーションで徐々に消えるようにする

キュレーションアプリっぽいスワイプできるバー

css only：：１．テーブルレイアウトの応用

キュレーションアプリのようなタブのスワイプ切替は、cssで動作対処。

※タッチパネルを搭載したデバイスでのみ対応。PCのマウスドラッグには対応せず。

※PC用にjavascripでクリックスクロール対応

nav.nav-horizontal > div.mask > ul

これだとスクロールバーが表示されない


  .nav-table { height: 3em; width: 100%;
     overflow: hidden; }
  .nav-table > .mask { height: 5em; width: 100%;
     overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
  .nav-table ul { margin: 0 auto;
    max-width: 100%;
    display: inline-table; }
  .nav-table .list li { display: table-cell; }

css only：：２．display: flex;と　flex-wrap: nowrap;

.nav-scroller > ul

高さが低いとスクロールバーがかっこ悪いものになる。

.nav-scroller > ul.nav.nav-pills > li.nav-link

要素の高さが確保されるとかっこいいスクロールバーになる（IE11/chromeでも同じ）。


  .nav-scroller {
      position: relative;
      max-height: 3.75rem;
      overflow-y: hidden;
  }


  .nav-scroller > * {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      padding-top: 1rem;
      margin-top: -1px;
      overflow-x: auto;
      overflow-y: hidden;
      text-align: center;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
      padding-left: 0;
      margin-bottom: 0;
      list-style: none;
  }

２：$(div.nav-scroller).swipNAV();
※PCでスクロールしやすいように自動でガイド表示

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。


.swip-nav  { position: relative; z-index: 2;
  max-height: 3.75rem; overflow-y: hidden;
}

.swip-nav .nav { display: -ms-flexbox; display: flex;
  -ms-flex-wrap: nowrap; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  white-space: nowrap;
}

// For PC
$('#psc').swipNAV();

３．ドロップダウン

※キュレーションナビバーでは、overflow: hiddenでカットされるから、ドロップダウンができない。

Selectboxを活用したドロップダウン

→　nja_.kite.jsで対応。

swiper や　固定バーでドロップダウンがうまくいかない。

スクロールバー

スクロールバーデザインの参考


/* スワイプタブ切替 */
.custom-nav > .nav { flex-wrap: nowrap; }
.custom-nav { position:relative; overflow-x:scroll; overflow-y:hidden; }
.custom-nav > .nav > .nav-item { min-width:200px; }

/* perfect-scrollbar javascript */
var ps = new PerfectScrollbar('.custom-nav', {
  wheelSpeed: 2,
  wheelPropagation: true,
  minScrollbarLength: 20,
  maxScrollbarLength: 160
});

/* perfect-scrollbar デザイン */
.ps__thumb-y { background-color: #fd284c; }
.ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y { background-color: none; }

/* */
scroll-snap-align: start;
scroll-snap-type: y mandatory;