年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。
Vertical Timeline
使用するファイル
- style.scss
- main.js
- imgフォルダ内のsvgアイコン
- CodyHouse Framework本体のassetsフォルダ
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 --> <script src="js/main.js"></script>
