今日で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
いかがでしたか？どれもおしゃれでかっこいいですよね！
みなさんもぜひインスピレーションを感じてデザインに生かしてみてください。