※ このページは読み込みには時間がかかる恐れがあります。少し待ってからスクロールすることで、スムーズに表示することができます。
今年もあと少しとなりましたが、ウェブデザイン技術の進歩はまだまだ続いていくようです。今回は、最新 Web テクニックを採用した HTML/CSSスニペット60個を、カテゴリ別にまとめてご紹介します。
詳細は以下から。
コンテンツ前半 : 目次
数が多いため、前後半２ページに分けています。
01. ホバー・エフェクト
ホバーすることでカード状レイアウトを、立体的に動かすことができます。
See the Pen Floating Card by Fabrice Lejeune (@fabricelejeune) on CodePen.
マウスホバーすることで、ストライプラインに滑らかなアニメーションが加わります。
See the Pen Hover Animation from UNIQLO by Chris Coyier (@chriscoyier) on CodePen.
マウスホバーで、文字テキストのアンダーラインがジグザグに。
See the Pen Animated SVG underline by Peter Tóth (@petertoth) on CodePen.
See the Pen gPMPOm by PhotoshopVIP (@vipcrew) on CodePen.
レスポンシブにも対応した、テキストリンク用ホバーエフェクト。
See the Pen Responsive Magic Underline by Benjamin Damm (@bdam) on CodePen.
New Link Underline (Wired-Style)
ホバーすることで背景がぼんやりとフェードインするアニメーション。
See the Pen New Link Underline (Wired-Style) by MrPirrera (@pirrera) on CodePen.
CSSアニメーションを利用したホバーエフェクトを、12種類揃えています。
See the Pen avgKxV by moyu (@MoYu1991) on CodePen.
02. SVG関連エフェクト
時間差でさまざまなデザインパーツがピョコピョコと表示される、面白アニメーション。
See the Pen Land Animation for PaGamO by Neil Zheng (@pppp22591558) on CodePen.
パソコンのやり過ぎによる、人間の退化をアニメーションで表現します。
See the Pen The (D)evolution of Man by Chris Gannon (@chrisgannon) on CodePen.
各部屋の様子を、それぞれ流れるようなアニメーション付きで表示します。
See the Pen Animating the viewbox by David Bachmann Johannesson (@dbj) on CodePen.
スクリーンをタップするたびに、Twitterロゴがヒラヒラと舞いあがります。
See the Pen #codevember – 29 – Twitter elastic animation by Twindev (@twindev) on CodePen.
See the Pen 404 Page SVG animation by Sépion (@Sepion) on CodePen.
Interactive Color Photo Highlight Effect In SVG
イメージ写真に写った人物を選択すると、それ以外がモノクロで表示されます。
See the Pen Interactive Color Photo Highlight Effect In SVG by Dudley Storey (@dudleystorey) on CodePen.
03. レイアウト関連エフェクト
イメージ写真を背景にした見出しタイトルは、スクロールとともに幅サイズが変化する、新しいスタイルのパララックスエフェクト。
See the Pen Neat Parallax Hero Effect by Dominic Magnifico (@magnificode) on CodePen.
まるでイメージ写真が飛び出しているような、立体的なエフェクトを実現したパララックスエフェクト。
See the Pen Parallax Sjodalen by Helle Holmsen Sem (@helle_railway) on CodePen.
スクリーンサイズを変更することで、インタラクティブなレイアウトを実現できる、フード系マガジン用テンプレート。
See the Pen Food Magazine Template by Riccardo Zanutta (@rickzanutta) on CodePen.
Animate items in and out of Viewport on Scroll | Greensock
各セクションが立体的なアニメーション付きで、viewportに表示されるスクロールテクニック。
See the Pen Animate items in and out of Viewport on Scroll | Greensock by Arden (@aderaaij) on CodePen.
12色のカラーホイールから、クリックすることでカラーパレットを作成できます。
See the Pen color lock by GSSxGSS (@gssxgss) on CodePen.
新聞紙のレイアウトをモチーフに、スクリーンサイズを変更することで、アニメーション付きでカラム数が変化します。
See the Pen Newspaper Style Design by Silke V (@silkine) on CodePen.
あまり見かけない、アニメーションを活用したモーダルウィンドウの表示を全７種類で。
See the Pen Modal Animations by Jesse Couch (@designcouch) on CodePen.
斜めに入ったストライプの
ラインを表現できる、CSSスタイリングテクニック。
See the Pen pjqrpe by Thoriq Firdaus (@tfirdaus) on CodePen.
04. ナビゲーション・エフェクト
いま話題のStarWars、ライトセーバーを使ったナビゲーションメニュー。
See the Pen Star Wars Menu Icon by Adam Dorling (@Naito) on CodePen.
CSS Overlay Navigation Animation
クリックするとスクリーン全体をオーバーレイするナビゲーション。
See the Pen CSS Overlay Navigation Animation by Ryan Mulligan (@hexagoncircle) on CodePen.
ハンバーガーアイコンにカーソルを合わせると、MENUの文字が浮かびあがります。
See the Pen Animated navigation “button” by Robin Bertilsson (@RobinBertilsson) on CodePen.
Awesome Bootstrap 3 Sidebar Navigation
Bootstrapフレームワークを用いて、スライド式ナビゲーションを実現しています。
See the Pen Awesome Bootstrap 3 Sidebar Navigation by Jay Holtslander (@j_holtslander) on CodePen.
滑らかなアニメーションが気持ちよいハンバーガー式メニュー。
See the Pen Hamburger Menu Animation by Matt Soria (@poopsplat) on CodePen.
Easy Ionic Side Menu Transitions
左スライド式ナビゲーションを、アニメーション６スタイルから選択することができます。
See the Pen Easy Ionic Side Menu Transitions by Jamie Coulter (@jcoulterdesign) on CodePen.
カード状に重なった様子を表現しており、各セクションにホバーすることで切り替え可能です。
See the Pen Cards Menu Concept by Bennett Feely (@bennettfeely) on CodePen.
Dropdown navigation (keyboard friendly)
キーボードでも開閉できる、モバイル端末での表示も考慮したナビゲーション。
See the Pen Dropdown navigation (keyboard friendly) by Clément Paris (@ClementParis016) on CodePen.
次のページへ
コンテンツ後半 : 目次
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.
