SVGアニメーションでマスクした写真をぷるぷる動かす方法 ｜ Tips Note by TAM
ちょっと凝った動きをつけたいけど、Canvasでガリガリ書くのはちょっと・・ という方に是非お勧めしたいのがSVGアニメーション！ SVGはXMLをベースとした2次元ベクターイメージなので拡大縮小が自由というのも魅力の一つ。 このTipsNoteのロゴで弊社のキャラクターTAMくんが動いているのもSVGアニメーションによるものです。 今回はそんなSVGで、マスクした画像のフチをぷるぷる動かすサンプルを作ってみたいと思います。 完成デモ ＞＞ 素材を作成 まずはIllustratorでぐねぐねした枠(A)を書きます。 続いて(A)を複製し、パスの数は変えずに枠の凹み具合などを変えた(B)を作成します。 これだけでも枠を動かすことは可能ですが、2つだけだと動きが単調になってしまうので 今回は4パターンの異なる枠(A〜D)を用意しました。 用意ができればそれらをSVG形式に保存して準備完了です！
jQueryでフォーム入力をチェックする ｜ Tips Note by TAM
正規表現（jquery）を利用した入力チェックを紹介します。 正規表現は、文字が一致しているのか、していないかを判定する機能です。 応用としてフォームで入力された文字が条件と一致、不一致をチェックし、 ユーザーに正しい入力を促す方法です。 if文（条件文）を主に使っていきます。 if文についてはこちらを参考にしてください。 【Javascriptの条件文】 http://www.rsch.tuis.ac.jp/~mizutani/online/javascript/condition.html 今回、紹介する例は、チェックするタイミングを入力後に設定します（フォーカスを外したとき）。 $("input[name='hoge']").blur(function(){ if(条件){ //実行内容 } }); 【入力が空の場合】 $("input[name='hoge']").blur(fun
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
