【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集

  • 2019.08.01
  • 2019.08.01
  • HTML
【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集

【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集

【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集
最終更新日:2019.08.01

こんにちわ!ナコです。
サイトを訪れると要素が動いたり、楽しいエフェクトが発動したり、
そんなインタラクティブなサイト、憧れませんか?

今回はCODEPENで公開されているソースコードを使って楽しくアニメーションする方法を紹介します。

ライセンスについて説明はこちらでチェック!

最初に

CODEPENでハマるポイント1

表示されているソースコードだけでは動かないものがおおいです!

サイト内

【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集
①settingから②CSSやJSを開いて③読み込みのリンクがあれば貼り付けよう。

引用内

【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集
①Resourcesから②CSSやJSの読み込みのリンクがあれば貼り付けよう。

例えば以下のようにして内に貼り付け

コピー


<head>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
</head>

CODEPENでハマるポイント2

【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集
このエリアにあるJSをHTMLに貼るだけでは動きません。
JSのソースコードをHTMLに貼り付ける場合は$(function(){をつけよう。

コピー


<script>
$(function(){

公開されているコード

});
</script>

CODEPENでハマるポイント3

コピペしようと思ったらSCSSだった

サイト内

【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集
「CodePen」公開ソースはCSSがSCSSの事が多いのでベタCSSにしたい場合はサイトに移動して
CSSエリアの「View Compileed」を選択するとプレーンCSSになります!

引用内

SCSSにタブを変更して、View compliedボタンを押すとCSSに切り替わります。

なこ
さすがやわ〜かゆいところに手が届く!

Shattering Text Animation

【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集
Shattering Text AnimationA PEN BY Arsen Zbidniakov
ブレイクした文字の破片が集まってまたブレイクする気持ちいいエフェクトです。

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

SVGファイルの簡単な作り方
この動きをするにはIllustratorでテキストをアウトライン化したあと、ナイフ・ツールで切れ目を入れる必要があります。
【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集
その後別名保存→SVGを選択して保存してください。
【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集

Play Hard

【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集
Play HardA PEN BY Chris Gannon
文字がボインボインするエフェクトです。面白いうごきですね!

See the Pen
Play Hard
by Chris Gannon (@chrisgannon)
on CodePen.

CSS is awesome!

【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集
CSS is awesome!A PEN BY Gayane
文字の中を色が駆け巡っています。CSSだけで表現されていて驚きです。

See the Pen
CSS is awesome!
by Gayane (@gayane-gasparyan)
on CodePen.

Cassie!

【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集
Cassie!A PEN BY Cassie Evans
文字をかいているかのようなエフェクトです。かわいいぞ

See the Pen
Cassie!
by Cassie Evans (@cassie-codes)
on CodePen.

#DailyUi Day 5: Animated codepen Logo

【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集
#DailyUi Day 5: Animated codepen LogoA PEN BY HIC
文字がボインボインバウンドします。延々に見てられる…

See the Pen
#DailyUi Day 5: Animated codepen Logo
by HIC (@HIC)
on CodePen.

まとめ

他にもたくさん楽しい動きのソースコードサンプルがあります。
ずっと見ていて飽きないなぁ。

ライセンスも確認しつつ楽しく使って素敵なサイトにしたいですね!