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アニメーションのデモ。動きだけでなく、見せ方もうまいです。

See the Pen I DESIGN WITH CODE ❤ by Chris Gannon (@chrisgannon) on CodePen.

SVG clip-path Hover Effect

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

See the Pen SVG clip-path Hover Effect by Noel Delgado (@noeldelgado) on CodePen.

Multi-layered Parallax Illustration

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

See the Pen Multi-layered Parallax Illustration by Patryk Zabielski (@zabielski) on CodePen.

Cool Layout with Complex Chainable Animation

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

See the Pen Cool Layout with Complex Chainable Animation by Nikolay Talanov (@suez) on CodePen.

CSS only scroll indicator

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

See the Pen CSS only scroll indicator by Mike (@MadeByMike) on CodePen.

Musical Chord Progression Arpeggiator

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

See the Pen Musical Chord Progression Arpeggiator by Jake Albaugh (@jakealbaugh) on CodePen.

freeCodeCamp: Build a Tribute Page

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

See the Pen freeCodeCamp : Build a Tribute Page by freeCodeCamp (@freeCodeCamp) on CodePen.

Alex the CSS Husky

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

See the Pen Alex the CSS Husky by David Khourshid (@davidkpiano) on CodePen.

THREE Image Transition

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

See the Pen THREE Image Transition by Szenia Zadvornykh (@zadvorsky) on CodePen.

1位: Flexbox playground

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

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

See the Pen Flexbox playground by Gabi (@enxaneta) on CodePen.

sponsors

top of page

©2018 coliss