14. Full CSS Map Creator
CSS のみで作成できる地図作成キットで、クリックすることで土地の種類を選択できます。
See the Pen Full CSS Map creator by Vincent Durand (@onediv) on CodePen.
15. Payment UX
SVG と CSS でスタイリングされた、ショッピングの決済用UXデザインのコンセプト。
See the Pen Payment UX by Jon Kantner (@jkantner) on CodePen.
16. Credit Card Checkout
サングラスを掛けたキャラクターが、購入ボタンのクリックを促すCSSエフェクト。
See the Pen DailyUI 002: Credit Card Checkout by Alex Zaworski (@alexzaworski) on CodePen.
17. Contact Me Animation Concept
紙飛行機が飛んでいくアニメーションエフェクトを実装した、お問い合わせ用CTAレイアウト。
See the Pen Contact Me Animation Concept by Nizar (@nizarmah) on CodePen.
18. Title Text Animation
見出しタイトルやロゴデザインなどにも活用したい、ふわりとフェードインで表示されるテキストエフェクト。
See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen.
19. Interactive Map with jQuery
SVGでデザインされた立体的な地図をつかい、セクションごとに色分けしていきます。
See the Pen Interactive Map with Jquery by Sara B. (@sara_bianchi94) on CodePen.
20. Loader a Day17
CSSでスタリング、デザインされた読み込みローディング用アニメーション。
See the Pen Loader a Day (day 17) by Reinier Kaper (@TheDutchCoder) on CodePen.
21. Android Nouget Update Animation
こちらもCSSのみでスタイリングされた、円形サークルをレイヤー状に重ね、アニメーションを加えています。
See the Pen Android Nougat update animation by Stove (@stevn) on CodePen.
22. Mystery Meat Hamburger Menu
どこでも見かけるハンバーガーメニューですが、ボタンを押そうとするとなかなか押すことができません。
See the Pen Mystery Meat Hamburger Menu 🍔 by Tommy Hodgins (@tomhodgins) on CodePen.
23. They Call it Big-Mac
ハンバーガーメニューに文字テキストを加え、ユニークなアニメーションでより魅力的に。
See the Pen They call it le Big-Mac by Ruslan (@mrspok407) on CodePen.
24. Animation Dial Button
モバイル向けレイアウトなどにも活用できる、クリックで展開するサークル型ナビメニュー。
See the Pen Animated dial buttons by jh3y (@jh3y) on CodePen.
25. Three Simple CSS Button Hover Effects
半透明レイヤーを重ねた、CSSでスタイリングされたボタン・ホバーエフェクト。
See the Pen Three Simple CSS Button Hover Effects by Dronca Raul (@rauldronca) on CodePen.
26. Micro Interaction Button
ホバーによって矢印を移動させることで、より押したくなるボタンを演出します。
See the Pen Micro Interaction Button by Phil Hoyt (@philhoyt) on CodePen.
今後、特にデザインで重要になってくるアニメーションを加えた、ボタンエフェクトなどの3ページ目に続きます。
