コピペで素敵ウェブサイトを表現する、HTMLコードスニペット30個まとめ

codepen-collection1-top

 

面白デザインで差をつける、コピペで使える素敵な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.

 

 

 

Reebok Ink Effect

インクでかき消したようなエフェクトが素敵な、イメージスライダーの新しいかたち。

See the Pen Reebok ink effect by Ricardo Soto (@flacu) on CodePen.

 

 

 

Marvel Logo Animation

CSSのみで再現された、某アメコミのイントロ画面を再現したコードスニペット。

See the Pen Marvel Logo animation | pure CSS by Gregor Adams (@pixelass) on CodePen.

 

 

 

Button Styles

ボタンをクリックすることで、背景デザインにグラデーションがアニメーション付きで追加されます。

See the Pen Button Styles by Christopher Dunn (@pxdunn) on CodePen.

 

 

 

A Blurred Overlay

背景イメージを一部分だけぼかすことで、文字テキストを読みやすくレイアウトできます。

See the Pen A blurred overlay by Glenn Reyes (@glennreyes) on CodePen.

 

 

 

Cool CSS3 Link Ideas

文字リンクのさまざまなスタイリングをまとめたコレクション。

See the Pen Cool CSS3 Link Ideas by Brenden Palmer (@brenden) on CodePen.

 

 

 

Infinite Scrolling Background

2つのCSSテクニックで、背景イメージに縦方向の無限スクロールを適用しています。

See the Pen Infinite Scrolling Background by Josh Scarbrough (@Scarbrough9) on CodePen.

 

 

 

gamYOy

こちらは横方向への無限スクロールを、CSSのみで実現しています。

See the Pen gamYOy by CSS-Tricks (@css-tricks) on CodePen.

 

 

 

Ken Burns Effect

イメージ写真がすこしずつズームアップする、Ken BurnsエフェクトをCSS3で再現したスニペット。

See the Pen Ken Burns Effect by Gavin Simpson (@simpson77) on CodePen.

 

 

 

Hero Zoom on Scroll

ページ上部のヒーローイメージが、スクロールすることでズームアップする、ユニークなアニメーションが魅力的。

See the Pen Hero Zoom on Scroll by Derek Palladino (@derekjp) on CodePen.

 

 

 

Footer with Content Scale

ページ下までスクロールすると、フッター部分が重なるようにアニメーション展開します。

See the Pen footer with conent scale by Matthias J. F. (@mfritsch) on CodePen.

 

 

 

Apple’s iMac Scrolling

Appleの公式サイトで利用されているスクロールエフェクトを再現しています。

See the Pen Apple’s iMac scrolling effect by Marius Balaj (@mariusbalaj) on CodePen.

 

 

 

Magazine Layout Responsive

雑誌のような左右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.

 

 

 

Playing with Blend Modes

CSSブレンドモードを利用することで、2枚の写真を多重露光エフェクトのように重ねます。

See the Pen Playing with Blend Modes by Renan C. Araujo (@caraujo) on CodePen.

 

 

 

Typographical CSS Blend Mode

文字テキストにCSSブレンドモードを適用し、背景が透けて見えるエフェクト。

See the Pen Typographical CSS Blend Mode by Ryan Altvater (@ryanaltvater) on CodePen.

 

 

 

Shattering Text Animation

ガラスが割れたようなエフェクトを文字テキストに使い、ホバーすることでアニメーションがスローモーションします。

See the Pen Shattering Text Animation by Arsen Zbidniakov (@ARS) on CodePen.

 

 

 

Shattering Image

イメージ写真をクリックすると、ガラスが飛び散るようなエフェクトを使い、展開しています。

See the Pen Shattering Images by Szenia Zadvornykh (@zadvorsky) on CodePen.

 

 

 

Animated Cube Slider

サイコロ状の立方体がクルクルと回転することで、イメージ画像が切り替わる、CSSスライダー。

See the Pen Animated cube slider by Alberto Hartzet (@hrtzt) on CodePen.

 

 

 

Twitter Card UI

ソーシャルメディアのフォロー/フォロワー数などをまとめた、Twitterカード用UIデザイン。

See the Pen Twitter Card UI by Marcelo Aguila (@marceloag) on CodePen.

 

 

 

Add to Cart Interaction

オンラインショップで商品をカートに追加する、インタラクティブなアニメーションが特長。

See the Pen Add to cart interaction by Virgil Pana (@virgilpana) on CodePen.

 

 

 

bVYOMw by Saijo George

フルスクリーン表示された、動画を使った背景デザインに、ロゴをクリックすることでぼかしエフェクトを加えることができます。

See the Pen bVYOMw by Saijo George (@SaijoGeorge) on CodePen.

 

 

 

A Hover Effect

一見すると普通のハンバーガーメニューですが、マウスホバーすることでアニメーションが開始されます。

See the Pen A HOVER EFFECT by JUNGLE (@junglelin) on CodePen.

 

 

 

SVG CSS3 Menu / Burger Button

こちらもハンバーガーメニューに、あまり見かけないアニメーションをSVGを利用して実装されています。

See the Pen SVG CSS3 Menu / Burger Button by Kyle Henwood (@kyleHenwood) on CodePen.

 

 

 

Open/Close SVG Drawer

「Open/Close Menu」をクリックすることで、波型のアニメーション付きでドロップダウンメニューが展開します。

See the Pen Open/Close SVG Drawer by John Choura Jr. (@jchoura) on CodePen.

 

 

 

Low Poly Ghandhi

ポリゴンスタイルで描かれた偉人ガンディーを、ユニークなアニメーションで描きます。

 

 

 

Confettis Generator

カラフルな紙吹雪を自由にデザインできるジェネレーター。

See the Pen Confettis Generator by Gthibaud (@Gthibaud) on CodePen.

 

 

 

404 – Back to the Future

誕生から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.