codepenのおすすめTimelineを集めてみた

ついにゴールデンウィークも最終日!
1日があっという間に終わりますね~。

 

日々デザインをしているとあらゆるところでタイムライン的なデザインを
実装することが多いです。
ということで私がこれまで参考にさせていただいた
codepenのおすすめTimelineを集めてみました。

 

左右に交互にタイムラインが表示されるパターン

See the Pen Timeline by Bruno Rodrigues (@itbruno) on CodePen.0

See the Pen CSS Timeline by Nils Wittler (@NilsWe) on CodePen.0

See the Pen Vertical Timeline by Sava Lazic (@savalazic) on CodePen.0

See the Pen Responsive Animated Timeline by Gatsby (@Gatsby) on CodePen.0

 

左側に一列でタイムラインが表示されるパターン

See the Pen Simple timeline test by Josh Laincz (@zohf) on CodePen.0

See the Pen Timeline animation by Chris Wright (@chriswrightdesign) on CodePen.0

 

横並びでタイムラインを表示するパターン

See the Pen Timeline by Abhi Sharma (@abhisharma2) on CodePen.0

See the Pen Timeline by Charlotte Dann (@pouretrebelle) on CodePen.0

See the Pen timeline by cenda (@cenda) on CodePen.0

 

背景画像が時代によって変化するおしゃれなパターン

See the Pen timeline by Mert Nerukuc (@knyttneve) on CodePen.0

See the Pen Timeline Sequence V1 by Youssef (@xander1820) on CodePen.0