簡単にSVGアニメーションが実装できるjQueryプラグインLazy Line Painterの使い方

SVGアニメーションの例

今回は、線画を描いていくSVGアニメーションを簡単に実装できる、Lazy Line PainterというjQueryプラグインの使い方を紹介します。

DEMO

まずはDEMOをご覧ください。こんな感じのアニメーションが作れます。

Lazy Line Painter DEMO

使い方

以下のような手順で実装できます。

  1. IllustratorなどでSVGを作成する
  2. JSファイルをHTMLに読み込ませる
  3. Lazy Line PainterのサイトでSVGファイルからコードを生成する
  4. 3のコードをHTMLに記述する

1. IllustratorなどでSVGを作成する

まずは、アニメーションさせたいSVGを作成します。Illustratorの場合は、ファイル>書き出し などでSVG形式の画像を書き出すことができます。

Lazy Line Painterで出来るのは線画のアニメーションなので、塗り無しの線画にしておきます。

2. JSファイルをHTMLに読み込ませる

読み込みが必要なファイルは、jQuery本体とLazy Line PainterのJSファイルの2つだけです。Lazy Line PainterのJSファイルは、GitHubからダウンロードします。

Lazy Line Painterのダウンロードページ|GitHub
(右の方の緑のボタンからZIPファイルがダウンロードできます。)

ZIPの中には色々なファイルが入っていますが、必要なのは「jquery.lazylinepainter-1.7.0.min.js」だけです。

以下のようなコードを、HTMLのhead要素内かbodyの終了タグの直前に書いて読み込ませます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/jquery.lazylinepainter-1.7.0.min.js"></script>

3. Lazy Line Painterのサイトでコードを生成する

Lazy Line Painterサイト

Lazy Line Painterのサイト

上記サイトにアクセスし、「Click or Drop your SVG file here to be converted」と書いてある赤い枠の中にSVGファイルをドロップします。

ファイルをドロップする場所

すると、アニメーションのプレビューとコードが生成されます。アニメーションの順番は、背面にあるオブジェクトから先に描画されるようになっています。

Lazy Line Painterでのプレビュー

アニメーションを確認したら、上の画像の青枠で囲った部分(Copy data to clipboard)をクリックしてコードをコピーします。

4. 3のコードをHTMLに記述する

手順2で書いたscript要素の下に新しくscript要素を作り、手順3でコピーしたコードをペーストします。その際、以下の2箇所を同じ文字列に変更してください。

SVGオブジェクトのキー

