CSS, JavaScriptで実装された、チェックしておきたいUIデザインの最近のテクニックのまとめ
Post on:2015年9月3日
sponsors
実用的なテクニックから、こんなこともできるんだ！とワクワクするすごいアイデアまで、Web制作者はチェックしておきたいUIを実装するテクニックをCodePenから紹介します。
JavaScriptは最小限にして、アニメーションなどCSSでできることは全てCSSで、というのが実装の傾向ですね。
画像: ぱくたそ
- 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にくるっと回転します。
- 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
- こんな派手なセレクトメニューは見たことありませんｗ
開く時もおもしろいですが、選択した後もおもしろいです。
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.
sponsors
