タイムラインをサイトに埋め込む
年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。
Vertical Timeline
さらにCodyHouse Framework 本体のデータも必要なのでgithubからダウンロードしておきましょう。
<div class="cd-timeline js-cd-timeline">
<div class="container max-width-lg cd-timeline__container">
<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->
<div class="cd-timeline__content text-component">
<h2>Title of section 1</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2019/10</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->
<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->
<div class="cd-timeline__content text-component">
<h2>Title of section 2</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2020/03</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->
</div><!-- container -->
</div><!-- cd-timeline -->
その他のタイムライン
https://codepen.io/paulhbarker/pen/apvGdv
https://codepen.io/cjl750/pen/mXbMyo
https://codepen.io/viktorjs/pen/KQZYjo
https://codepen.io/bcarvalho/pen/RZqmZX
https://codepen.io/carrrter/pen/ELLmyX
タイムラインインフォグラフィック
この記事が気に入ったらサポートをしてみませんか?