タグ

カルーセルとスクロールに関するthree_beeのブックマーク (1)

  • マウスオーバーで動くなめらかカルーセルパネル (1/2)

    軽快でなめらかなカルーセルパネル 毎週アップロードされる充実した動画コンテンツを、カルーセルパネルやボックスレイアウトで賑やかかつコンパクトにまとめている「Universiteit van Nederland」。このサイトのカルーセルパネルは、マウスカーソルの位置に応じて軽快でなめらかに動く。 STEP 1:基構造を用意する 今回作成するカルーセルは、横長のコンテンツをマウスの座標に応じて左右に移動させることで、スクロールの動きを演出している。 通常のボックススクロールでは、overflow: scroll; でスクロールバーを表示させ、スクロールバーの操作によってコンテンツを移動させる。今回のカルーセルは、スクロールバーの代わりにマウス座標を利用するため、overflow: hidden;で表示ボックス(.holder)からはみ出す部分を非表示化。内部(.inner)に横長のコンテンツ

    マウスオーバーで動くなめらかカルーセルパネル (1/2)
  • 1