画像上に傾いたキャプションを表示

画像上に傾いたキャプションを重ねて表示する。

デモページを表示

CSS

補足

• 傾けないキャプションの表示方法は 画像のレスポンシブ対応（画像上にキャプション表示） を参照。
• slope-caption クラスで、傾いたキャプションのデザインを設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• frame-img クラスに加えて slope-caption クラスを設定することで、キャプションを傾けることができる。

関連投稿

• 画像のレスポンシブ対応（画像上にキャプション表示）

ウィンドウ上端にページのスクロール量を示すプログレスバーを表示

ページを上下にスクロールした時に、そのスクロール量をウィンドウ上端に表示する。

デモページを表示

CSS

補足

• 動的に追加されるプログレスバーのスタイルを設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• body要素に、プログレスバー用のブロック要素（div#progress-bar）を動的に追加している。
• スクロール量に応じて、ページ全長に対する割合を求め、プログレスバーの長さ（＝幅）を設定している。
• このサンプルでは、スクロール量ゼロの場合はプログレスバーの長さをゼロにしている。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• このサンプルでは、body要素にプログレスバー用のブロック要素（div#progress-bar）を動的に追加している。

スクロール方向により異なるアニメーションを付加

指定した要素に、ページのスクロール方向により異なるCSSアニメーションを付加する。

デモページを表示

CSS

補足

• 付加するCSSアニメーションを用意しておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• ページのスクロール方向を判定して、CSSアニメーションのクラスを追加・削除している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• CSSアニメーションを付加する要素にクラス（scrolltop）をつけておく。