[JS][CSS] Codropsの使えるウィジェットたちを是非とも紹介したい！
今回は、実はお世話になっている人も多いのではないか、と思うCodropsのプロジェクトについて紹介させて頂きたいと思います。
といっても別に私は関係者でも友達でもビジネス的に何か関係があるわけでもなく、単なる利用者なんですが、あまりにセンスがよく、使えるパーツが並んでいるのでこれは共有しなければ、と思ったわけです。ハイ。
Codropsとは
こちらに紹介されていますが、よくわかりません（笑）
簡単に訳すと、
感激と革新的なコンテンツを提供するため、WebデザインとWeb開発のための情熱を共有するためのエキサイティングな遊び場としてブログを公開している
とのことですが、真の目的とかはわかりません。
ですが、無料で使い勝手の良いコードを提供してもらえているので何もいうことはありません。
コンテンツは、サイトのグロナビから順番にみてもらうとわかりますが、出るわ出るわ・・・センスの良い使えるパーツてんこ盛りです。
ここでは、サイトに実装する上で特に使えそうなものを選んでご紹介したいと思います！
Grid Item Animation Layout
固定表示エリアを左側にもち、記事一覧が右側にタイル上に並べられています。
記事を開くと、右側エリア全面に拡大して表示させます。
詳細記事をモーダル表示と言われればそれまでなんですが、今まで見たことがないタイプです。
レスポンシブ対応で、ニュースやブログなど幅広く使えそう。
ただ、詳細記事自体はページ内に埋め込むので、大量に読み込む場合などは気をつけたほうがいいかもしれません。
Inspiration for Button Styles and Effects
なんとJSの読み込みなし！CSSだけで表現しているようです。
ちょっとボタンに動きをつけたいな〜といったときのアクセントに最適です。
Off-Canvas Menu Effects
いわゆるスマホやタブレット利用時にメニューを隠れたところからにゅるっと出すエフェクト集。
他のサイトでは見かけない奇抜?な動きも多数あるので、是非見てみてください。
Animated SVG Icons with Snap.svg
Font Awesomeのような、フォントアイコン。
SVGで作られており、クリック時にアニメーションしてくれるすぐれものです。
簡単なタグでアイコンを表示させることができます。
On Scroll Header Effects
デモページをスクロールしていくと、固定ヘッダの表示がくるくると変わります。
サブナビの表示などもあり、切り替わりもアニメーションするのでスクロールしているだけでも楽しいという。。。
Old School Cassette Player with HTML5 Audio
なんとカセット型のHTML5オーディオプレイヤー。
早送り、巻き戻しのアニメーションもしっかりしていて楽しいです。
まぁ実際使うシーンあるのかと言われると微妙ではありますが・・・
以上、いかがでしょうか。
サイトのほうを見て頂ければもっともっと使えるパーツがありますので、ひと通り見ておいて、何かの時にそういえば・・・と思い出す使い方がいいと思います！覚えておいて損はない！
＊ ＊ ＊
以上、ざっとご紹介しましたがいかがでしょうか。
Codropsのサイトにはもっと多くのコードが紹介されていますので、一通り目を通しておくと、いざってときに役に立ちそうです。
