※ このページは読み込みには時間がかかる恐れがあります。少し待ってからスクロールすることで、スムーズに表示することができます。
今年もあと少しとなりましたが、ウェブデザイン技術の進歩はまだまだ続いていくようです。今回は、最新 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.
次のページへ
