Lettering.jsを併用して、任意のテキストにCSS3のアニメーションエフェクトを実装するスクリプト・textillate.js - かちびと.net

2013/01/31 34 users アニメーションエフェクト テキス エフェクト ライブラリ 種類

ちょっと面白かったのでメモ的に。 タイポグラフィ用のライブラリ、 Lettering.jsを併用して、テキス トにCSS3によるアニメーション効果 を容易に与える事が出来る、という スクリプトのご紹介。 使いどころは限定されますが、動きが面白かったのでメモ的に。以前ご紹介したLettering Animateを少し進化させたような感じ。 textillate.js エフェクトの種類もかなり用意され... 続きを読む

テキストを円形に描画するチュートリアル:phpspot開発日誌

2012/07/17 25 users 円形 チュートリアル phpspot開発日誌 Sass CSS

Set Text on a Circle | CSS-Tricks テキストを円形に描画するチュートリアル。 次のようにテキストを円形に描画するJavaScriptとCSSのチュートリアルです。 テキストをLettering.jsで1個1個の文字に分割して、Sassのループを使い、1個1個rotateさせていくという方法で実現されているようです。 アニメーションとかを組み合わせて、より面白いことが... 続きを読む

CSSと Lettering.js で実現している19種類のタイポグラフィ - 表参道フォークウヱル別館

2012/04/20 16 users タイポグラフィ CSS 表参道フォークウヱル別館 19種類

今回も、Forkwell の各種スキルのロゴのお話。Forkwell に登録されているスキルは、2012年4月20日現在およそ800種類。その内59種類は、スキルのロゴに人手で加工・編集した画像を当て込んでいるというのは前回の記事でご説明したわけですが、それ以外のロゴはどうなっているのでしょうか。 たとえばこの RSpec のロゴ。 どなたかのツイートで「（Forkwell の）RSpec のロゴ... 続きを読む

[JS]文字を楽しく見せる、カーブ状に簡単に配置できるスクリプト -Arctext.js | コリス

2012/01/25 120 users コリス animate スクリプト span set

Demo 4: Set/animate 「Animate me」でアニメーション。 Arctext.jsの使い方 Arctext.jsは「Lettering.js」をベースに文字をパスに沿わせて正しく回転させ配置します。 Lettering.jsについては、下記を参考ください。 HTMLファイルを汚さずに細かい設定でspanを挿入できるスクリプト -Lettering.JS では、Arctext.... 続きを読む

Photoshop VIP ☞ iPhone表示にも対応、レスポンシブデザインの無料WordPressテーマ15選(プラグイン付)

2011/09/08 218 users レスポンシブデザイン Photoshop Vip 併用 編集

レスポンシブデザインに関するjQueryプラグインなど レスポンシブWebサイトを作成するときに便利なツールなどをまとめています、ご参考までに。 FitText ウィンドウ幅に応じてフォントサイズを変更してくれるプラグイン、Webフォントを利用するときに便利。 無料ダウンロード Lettering.js タイポグラフィーのカーニングや編集なども可能にするプラグイン、こちらもWebフォントとの併用を... 続きを読む