思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。
新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。
「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。
詳細は以下から。
ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ
Fixed Disappearing Scrolling Header
スクロールすると表示されている文字テキストがフェードアウトで消えていくヘッダーエフェクト。
See the Pen Fixed Disappearing Scrolling Header by Dudley Storey (@dudleystorey) on CodePen.
A Menu Overlay Simulating a Camera Focus Change
MENUをクリックするとアニメーション付きでフルスクリーンで展開するナビゲーションメニュー。
See the Pen A Menu Overlay Simulating a Camera Focus Change by Chris Arasin (@carasin) on CodePen.
ハンバーガーメニューにカーソルを合わせると、グネグネと形を変化させてコンテンツを表示するナビゲーションメニュー。
See the Pen SVG Gooey Hover Menu Concept by Michael Leonard (@mikel301292) on CodePen.
CSSのみで再現できるナビメニューで、クリックすることでコンテンツをパネル状で立体的に表示します。
See the Pen Material Navigation Pure CSS by Manasseh Pierce (@ManassehPierce) on CodePen.
上部に配置された要素を左右に動かすことで、コンテンツを水平方向に閲覧できる新型ナビゲーションメニュー。
See the Pen Bottom Nav & Tabs by Yusuf Bakır (@yusufbkr) on CodePen.
画面下に配置したナビメニューで、クリックすると下方向からスライドで子カテゴリが表示されます。
See the Pen Quick nav with sub-menu by Tobias Reich (@electerious) on CodePen.
表示されている文字を上下にアニメーションさせた、ちょっとしたギミックが面白いナビメニュー。
See the Pen Menu hover effect by Jason Hee (@jasonheecs) on CodePen.
テキストリンクをよりユニークに魅せる、８つのホバーエフェクトをまとめています。
See the Pen CSS Hover Effects for Links by Stas Melnikov (@melnik909) on CodePen.
ハンバーガーメニューアイコンのさまざまなアニメーションを再現しています。
See the Pen Hamburger Icon Animations by Rosa (@RRoberts) on CodePen.
Parallax 3D Button with JS Controlled CSS Variables
マウスをクリックしようとすると立体的に動くユニークなパララックスエフェクト。
See the Pen Parallax 3D Button with JS controlled CSS variables by Tobias Reich (@electerious) on CodePen.
背景がレインボーカラーにアニメーションするボタンエフェクト。
See the Pen PbEGYy by Marc Thomas (@mrcthms) on CodePen.
ボタンにホバーするとグラデーション状に色が変化するゴージャスなエフェクト。
See the Pen luxury buttons by Daniel Box (@dbox) on CodePen.
CSSのみで再現するグラデーション付きのホバーエフェクトがポイント。
See the Pen Button hover by Tim Rijkse (@timrijkse) on CodePen.
Simple Like Button #codevember
サイトにいいね機能を追加できるシンプルなボタンエフェクトで、クリックするとハートマークがアニメーション付きで変化します。
See the Pen Simple Like Button #codevember by Emil Andersson (@emilandersson) on CodePen.
使い勝手の良いさまざまなボタンエフェクトの詰め合わせパック。
See the Pen Cool buttons by Riccardo Zanutta (@rickzanutta) on CodePen.
２つのボタンを重ねたようなエフェクトを実現する、ポップなホバーエフェクト。
See the Pen Button Drop Shadow by Robert Miller (@iamrobertmiller) on CodePen.
並べられたロゴにカーソルを合わせると、背景がぼやけボタンが表示されるCSSスニペット。
See the Pen Stripe hover blur animation by Riccardo Zanutta (@rickzanutta) on CodePen.
ユラユラと漂う文字テキストをHTMLとCSSのみで実現するお手軽エフェクト。
See the Pen The Wave by Chris Coyier (@chriscoyier) on CodePen.
ぼやけた文字にアニメーション付きでフォーカスを当てるCSSエフェクト。
See the Pen Focus by Ahmad Shadeed (@shadeed) on CodePen.
文字テキストをネオン状に点滅させ、隠れている文字を照らし出すCSSエフェクト。
See the Pen There is light by Ahmad Shadeed (@shadeed) on CodePen.
映画のようなオープニングシーンをCSSのみで表現するテキストエフェクト。
See the Pen Opening Sequence by Sebastian Schepis (@sschepis) on CodePen.
文字テキストをスライドさせながら変更していくアニメーションエフェクト。
See the Pen Sliding text by Nathan Taylor (@nathantaylor) on CodePen.
ネオンライトが点滅しているようなエフェクトをCSSで実現します。
See the Pen Flickery Argon Encouragement by Jase (@jasesmith) on CodePen.
文字テキストをカラフルにシャッフルさせながら表示するエフェクト。Shuffleボタンを押すと再読込できます。
See the Pen Random Text Shuffle by Sascha Sigl (@SaschaSigl) on CodePen.
スロット状に回転しながら文字テキストを表示するSVGエフェクト。
See the Pen #codevember 01 – svg motion by coderitual (@coderitual) on CodePen.
クリスマス気分を盛り上げるユニークなアニメーションを利用して文字テキストを表示します。
See the Pen Merry Christmas! by Chris Gannon (@chrisgannon) on CodePen.
シェイプに合わせて文字テキストをずらして表示できる、CSSの新しい利用方法を提案します。
See the Pen Shape Outside – Ellipse by Stacy (@stacy) on CodePen.
CSS Filterプロパティを利用して、Photoshopも顔負けの写真加工を行うテクニックをまとめています。
See the Pen CSS Filters by Stacy (@stacy) on CodePen.
シンプルで幅広いプロジェクトに活用できるカード型ホバーエフェクト３種。
See the Pen Card hover effects by Jason Hee (@jasonheecs) on CodePen.
マウスホバーによってキューブ状の立体的に切り替わるエフェクト。
See the Pen cube service box by RahulDhiman (@rahuldhiman) on CodePen.
JavaScriptを利用せずに、CSSのみで作成されたモーダルウィンドウ。
See the Pen Pure css popup box by Prakash (@imprakash) on CodePen.
Bootstrapフレームワークに対応した、CSSで作成されたラジオボタン各種。
See the Pen Pure CSS Switches by Alexandre Joffroy (@alexjoffroy) on CodePen.
ステップ順に進めていくことでお問い合わせフォームを送信できる、インタラクティブなサインアップ画面を作成します。
See the Pen Interactive Sign Up Form by Riccardo Pasianotto (@rkpasia) on CodePen.
下方向にスワイプすると新しいコンテンツが読み込まれ、同時にプリンターが印刷しているような様子を表現しています。
See the Pen Printer Pull Down To Refresh by Nikolay Talanov (@suez) on CodePen.
Parallax Scene with CSS Variables
See the Pen Parallax scene with CSS variables by Tobias Reich (@electerious) on CodePen.
Change Background Color with Fade Animation as You Scroll
See the Pen Change background colour with fade animation as you scroll by Dave Redfern (@daveredfern) on CodePen.
Responsive Pure CSS Tabs & Accordion
画面幅に応じてタブとアコーディオン機能が切り替わるCSSテクニック。
See the Pen Responsive pure CSS tabs & accordion by mikestreety (@mikestreety) on CodePen.
コンテンツをリストアップするときに役立つスニペットで、ほんの少しの素敵なアニメーションを追加することで、思わずクリックさせます。
See the Pen Movie List by Travis Williamson (@travisw) on CodePen.
Smudge & Randomize Image with PIXI.js Mesh & GSAP
See the Pen Smudge & Randomize Image with PIXI.js Mesh & GSAP by Shaw (@shshaw) on CodePen.
カラフルなサークル円が、マウス操作に合わせてぬるりと形を変えるユニークなテクニック。
See the Pen blobs by Misaki Nakano (@mnmxmx) on CodePen.
Pure CSS – Responsive Animation | Test 1
レスポンシブデザインにも対応した、CSSのみで作成したローディングアニメーション。
See the Pen PURE CSS – Responsive Animation | Test #1 by Noyelle Julien (@Avenbeard) on CodePen.
ドットとラインを使った中毒性のある動きがユニークなローディングアニメーション。
See the Pen 9 – #Codevember 2016 by JeanBaptiste PENRATH (@jbpenrath) on CodePen.
四角形の大きさがすこしずつ変化する、キューブ状アニメーションエフェクト。
See the Pen Animation Ccs3 Cube by Lionel Tolosa (@lioneltolosa29) on CodePen.
キャラクターが走る様子を@keyframesを利用してアニメーションさせるCSSテクニック。
See the Pen CSSonic run cycle by joey lane (@joeylane) on CodePen.
CSSのみでおなじみのキャラクターをアニメーションさせるテクニック。
See the Pen Super Mario (Animation) by LantareCode (@LantareCode) on CodePen.
