サイトに取り入れたい!codepenの秀逸なスライドアニメーション

今日で9月も終わり。
今年も残すところ約3か月となりました。

 

先週は音楽仲間とBBQをして、身も心もリフレッシュ!
そういった直後って結構デザインを作成したくなったりして、いろいろ構想を考えるんですが、
そのときに『こういった動きがほしいなぁ、どう実装しようか』と頭をひねります。

 

そんなときに頼りにしているのがcodepen。先人たちがいろんなアイディアを出してくれています。
今日はその中でも、今後ウェブサイトにアレンジ等を加えて導入したいと思ったcodepenのスライドアニメーションを
ご紹介します。

 

3つ同時に動くスライド

See the Pen Sliding Background Gallery by Ron Gierlach (@youfoundron) on CodePen.0

 

最近よくみる文字部分だけカラーにしたスライド

See the Pen Responsive Parallax Drag-slider With Transparent Letters by Ruslan Pivovarov (@mrspok407) on CodePen.0

 

周りをぼかしつつ拡大して表示するスライド

See the Pen Popout Slider by Nathan Taylor (@nathantaylor) on CodePen.0

 

クリックすると全画面表示されるコンテンツスライド

See the Pen Fully Responsive Layout With Nice Animation by Ruslan Pivovarov (@mrspok407) on CodePen.0

 

シンプルながらも動きが独特のおしゃれなスライド

See the Pen Slice Slider by Stephen Scaff (@StephenScaff) on CodePen.0

 

斜めを生かした、ぼかしを利用して画像を切り替えるスライド

See the Pen CSS-only image slider using SVG patterns by Damián Muti (@damianmuti) on CodePen.0

 

とにかくかっこいい!四角形ををおしゃれに使用したおしゃれなスライド

See the Pen Fancy Slider by Nikolay Talanov (@suez) on CodePen.0

 

いかがでしたか?どれもおしゃれでかっこいいですよね!
みなさんもぜひインスピレーションを感じてデザインに生かしてみてください。