デモ・サンプルパーツ（表示・効果）の一覧

• ヘッダー系
• グローバルメニュー系
• スライド系
• ボタンクリック
• その他（CSS・Javascript）
• リンクスクロール・グラフ表示
• ウェブサイト（サンプル）

ヘッダー系

• 動画が繰り返し流れるサイト

  

  スポーツシューズメーカーのイメージ

• 「hover」した画像を表示

  

  サムネイル画像を大きく表示させる

• 画像を並べる

  

  大きい画像に対して小さい画像を整列

• リック先にきれいに表示

  

  ページ内リンクをピタッと合わせる

• 画面ローディングイメージ

  

  トップページ読み込み前のイメージ

• ヘッダー画像のイメージとロゴ

  

  イメージ画像を斜めにカットしてタイトルを表示

• トップローディングイメージ

  

  １日の間に２回目はローディングしない

• 背景に被さってくるイメージ

  

  スクロールすると背景に下側が被さる

• 背景に被さってくるイメージ2

  

  背景が拡大しながら下側が被さる

• ローディング背景が伸びる

  

  背景が上から下へ伸びる

• ローディング背景が伸びる２

  

  背景が下から上へ伸びる

• ローディング背景が伸びる３

  

  背景が右から左へ伸びる

• ローディング背景が伸びる４

  

  背景が左から右へ伸びる

• ローディング背景が伸びる５

  

  背景が中央から外へ伸びる

• ローディング背景が伸びる６

  

  背景が中央から上下へ伸びる

• ローディング背景が伸びる７

  

  背景が斜めへ伸びる

• ローディング背景が楕円に萎む

  

  背景が中央へ縮む

• ローディング背景が四隅へ

  

  背景が四隅へ拡大

• ・・・・・・・・・

  

  ・・・・・・・・・・・

• ・・・・・・・・・

  

  ・・・・・・・・・・・

グローバルメニュー系

• ヘッダーメニューの固定

  

  スクロールすると上部に固定

• ヘッダーメニューを途中から固定

  

  スクロール途中で固定

• ヘッダーメニューを途中から変更

  

  スクロール途中でハンバーガーに

• ヘッダーメニューを途中から変更

  

  スクロール途中で高さを変える

• メニューを固定する

  

  スクロールすると追従

• 固定してメニューリンクが変わる

  

  スクロールするとメニューが移動

• 固定メニューの下側が被っていく

  

  スクロールすると紙芝居風になる

• メニュー項目が入れ替わる

  

  hoverすると項目が入れ替わる

• サイドにリンクボタンがある

  

  スクロールするとサイドのボタンが変化

• バーガー本線が×に代わる

  

  クリックすると×になる

• バーガーメニューがCLOSEになる

  

  クリックするとCLOSEになる

• バーガーが立体的に×になる

  

  クリックすると奥行きをもって×に代わる

• バーガーが回転して×に

  

  クリックすると横方向に回転する

• ドロップダウンメニュー上

  

  クリックすると下方へサブメニューが

• ドロップダウンメニュー左

  

  左メニューからドロップダウン

• ドロップダウンメニュー上（写真付き）

  

  写真付きのサブメニューが表示

• ドロップダウンメニュー左（写真付き）

  

  写真付きのサブメニューが表示

• CSSのみで実装（ドロワーメニュー）

  

  480px以下でバーガーメニューになる

• jQueryを使ったレスポンシブ

  

  768px以下でバーガーメニューが表示

• 一般的なレスポンシブメニュー

  

  ブレイクポイントは自由に

ボタンクリック

• ボタン１

  

  背景が流れる（左から右）

• ボタン２

  

  背景が流れる（右から左）

• ボタン３

  

  背景が流れる（上から下）

• ボタン４

  

  背景が流れる（下から上）

• ボタン５

  

  背景が流れる（中央から横全体）

• ボタン６

  

  背景が流れる（中央から縦全体）

• ボタン７

  

  背景が流れる（中央から外）

• ボタン８

  

  背景が流れる（斜め）

• ボタン９

  

  くるっと回転（手前に）

• ボタン１０

  

  くるっと回転（奥に）

• ボタン１１

  

  クリックしたら波紋が

• ボタン１２

  

  押し込まれる（円が縮小）

• ボタン１３

  

  下に押し込まれる（立体が平面に）

• ボタン１４

  

  影がついて浮き上がる

• ボタン１５

  

  影が広がって浮き上がる

• ボタン１６

  

  線から塗に変化

• ボタン１7

  

  表示されているテキストが変わる

リンクスクロール・グラフ表示

• ページ内リンクスクロール

  

  指定の場所にスクロール

• ページ内リンクスクロール②

  

  メニュー固定型

• ニュースステッカー

  

  上下に遷移するお知らせ

• グラフの表示①

  

  数字のカウントアップ・ダウン

• グラフの表示②

  

  棒グラフ

• グラフの表示③

  

  棒グラフ（横・複数バー）

• グラフの表示④

  

  棒グラフ（1本）

• グラフの表示⑤

  

  折れ線グラフ（複数）

• グラフの表示⑥

  

  円グラフ

• グラフの表示⑦

  

  円グラフ（ドーナツ型）