JavaScriptを使った面白い作品

はじめに

javascriptを初めて触って学習していた時に、codepenで見つけた面白い作品を紹介していきます。
学習のモチベーションやインスピレーションになれば幸いです。

時計をモチーフにした作品

1 Color Clock

See the Pen Color Clock by Ellgine (@guardian) on CodePen.

2 Hex Clock

See the Pen Hex Clock by Kyle Shanks (@mavrK) on CodePen.

3 Binary Clock

4 3D Clock

See the Pen Splitting: 3D Clock by Shaw (@shshaw) on CodePen.

5 Neu Times!

6 Slide Clock

7 Column clock

See the Pen Column clock by Nelson Rodrigues (@nelsonr) on CodePen.

8 Proportionate Clock

See the Pen Proportionate Clock by Jamie Brook (@sketchbrook) on CodePen.

円運動をモチーフにした作品

1 Cursor with progress indicator

See the Pen Cursor with progress indicator by Ivan Grozdic (@ig_design) on CodePen.

2 Back to top with progress indicator

See the Pen Back to top with progress indicator by Ivan Grozdic (@ig_design) on CodePen.

雨をモチーフにした作品

1 Animated Weather Cards

See the Pen Animated Weather Cards by Steve Gardner (@ste-vg) on CodePen.

2 rain

See the Pen rain by Rich East (@REast) on CodePen.

3 Pure CSS random rain w/ SVG + CSS variables ☔️🦆

See the Pen Pure CSS random rain w/ SVG + CSS variables ☔️🦆 by Jhey (@jh3y) on CodePen.

4 rainy season

See the Pen rainy season by K-T (@K-T) on CodePen.

5 Rain Cloud

6 Rain

See the Pen Rain by minten (@minten) on CodePen.

色相環をモチーフにした作品

1 wheel color picker [vue.js]

See the Pen wheel color picker [vue.js] by Kuba (@jakub_antolak) on CodePen.

2 Vue Color Picker Wheel basic demo

See the Pen Vue Color Picker Wheel basic demo by Nino Vrijman (@nino-vrijman) on CodePen.

3 Radial Color Picker - Vue

See the Pen Radial Color Picker - Vue by Rosen (@rkunev) on CodePen.