コンテンツ後半 : 目次
05. ボタン・エフェクト
スムーズなドロップダウン展開が魅力のボタンエフェクト。
See the Pen Dropdown Button :: Pure CSS by Andy Tran (@andytran) on CodePen.
SFシーンのような点滅がユニークなボタンエフェクト。
See the Pen Animated SVG Hover Buttons by Tyler Peterson (@Gingernaut) on CodePen.
Twitterのイイねボタンをkeyframeアニメーションを利用して再現しています。
See the Pen Twitter’s Heart Full CSS by Nicolas Escoffier (@OxyDesign) on CodePen.
ボタンにマウスカーソルを合わせると、アイコンマークにフォーフィング付きで変化します。
See the Pen Morph Actions by Zach Schnackel (@zslabs) on CodePen.
オンラインショップで、商品をカートに入れるボタンに活用したい、ローディング付きボタンエフェクト。
See the Pen Button Ideas for eCommerce by Tommaso Poletti (@tommypolly) on CodePen.
Expanding Card | Material Design
マテリアルデザインのCTAボタンを再現し、クリックするとモーダルボックスがスライド表示されます。
See the Pen Expanding Card | Material Design by Joe Harry (@woodwork) on CodePen.
Pure Css “day and night” toggle
朝と夜に切り替えできる、CSSオンリーのトグルボタン。
See the Pen Pure Css “day and night” toggle by Benjamin Réthoré (@bnthor) on CodePen.
06. スライダー・エフェクト
上下スクロールでコンテンツが斜めに切り替わる、シングルページ向けスライダー。
See the Pen Skewed One Page Scroll by Nikolay Talanov (@suez) on CodePen.
Greensock animated slideshow [wip]
イメージ写真表示と一緒に、文字テキストがポップアップでアニメーション表示されます。
See the Pen Greensock animated slideshow [wip] by Arden (@aderaaij) on CodePen.
シンプルでどんなデザインにも合わせやすい、フラットスタイルのイメージスライダー。
See the Pen Beautiful Flat Text Slider by daniesy (@daniesy) on CodePen.
スクロールすることで垂直方向に切り替わる、カーテン式スライダー。
See the Pen E V A S I O N by Fersho Pls (@fershopls) on CodePen.
07. テキスト・エフェクト
Animated SVG text mask | Greensock
文字テキストに合わせて、背景イメージ写真をマスクする新しいスタイリングテクニック。
See the Pen Animated SVG text mask | Greensock by Arden (@aderaaij) on CodePen.
アニメーションエフェクトを使って、文字テキストを自由自在に動かすことができます。
See the Pen EPVbyB by Omar Hassane (@omodev) on CodePen.
文字テキストにカーソルを合わせると、直線ラインが表示されることで、各アルファベットが飛び散ります。
See the Pen Spark Text SCSS by ta$uya_42EG4M1 (@42EG4M1) on CodePen.
テキスト文章に合わせて、グラデーションを適用するCSSテクニック。
See the Pen text-fill-color by Colt Borg (@legendofcolt) on CodePen.
タイピングしている様子を表現でき、スペルミスなど人間らしさも表現できるエフェクト。
See the Pen Terminal Text Effect by Tobias (@Tbgse) on CodePen.
08. ローディング・エフェクト
次々に本が倒れていく様子を表現したローディングアニメーション。
See the Pen #Codevember – Day 6 – Bookshelf loader by Grélard Antoine (@ikoshowa) on CodePen.
SVGを利用した、12種類のローディングアニメーションを収録しています。
See the Pen SVG Loaders by Zach Schnackel (@zslabs) on CodePen.
Star Wars Loading Animation by Google
実際にGoogleが利用しているローディングアニメーションを、完全再現したStarWarsバージョン。
See the Pen Star Wars Loading Animation by Google by Abraham K (@abrahamrkj1) on CodePen.
タスクや作業を処理している様子を、文字テキストを使って表現できるローディングテクニック。
See the Pen Corange Loading Screen by George Hoqqanen (@hoqqanen) on CodePen.
波を打つバロメーターがユニークな、ビデオ動画の再生などに活用したいアニメーション。
See the Pen Video Loading by Joe Harry (@woodwork) on CodePen.
暗闇に怪しく光るグラデーションが美しい、SF系テキスト・ローディング。
See the Pen Sci-fi loading screen by Ragnar Þór Valgeirsson (@rthor) on CodePen.
読み込みが進むに連れてゲージがたまり、電球が黄色く光り出します。
See the Pen Light bulb loading concept by David Bachmann Johannesson (@dbj) on CodePen.
09. CSS3 最新テクニック
CSS-only Colorful Calendar Concept
HTML/CSSのみでスタイリングされた、カラフルなカレンダー機能で、スムーズで滑らかなアニメーションが随所に。
See the Pen CSS-only Colorful Calendar Concept by David Khourshid (@davidkpiano) on CodePen.
The 12 Principles of Animation
アニメーションの基本原則を、CSSスタイリングで表現しています。
See the Pen The 12 Principles of Animation by Shishak (@shishak) on CodePen.
アイコンを雪のように降らせるユニークなアニメーション。
See the Pen JYwORR by simo2 (@lets-try-simo2) on CodePen.
デザイン部分はすべてCSSのみでスタイリングされた、立体感のあるアナログ時計。
See the Pen Analog Clock by Nail Davlyatchin (@nDav) on CodePen.
CSSを利用して、グラデーションをアニメーション変化させるテクニック。
See the Pen Gradient Background Animation by Andy Tran (@andytran) on CodePen.
Switching animation keyframes in media queries
@media queryを利用することで、スクリーンサイズごとにCSSアニメーションを変化させることができます。
See the Pen Switching animation keyframes in media queries by Keith Clark (@keithclark) on CodePen.
ロゴを中心に波紋エフェクトを描くことができるテクニック。
See the Pen Logo Ripple Effect CSS by Grapes Theme (@grapestheme) on CodePen.
Star Wars: The Force Awakens in CSS
StarWars 最新作のオープニング用エフェクトをCSSで再現した、完成度の高い作品。
See the Pen Star Wars: The Force Awakens in CSS by Donovan Hutchinson (@donovanh) on CodePen.
Star Wars Storm Trooper in pure CSS
こちらのストームトルーパー、実はCSSのみで描かれています。
See the Pen Star Wars Storm Trooper in pure CSS by Aleks (@achudars) on CodePen.
バスにユラユラと揺られる様子を描いた、ユニークなアニメーション。
See the Pen Travel by Chandan Choudhary (@Cancepto) on CodePen.