var pathObj = {
  "SVG_sample": { //この部分がキー(SVGのファイル名になっている)
    "strokepath": [

lazylinepainter実行場所を指定するセレクタ(ID名)

/* 
 Setup and Paint your lazyline! 
 */ 

 $(document).ready(function(){ 
   $('#undefined').lazylinepainter( //IDの #undefined を上のキーと同じにする
   {
     "svgData": pathObj,
     "strokeWidth": 2,
     "strokeColor": "#e09b99"
   }).lazylinepainter('paint'); 
 });

この2つを同じ名前にします。キーとIDが同じであればデフォルトの名前を使わなくても大丈夫です。

その他

以上のような手順でSVGアニメーションが実装できます。

また、SVGから生成したコード中の「Setup and Paint your lazyline!」の部分で線の太さや色を変更したり、アニメーション前後の動きなどをオプションで指定することができます。

/* 
 Setup and Paint your lazyline! 
 */ 

 $(document).ready(function(){ 
   $('#undefined').lazylinepainter( 
     "svgData": pathObj,
     "strokeWidth": 2,         //線の太さ
     "strokeColor": "#e09b99"  //線の色
   }).lazylinepainter('paint'); 
 });

どんなオプションが使えるかはGitHubで確認できます。

また、SVGのコードの「”duration”」の部分で、パスの描画にかける時間を設定できます。単位はミリ秒です。

簡単に実装できるので、ぜひ使ってみてください。

企画書をまとめて制作をスムーズに

企画書をまとめて制作をスムーズに

当校の修了制作では、毎回企画書を作成してもらっています。今回の記事は、企画書を作ることで制作がスムーズに進む、というお話です。

Webサイトなどの企画書は、クライアントに企画を採用してもらうために作るもので、決してサイト制作者が自分のために作るものではありません。しかし、企画書を作ることで、結果的に制作者側にもメリットがあります。

説得力のある企画書を作るには、コンセプトやターゲットを明確にし、クライアントに納得してもらうためのいろいろな施策を練らなければいけません。すると自然とその案件について深く考えることになり、制作者も情報の整理ができるので、その後の制作がスムーズに進むのです。

企画を通すためには「クライアントが納得するような内容」を考えなければいけないので、客観的な視点を意識しやすいと思います。ポートフォリオのための自主制作や、企画書が不要な案件でも簡単に企画書のようなものをまとめてから制作にあたると結果的に早く制作できるのではないでしょうか。

Photoshop 水面の反射を作る方法2

Photoshop 水面の反射を作る方法2

前回の記事の続きで、「置き換え」を使った水面の映り込みの作成方法を紹介します。

手順

  1. 家の写真を切り抜いて川の写真に貼り付ける
  2. 家のレイヤーを複製して垂直方向に反転、形を整える
  3. 映り込みのレイヤーに「ぼかし(移動)」を適用
  4. 「置き換え」のマッピングに使うデータを作成する(←今回ここから)
  5. 4の画像を使って「置き換え」を適用
  6. 映り込みの手前の部分が薄くなるようにマスクを適用
  7. 全体の色調補正

4.「置き換え」のマッピングに使うデータを作成する

「置き換え」について

フィルターの「置き換え」は、置き換えのマッピングに使う画像の色に従って画像を移動します。置き換えマップ画像が黒(諧調番号が0)の部分は負の方向に最も大きく移動し、白(諧調番号255)の部分は逆に正の方向に最も大きく移動します。諧調番号128(完全に白と黒の中間)のグレーだった場合は画像が移動しません。詳しくはAdobeの機能解説のページをご覧ください。

置き換えマップ用のPSDデータを新規作成

合成写真とは別に新規のPSDファイルを作成します。サイズは合成写真と同じくらいの大きさにします。後ほど「置き換え」を適用してみて揺らぎが細かすぎたら、この画像のサイズを小さくします。

ノイズを加える

フィルター>ノイズ>ノイズを加える で、全体に強いノイズを加えます。

ノイズを加える

 ぼかし(ガウス)を適用する

ぼかし(ガウス)

レッドチャンネルとグリーンチャンネルに「エンボス」

2つのチャンネルにフィルターの「エンボス」をかけます。

  1. 「チャンネル」パネルで「レッド」チャンネルを選択
  2. 「レッド」チャンネルに フィルター>表現手法>エンボス を横方向に適用(角度0もしくは180、高さ1、量500%)
  3. 「チャンネル」パネルで「グリーン」チャンネルを選択
  4. 「グリーン」チャンネルに フィルター>表現手法>エンボス を縦方向に適用(角度90、高さ1、量500%)

エンボス

遠近感がつくよう台形に変形した後、正方形にして保存

編集>変形>遠近法 などで底辺の広い台形に変形します。これで手前の波が大きくなり、遠近感がつきます。

底辺の広い台形に変形

最後に「画像解像度」でカンバスを無理やり正方形にして、置き換えマップデータの完成です。

5. 4の画像を使って「置き換え」を適用

合成写真に戻り、映り込みのレイヤーの水面部分のみ選択して、フィルター>変形>置き換え を実行します。水平比率と垂直比率は値が大きいほど揺らぎが細かく、激しくなります。値を変えて何度か試し、画像に合った見た目になるよう調整してください。

置き換え

6. 映り込みの手前の部分が薄くなるようにマスクを適用

映り込みが自然になじむよう、手前が薄くなるようなマスクをかけます。

7. 全体の色調補正

今回は、家を緑っぽくし、映り込みの部分は彩度と明度をやや落として完成です。

完成

Photoshop 水面の反射を作る方法1

Photoshop 水面の反射を作る方法1

Photoshopを使って水面の反射を作る方法を紹介します。手順が多いので、2回の記事に分けて紹介します。

水面に写真を合成したとき、「水面の反射を作ったけれどしっくりこない」という経験はありませんか。合成したものを反転コピーして「ぼかし(移動)」をかけるだけでそれらしくなる場合もありますが、やはり水面の揺らぎがほしいということが多いと思います。

そこで今回は、フィルターの「置き換え」を使用して水面の揺らぎを表現するやり方を紹介します。今回使った画像は以下の2枚です。

川の写真家の写真

手順

  1. 家の写真を切り抜いて川の写真に貼り付ける
  2. 家のレイヤーを複製して垂直方向に反転、形を整える
  3. 映り込みのレイヤーに「ぼかし(移動)」を適用
  4. 「置き換え」のマッピングに使うデータを作成する
  5. 4の画像を使って「置き換え」を適用
  6. 映り込みの手前の部分が薄くなるようにマスクを適用
  7. 全体の色調補正

1.家の写真を切り抜いて川の写真に貼り付ける

切り抜いた家の写真

家の写真の切り抜きを行って、川の写真に合成します。今回は家の手前の植物の色調補正も行いました。

2.家のレイヤーを複製して垂直方向に反転、形を整える

貼り付けた家の複製を作り、垂直方向に反転して「反射」の部分を作っておきます。

反転した際、映り込みと建物の境界がうまくつながらない部分は、自由変形やパペットワープで変形してつなげます。

3.映り込みのレイヤーに「ぼかし(移動)」を適用

ぼかし(移動)

フィルター>ぼかし>ぼかし(移動)で垂直方向にぼかします。

とりあえずここまでで、簡単な合成は完了しました。しかし、まだ不自然なので、次回記事で映り込み部分に「揺らぎ」を作っていきます。

Illustrator 放射状のグラデーションを作る方法

Illustrator 放射状のグラデーションを作る方法

久しぶりに、Illustratorの記事になります。今回は、上の画像のような、放射状のグラデーションを作成する方法を紹介します。やり方は2つありますので、ひとつずつ紹介します。

線のグラデーションを使う

Illustrator CS6以降の場合は、線のグラデーションを利用して放射状のグラデーションを作ることができます。

  1. 正円を作る(サイズは作りたいグラデーションの半分)
  2. 円の直径と同じ長さで「線幅」を指定する
  3. 線にグラデーションをかけ、「パスに沿ってグラデーションを適用」の設定にする

グラデーションメッシュにする

この方法は、CS6以前のIllustratorでも使えます。通常、円形からグラデーションメッシュを作ると、メッシュが放射状に入りませんが、以下の方法で作成すると放射状のメッシュが作成できます。

  1. 円を作成し、円形グラデーションを適用する
  2. オブジェクト>分割・拡張 を選択
  3. 「グラデーションの分割・拡張」を、「グラデーションメッシュ」にして適用

以上のような2つの方法で、放射状のグラデーションが作れます。CDのようなものを書いたりする際に使えるテクニックです。

CSS floatを使わないレイアウト「Flexbox」について8~各ブラウザの対応状況~

これまで7回にわたってFlexboxを紹介してきましたが、今回の記事で最後になります。今回は、各ブラウザの対応状況についてです。

今までの記事

  1.  CSS floatを使わないレイアウト「Flexbox」について1~基本の指定~
  2. CSS floatを使わないレイアウト「Flexbox」について2~配置方法を指定する色々なプロパティ
  3. CSS floatを使わないレイアウト「Flexbox」について3~並べる向きとボックスの折り返し設定~
  4. CSS floatを使わないレイアウト「Flexbox」について4~主軸に沿ってどのように並べるかの設定~
  5. CSS floatを使わないレイアウト「Flexbox」について5~交差軸の配置方法を指定する~

ブラウザの対応状況

Flexboxは、まだ正式勧告されてませんが、2016年に勧告候補となっているので、モダンブラウザではベンダープレフィックスの記述無しで実装されています。しかし、古いブラウザに対応する場合はベンダープレフィックスの記述が必要です。Flexboxは仕様の変更が何度かあったため、ベンダープレフィックスで記述する際は、現在の書き方とは違う書き方になります。ご注意ください。

ここではdisplayプロパティでflexを指定する場合の指定を紹介しますが、Flexプロパティなども、ベンダープレフィックスを記述しなければいけない場合があります。Flexプロパティのベンダープレフィックスについては、後述の参考サイトに詳しく紹介されていましたので、リンクを張っておきます。

Flexbox対応状況
ブラウザ バージョン displayプロパティの記述
Chrome 4~20 display:-webkit-box
21~28 display:-webkit-flex
29~ display:flex
Firefox 2~21 display:-moz-box
22~ display:flex
InternetExplorer ~9 未対応
10 display:-ms-flexbox
11 display:flex
Safari (PC) 3.1~6.0 display:-webkit-box
6.1~8 display:-webkit-flex
9~ display:flex
Androidブラウザ 2.1~4.3 display:-webkit-box
4.4 display:flex
iOS-Safari 3.2~6.1 display:-webkit-box
7.0~8.4 display:-webkit-flex
9.1~ display:flex

参考サイト

CSS floatを使わないレイアウト「Flexbox」について7~個々のアイテムの大きさに関する指定~

これまで6回の記事にわたってFlexboxの関連プロパティについて紹介してきましたが、今回で関連プロパティを紹介し終わります。最後に紹介するのは以下の4つのプロパティです。いずれもFlexアイテムの大きさ指定に関するプロパティです。

  • flex-basis:Flexアイテムの主軸方向の基本の長さ
  • flex-grow:Flexアイテムを引き伸ばす比率
  • flex-shrink:Flexアイテムを縮める比率
  • flex:flex-grow、flex-shrink、flex-basisをまとめて指定

flex-grow:Flexアイテムを引き延ばす比率

Flexコンテナーに余白があるとき、Flexアイテムを主軸方向へ引き延ばします。コンテナーの余白をアイテムの長さに割り振る際、他のアイテムに比べてどのくらいの比率で割り振るかを数値で指定します。マイナス値は指定できません。他のアイテムの長さに対するそのアイテムの長さの比率ではないのでご注意ください。

指定する場所:Flexアイテム

flex-shrink:Flexアイテムを縮める比率

flex-growとは逆で、Flexコンテナーにアイテムが納まりきらないときに、ほかのアイテムに比べてどの程度要素の長さを縮めるかを数値で指定します。アイテムを折り返す指定の時は、「アイテムが収まりきらない」ことがないので、flex-wrap: nowrap のときしか指定は反映されません

指定する場所:Flexアイテム

flex-basis:Flexアイテムの主軸方向の基本の長さ

widthやheightのように、Flexアイテムの主軸方向の長さを指定するためのプロパティです。widthやheightと違う点は、必ずしもこのプロパティで指定した長さがそのまま適用されるとは限らないというところです。あくまでも基本の長さなので、 flex-grow や flex-shrink の指定などによってアイテムの長さが変わる場合があります。値の指定には、pxやem、%などの単位が使えます。

指定する場所:Flexアイテム

flex:flex-grow,flex-shrink,flex-basisをまとめて指定

指定する場所:Flexアイテム

flex:【flex-growの値】 【flex-shrinkの値】 【flex-basisの値】

上のように、flex-grow、flex-shrink、flex-basis の順番で指定します。

IE11のバグ

IE11では、flexプロパティでflexbasisの値に0を指定する際、単位を省略するとflexbasisの値が無視されてしまうというバグがありますので、0でも単位をつけて指定してください。

flex: 1 0 0;  /* IE11で最後の0が無視される */
flex: 1 0 0%;  /* このように単位をつければ問題なし */

参考サイト

 

 

CSS floatを使わないレイアウト「Flexbox」について6~個々のアイテムの配置位置や順番変更~

前回の記事では、交差軸方向のアイテムの配置に関するプロパティを紹介しました。今回は、アイテムひとつひとつの配置方法や位置変更をする以下の2つのプロパティを紹介します。

  • align-self:ある特定のFlexアイテムを交差軸のどの位置に配置するか(align-itemsはFlexコンテナーに指定、align-selfはFlexアイテムに個別指定)
  • order:並べる順序の指定

今回紹介するこの2つのプロパティから、Flexアイテムに対して指定をするプロパティです。前回までの記事では、Flexコンテナーに指定するプロパティのみ紹介してきたので、指定する場所に気を付けてください。はじめにFlexboxの構造と今までの記事へのリンクを載せておきます。

Flexboxの構造

Flexboxの構造の模式図

今までの記事

  1.  CSS floatを使わないレイアウト「Flexbox」について1~基本の指定~
  2. CSS floatを使わないレイアウト「Flexbox」について2~配置方法を指定する色々なプロパティ
  3. CSS floatを使わないレイアウト「Flexbox」について3~並べる向きとボックスの折り返し設定~
  4. CSS floatを使わないレイアウト「Flexbox」について4~主軸に沿ってどのように並べるかの設定~
  5. CSS floatを使わないレイアウト「Flexbox」について5~交差軸の配置方法を指定する~

align-self:特定のFlexアイテムを交差軸のどの位置に配置するか

前回の記事で紹介した align-items や align-content は、Flexコンテナーに指定してFlexbox内のすべてのアイテムを並べるプロパティでした。しかしalign-self は、Flexアイテム自体に指定して個々のアイテムごとに配置を指定することができるプロパティです。

指定する場所:Flexアイテム

align-selfの値
意味 左から右へ並べた時の見た目
auto 親要素のalign-itemsの値と同じになる(初期値)
stretch アイテムの長さがcross-axisに沿ってFlexコンテナー一杯に広がる アイテムの高さがFlexコンテナー一杯に広がる
flex-start cross-start(交差軸の始点)側に詰める 上詰め
flex-end cross-end(交差軸の終点)側に詰める 下詰め
center 中央に配置 上下中央配置
baseline 文字のベースラインが一直線になるように配置する align-self: baseline; を指定した他のアイテムとベースラインが揃う

align-selfイメージ

指定の例

HTML

<div class="container">
  <div>BOX01</div>
  <div class="box02">BOX02</div> <!-- このアイテムだけ交差軸の配置位置を変える -->
  <div>BOX03</div>
</div>

CSS

.container { display: flex; }
.box02 { align-self: flex-end; } /* .box02のみ交差軸の終端に配置 */

DEMO

align-selfの指定例

order:並べる順序の指定

order は、個々のFlexアイテムに指定して、アイテムを並べる順番を指定するプロパティです。順番は整数値で指定します(負の値も可)。

指定する場所:Flexアイテム

指定の例

HTML

<div class="container">
  <div>BOX01</div> <!-- 3番目に移動 -->
  <div>BOX02</div> <!-- 1番目に移動 -->
  <div>BOX03</div> <!-- 2番目に移動 -->
  <div>BOX04</div> <!-- 6番目に移動 -->
  <div>BOX05</div> <!-- 4番目に移動 -->
  <div>BOX06</div> <!-- 5番目に移動 -->
</div>

CSS

.container>:nth-child(1) { order: 3; }
.container>:nth-child(2) { order: 1; }
.container>:nth-child(3) { order: 2; }
.container>:nth-child(4) { order: 6; }
.container>:nth-child(5) { order: 4; }
.container>:nth-child(6) { order: 5; }

DEMO

orderの指定例

参考サイト

CSS floatを使わないレイアウト「Flexbox」について5~交差軸の配置方法を指定する~

前回の記事で、主軸に沿ってどのように並べるかを指定する justify-content プロパティを紹介しました。今回は交差軸の配置を指定するプロパティを2つ紹介します。

  • align-items:交差軸のどの位置に並べるか
  • align-content:Flexアイテムを折り返す設定のとき、交差軸に沿ってどのように並べるか

align-items:交差軸のどの位置に並べるか

Flexコンテナーの交差軸方向に余白ができる場合、アイテムを交差軸のどの位置に並べるか指定するプロパティです。複数行の場合も適用されますが、align-content が stretch 以外で指定されているときは、align-content の見た目のみ反映されます。

指定する場所:flexコンテナー

align-itemsの値
意味 左から右へ並べた時の見た目
stretch アイテムの長さがcross-axisに沿ってFlexコンテナー一杯に広がる(初期値) アイテムの高さがFlexコンテナー一杯に広がる
flex-start cross-start(交差軸の始点)側に詰める 上詰め
flex-end cross-end(交差軸の終点)側に詰める 下詰め
center 中央に配置 上下中央配置
baseline 文字のベースラインが一直線になるように配置する ベースラインが横一直線に揃う

align-itemsイメージ

align-content:交差軸に沿ってどのように並べるか(複数行の場合)

アイテムが折り返される設定(flex-wrap が wrap か wrap-reverse)のときにアイテムを交差軸に沿ってどのように並べるかを指定します。flex-wrap が nowrap の時は無効です。上詰め、下詰め、上下中央配置、上下均等配置などができます。

指定する場所:flexコンテナー

align-contentの値
意味 左から右へ並べた時の見た目
stretch アイテムの長さがcross-axisに沿ってFlexコンテナーの余白を埋めるように広がる(アイテムの長さはすべての行で同じになる)(初期値) アイテムの高さがFlexコンテナーの余白を埋めるように広がる(アイテムの長さはすべての行で同じになる)
flex-start cross-start(交差軸の始点)側に全体を詰める 上詰め
flex-end cross-end(交差軸の終点)側に詰める 下詰め
center 中央に配置 上下中央配置
space-between Flexアイテムを均等配置する
(最初のアイテムをcross-startに、最後のアイテムをcross-endに配置)
均等配置(上下にスペースなし)
space-around Flexアイテムを均等配置する
(アイテムの周囲に均等にスペースをとる)
均等配置(上下にスペースあり)

align-contentイメージ

使い分け

交差軸(cross-axis)方向の配置方法を指定するプロパティを2つ紹介しましたが、効果が似ていて使い分けに迷うかもしれません。しかし、align-content の方は複数行の時しか反映されないので、1行の時は align-items 、複数行の場合は align-content を使えば大丈夫です。

参考サイト

CSS floatを使わないレイアウト「Flexbox」について4~主軸に沿ってどのように並べるかの設定~

前回の記事で、主軸の向きを設定するflex-direction、アイテムの折り返しをするかどうかのflex-wrap、その二つをまとめて書くショートハンドプロパティflex-flowを紹介しました。今回は、以下のFlexbox関連プロパティを紹介します。

  • justify-content:主軸に沿ってどのように並べるか

justify-content:主軸に沿ってどのように並べるか

主軸に沿ってどのようにFlexアイテムを並べるか指定することができます。右寄せ、左寄せ、中央配置、均等配置などの設定ができます。

指定する場所:flexコンテナー

justify-contentの値
意味 左から右へ並べた時の見た目
flex-start 最初のFlexアイテム側に詰める(初期値) 左寄せ
flex-end 最後のFlexアイテム側に詰める 右寄せ
center 中央に配置 左右中央配置
space-between Flexアイテムを均等配置する
(最初のアイテムを始点に、最後のアイテムを終端に配置)
均等配置(両端にスペースなし)
space-around Flexアイテムを均等配置する
(アイテムの周囲に均等にスペースをとる)
均等配置(両端にスペースあり)

justify-contentのイメージ

記述例

HTML

<div class="container">
  <div>BOX01</div>
  <div>BOX02</div>
  <div>BOX03</div>
</div>

CSS

.container { justify-content: center; }

参考サイト