【jQuery】沿革・年表ページでよく使用されるレイアウト(スクロールに連動して個別に年表が展開される)

[ ID : 11724 ]
シルバー
【jQuery】沿革・年表ページでよく使用されるレイアウト(スクロールに連動して個別に年表が展開される)
実装目安
3分

概要

沿革・年表ページでよく使用されるレイアウト(PC時、奇数は左寄せで偶数は右寄せ)をCSSで実装し、jQuery を使いスクロールに連動して個別に年表を表示させる方法

用途・要件

  • PC時、各セクションの奇数は左寄せ、偶数は右寄せのレイアウト。
  • スクロールに応じて上から順番に年表が表示
  • テキストの量によって表示位置が自動的に可変
  • SP時、縦線は左寄せ。
  • コンテンツ量に応じて高さが可変。

検証ブラウザ

  • Google Chrome(最新)
  • Microsoft Edge(最新)
  • Firefox(最新)
  • Safari(最新)

その他

  • jQuery v3.6.4使用。
  • 注意)DEMOのプレビューでは正常に動作しておりません。(ローカル作業環境にコードを移してご確認ください)

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

関連記事

全ての記事を見る

KONOCODEのメリット 無料会員登録