kaochan0_0のブックマーク - はてなブックマーク

SVGとCSS3でできる筆記体のアニメーションをやってみる | スターフィールド株式会社

SVGとCSS3を使った線画によるテキストのアニメーションの方法が紹介されていました。想像していたよりも、ずっと簡単にできることがわかりました。こちらの方法を少し応用して筆記体のアニメーションをやってみましたので、ご紹介いたします。 ↓参考にさせていただいたサイト SVG線画が美しいリッチアニメーションの作り方 ↓作ってみたもの DEMO 方法基本的な方法・手順は参考サイトと一緒です。 1. Illustratorを使い、筆記体のフォントを、ペンツールを使って一筆書きのパスとしてトレースする Illustratorでモデルとなる筆記体のフォントでテキストを配置し、ペンツールでトレースします。このとき、パスは途中で切らずに、一筆書きの状態になるよう、1つのパスでトレースします。ただ、実際の筆記体のように、t, fの横線は別のパスとして作成し、 iの点の部分は星形のパスとして作成し

kaochan0_0 2015/01/20

リンク

lightbox系プラグイン「Shadowbox.js」が便利でかっこいい | スターフィールド株式会社

lightboxといえば、結構前から現在でもサイトでよく使われているjavascriptプラグインです。似たようなものがいくつかあり、それらをまとめてモーダルボックスやlightboxといったりしますが、その中で、シンプルで、使いやすくて、ちょっとかっこいいプラグインをご紹介します。その名も「Shadowbox.js」です！特徴としては、・画像の表示、複数画像のスライド・外部サイト、共有動画サイトの表示・インラインコンテンツ（ページ内のhtml要素）の表示・flash(swf)や動画ファイル(SWF,FLV,WMP,QuickTime)の表示ができるということです。動画やインラインのものを表示できるものってそう多くはないのではないかなぁと思います。（他のプラグインを詳しく見てはないのではっきりとはわかりませんが・・・） DEMOを作成しているので、ぜ