CSS, JavaScriptで実装された、チェックしておきたいUIデザインの最近のテクニックのまとめ

実用的なテクニックから、こんなこともできるんだ!とワクワクするすごいアイデアまで、Web制作者はチェックしておきたいUIを実装するテクニックをCodePenから紹介します。

JavaScriptは最小限にして、アニメーションなどCSSでできることは全てCSSで、というのが実装の傾向ですね。

チェックしておきたUIデザインのアイデア

画像: ぱくたそ

3D hover plane effect
ホバーすると、カーソルに合わせてパネル・テキスト・シャドウが3Dに動かせます。絵とかキャラクターを動かしても面白そうですね。

See the Pen 3D hover plane effect by Rian Ariona (@ariona) on CodePen.

footer with conent scale
スクロールしてフッタが表示されると、コンテンツのスケールが変化します。

See the Pen footer with conent scale by Matthias J. F. (@mfritsch) on CodePen.

Elastic SVG Sidebar Material Design
コンテンツをスライドさせる際の弓なりのアニメーションが非常に気持ちいいです。2段階、スライドできます。

See the Pen Elastic SVG Sidebar Material Design by Nikolay Talanov (@suez) on CodePen.

Animated Card Stacks
積み重なったカードをクリックすると、全部のカードが表示されます。
横に広がったり、グリッド状に並んだり、中央から広がったりします。

See the Pen Animated Card Stacks by Chris Hutchinson (@chrishutchinson) on CodePen.

CSS3
ブラウザいっぱいに縦長のパネルを配置し、各パネルが3Dにくるっと回転します。

See the Pen CSS3 by Airen (@airen) on CodePen.

CSS + HTML only Accordion Element
JavaScript無し、CSS+HTMLで実装されたアニメーションで動作するアコーディオン。

See the Pen CSS + HTML only Accordion Element by Alex Bergin (@abergin) on CodePen.

CSS & jQuery nav for ajax sites
クリックしたパネルが上部に移動し、コンテンツがスライド表示されます。各パネルのホバー時にアイコンがくるくるっとするのも気持ちいいですね。

See the Pen CSS & jQuery nav for ajax sites by BjurhagerStudios (@Bjurhager) on CodePen.

Pull Down to Refresh
ユーザーのインタラクションにあった楽しいアニメーションを体験できます。
プルダウン中のアニメーションも細かい演出がgoodです。

See the Pen Pull Down to Refresh (Paper Plane) by Nikolay Talanov (@suez) on CodePen.

Material Compact Login Animation
オープンとクローズのボタンの変化が分かりやすいです。
開くのは簡単だけど、閉じるのはどうするの?っていうのがありますね。

See the Pen Material Compact Login Animation by Yusuf Bakır (@yusufbkr) on CodePen.

Gift Card UI
「Buy」をクリックすると、ギフトカードを購入する際のワクワク感を楽しめます。
デモなので「Buy」をクリックしても購入サイトに繋がらないので、ご安心を。

See the Pen Gift Card UI by David Khourshid (@davidkpiano) on CodePen.

Success Modal with Animation
何が起こったのか分かりやすく伝え、しかも気持ちよく、途中の動きを見逃しても問題ない、アニメーションを使った好事例ですね。

See the Pen Success Modal with Animation by Bryce Snyder (@brycesnyder) on CodePen.

Select Input Interaction
こんな派手なセレクトメニューは見たことありませんw
開く時もおもしろいですが、選択した後もおもしろいです。

See the Pen Select Input Interaction by Bhakti Al Akbar (@balapa) on CodePen.

Flipable tile widget modal
上下左右、クリックした方向にパネルが回転します。裏返しのパネルは4種類利用できます。

See the Pen Flipable tile widget modal by Jay Holtslander (@j_holtslander) on CodePen.

Delete Button
削除することを承認するボタン。2段階に表示するアイデア、おもしろいですね。

See the Pen Delete Button by William Pereira Gasparetto (@GasparettoW) on CodePen.

Use a finger
スクロールを促すアニメーション。矢印だと表現がストレートすぎる時にはうまいデザインです。

See the Pen Use a finger by Shak Daniel (@shakdaniel) on CodePen.

Stylish Social Buttons
ソーシャルアイコンのおしゃれなホバーエフェクト。

See the Pen Stylish Social Buttons by Chris Deacy (@chrisdothtml) on CodePen.

8-bit Hovers
こちらもソーシャルアイコン用のホバーエフェクトで、8ビット風デザインにします。
Red, Gree, Blueのホバーエフェクトもおもしろいです。

See the Pen 8-bit Hovers by Tiffany Stoik (@tstoik) on CodePen.

top of page

©2017 coliss