CSSやJavaScriptで実装された、2016年に人気が高かったテクニックのまとめ -Top Pens of 2016

世界中の多くのWeb制作者・クリエイターが利用しているCodePenから、CSSやJavaScriptを使って実装された2016年にもっとも人気のあったデモを紹介します。

Top Pens of 2016 on CodePen

Top Pens of 2016では、人気が高かったスゴ技が100個紹介されており、その中からベスト10を紹介します。
当ブログで紹介したものもいくつかあり、初見のものいくつかありました。

I DESIGN WITH CODE ❤

10位は、Creogram animatedの動画にインスパイアされて実装されたSVGアニメーションのデモ。動きだけでなく、見せ方もうまいです。

SVG clip-path Hover Effect

9位は、SVGのクリップパスをつかったホバーエフェクトのデモ。SVGなので非常に軽快に動作します。

Multi-layered Parallax Illustration

8位は、イラストを複数のレイヤーに分けて、パララックスで表示するデモ。実装のチュートリアルも公開されています。
チュートリアル: How to make Multi-Layered Parallax

Cool Layout with Complex Chainable Animation

7位は、Satellite Website Prototypeにインスパイアされて実装されたFlexboxとアニメーションの楽しいレイアウト。一昔前だと、完全にFlashの実装ですね。

CSS only scroll indicator

6位は、当ブログでもちらっと紹介したCSSだけで実装したスクロールのインジケータ。
JavaScriptを使わないと無理だと思っていましたが、できるんですね。
紹介記事: 2016年スタイルシートを使ったテクニックのまとめ

Musical Chord Progression Arpeggiator

5位は、Tone.jsにスケールジェネレータとアルペジオパターンジェネレータを使い、美しい音楽を奏でるデモ。「Play」ボタンをクリックすると、コード通りの音楽を奏でます。

freeCodeCamp: Build a Tribute Page

4位は、緑の革命で有名なノーベル平和賞を受賞した農学者Norman Borlaugのトリビュートページ。

Alex the CSS Husky

いよいよ、ベスト3です。
ハスキー犬のかわいいアニメーションは、すべてCSSで実装されたスゴ技です。

THREE Image Transition

2位は、繊細で美しく、ダイナミックなアニメーションで画像を切り換えるスクリプトを使ったテクニック。当ブログで紹介した時には、「ベスト10には間違いなく入りますね」と予言した通りになりました。
紹介記事: その美しさ、一度見たら絶対忘れない！スゴ技のアニメーションを使った画像切り換えのテクニック

1位: Flexbox playground

1位に輝いたのは、当ブログでも紹介して好評だった「Flexbox playground」でした。
紹介記事: Flexboxでどういうレイアウトができ、各プロパティはどのように挙動するのかがよく分かる -Flexbox playground

Flexbox playgroundはページの埋め込みにも対応しており、Flexboxのコンテナとアイテムの各プロパティがどのような挙動をするかよく分かると思います。