面白デザインで差をつける、コピペで使える素敵なHTMLコードスニペットを、コード共有サイトCodePenから厳選してまとめています。
今後のウェブサイト制作で活用したい、一歩先を進んだ最先端のテクノロジーを駆使した、コードスニペットが揃います。先日制作から30周年を迎えたばかりの、あの映画をモチーフにしたデザインも数多く公開されていました。
詳細は以下から。
コード共有サイト「Codepen」から厳選した、素敵なHTMLスニペットまとめ
サンプルが動いていない場合は、「Return」ボタンをクリックすることで再生がはじまります。
Responsive SVG Walk Cycle with GSAP
レスポンシブに対応する、SVGを使ったスプライトテクニックで、なめらかに歩くアニメーションを実現しています。
See the Pen Responsive SVG walk cycle with GSAP by eighthday (@eighthday) on CodePen.
インクでかき消したようなエフェクトが素敵な、イメージスライダーの新しいかたち。
See the Pen Reebok ink effect by Ricardo Soto (@flacu) on CodePen.
CSSのみで再現された、某アメコミのイントロ画面を再現したコードスニペット。
See the Pen Marvel Logo animation | pure CSS by Gregor Adams (@pixelass) on CodePen.
ボタンをクリックすることで、背景デザインにグラデーションがアニメーション付きで追加されます。
See the Pen Button Styles by Christopher Dunn (@pxdunn) on CodePen.
背景イメージを一部分だけぼかすことで、文字テキストを読みやすくレイアウトできます。
See the Pen A blurred overlay by Glenn Reyes (@glennreyes) on CodePen.
文字リンクのさまざまなスタイリングをまとめたコレクション。
See the Pen Cool CSS3 Link Ideas by Brenden Palmer (@brenden) on CodePen.
2つのCSSテクニックで、背景イメージに縦方向の無限スクロールを適用しています。
See the Pen Infinite Scrolling Background by Josh Scarbrough (@Scarbrough9) on CodePen.
こちらは横方向への無限スクロールを、CSSのみで実現しています。
See the Pen gamYOy by CSS-Tricks (@css-tricks) on CodePen.
イメージ写真がすこしずつズームアップする、Ken BurnsエフェクトをCSS3で再現したスニペット。
See the Pen Ken Burns Effect by Gavin Simpson (@simpson77) on CodePen.
ページ上部のヒーローイメージが、スクロールすることでズームアップする、ユニークなアニメーションが魅力的。
See the Pen Hero Zoom on Scroll by Derek Palladino (@derekjp) on CodePen.
ページ下までスクロールすると、フッター部分が重なるようにアニメーション展開します。
See the Pen footer with conent scale by Matthias J. F. (@mfritsch) on CodePen.
Appleの公式サイトで利用されているスクロールエフェクトを再現しています。
See the Pen Apple’s iMac scrolling effect by Marius Balaj (@mariusbalaj) on CodePen.
雑誌のような左右2画面レイアウトを表現しており、レスポンシブにも対応しています。
See the Pen Magazine layout responsive by Mark (@xmark) on CodePen.
Full Page Parallax Scroll Effect
セクションごとに滑らかに移動するパララックスエフェクト。
See the Pen Full Page Parallax Scroll Effect by Emily Hayman (@eehayman) on CodePen.
Changing Background Color on Scroll
スクロールすることで、コンテンツごとに背景色が滑らかに変化します。
See the Pen Changing Background Color on Scroll by Jack Harner (@jackharner) on CodePen.
CSSブレンドモードを利用することで、2枚の写真を多重露光エフェクトのように重ねます。
See the Pen Playing with Blend Modes by Renan C. Araujo (@caraujo) on CodePen.
文字テキストにCSSブレンドモードを適用し、背景が透けて見えるエフェクト。
See the Pen Typographical CSS Blend Mode by Ryan Altvater (@ryanaltvater) on CodePen.
ガラスが割れたようなエフェクトを文字テキストに使い、ホバーすることでアニメーションがスローモーションします。
See the Pen Shattering Text Animation by Arsen Zbidniakov (@ARS) on CodePen.
イメージ写真をクリックすると、ガラスが飛び散るようなエフェクトを使い、展開しています。
See the Pen Shattering Images by Szenia Zadvornykh (@zadvorsky) on CodePen.
サイコロ状の立方体がクルクルと回転することで、イメージ画像が切り替わる、CSSスライダー。
See the Pen Animated cube slider by Alberto Hartzet (@hrtzt) on CodePen.
ソーシャルメディアのフォロー/フォロワー数などをまとめた、Twitterカード用UIデザイン。
See the Pen Twitter Card UI by Marcelo Aguila (@marceloag) on CodePen.
オンラインショップで商品をカートに追加する、インタラクティブなアニメーションが特長。
See the Pen Add to cart interaction by Virgil Pana (@virgilpana) on CodePen.
フルスクリーン表示された、動画を使った背景デザインに、ロゴをクリックすることでぼかしエフェクトを加えることができます。
See the Pen bVYOMw by Saijo George (@SaijoGeorge) on CodePen.
一見すると普通のハンバーガーメニューですが、マウスホバーすることでアニメーションが開始されます。
See the Pen A HOVER EFFECT by JUNGLE (@junglelin) on CodePen.
こちらもハンバーガーメニューに、あまり見かけないアニメーションをSVGを利用して実装されています。
See the Pen SVG CSS3 Menu / Burger Button by Kyle Henwood (@kyleHenwood) on CodePen.
「Open/Close Menu」をクリックすることで、波型のアニメーション付きでドロップダウンメニューが展開します。
See the Pen Open/Close SVG Drawer by John Choura Jr. (@jchoura) on CodePen.
ポリゴンスタイルで描かれた偉人ガンディーを、ユニークなアニメーションで描きます。
カラフルな紙吹雪を自由にデザインできるジェネレーター。
See the Pen Confettis Generator by Gthibaud (@Gthibaud) on CodePen.
誕生から30周年を記念しグリッチエフェクトを利用した、デロリアンの404ページ。
See the Pen 404 – Back to the Future by Shelby Hutchison (@shdigitaldesign) on CodePen.
Back to the Future – 3D Poster
マウスで自由に動かくことができる、3Dポスターデザイン。
See the Pen Back to the Future – 3D Poster by PhotoshopVIP (@vipcrew) on CodePen.
