Effect -LetterFx LetterFXの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link href="jquery-letterfx.css" rel="stylesheet" type="text/css" /> </head> <body> ... <script src="http://code.jquery.com/jquery.min.js"></script> <script src="tuxsudo.min.js"></script> <script src="jquery-letterfx.js"></script> </body> Step 2: HTML アニメーションを適用するテキストはp要素などで実装し、classやidなどを付与しておきます。 <p
複数のテキストを次々にモーフィングのアニメーションで表示するjQueryのプラグインを紹介します。 スクリプトとは関係ないですが、ページのアニメーションもかっこいい！ デモ Morphextの使い方 Step 1: 外部ファイル animate.cssと当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上あたりに記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> <link rel="stylesheet" href="morphext.css"> </head> <body> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script
フォームにフォーカスすると、プレースホルダーに配置したラベルがアニメーションでぽんっと上に移動するjQueryのプラグインを紹介します。 デスクトップ用のページで使用してもかっこいいですが、スマフォ用のページにも省スペースを兼ねて使用してもいいですね。 デモページ name, mailの他にもpasswordなどのフォームも用意されています。4番目のデモでは、プレスホルダーのテキストとは異なるテキストを表示します。 また、デモにはありませんが、ラベルは上・下・左・右に移動させることもできます。 Label Betterの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
幅780pxで表示 CircleTypeの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト、Lettering.jsを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/lettering.js"></script> <script type="text/javascript" src="js/circletype.min.js"></script> FitText.jsを併用すると、表示サイズに合わせてテキストのサイズを変更することもできます。 Step 2: HTML HTMLはシンプル
Flashのような美しいアニメーションで、複数のテキストをスライドやフェードなどで表示するjQueryのプラグインを紹介します。 デモページ ※キャプチャは、スライドとフェードのミックス。 animateText.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="/animateText.js/js/animateText.js"> </script> ※linear以外のアニメーションも使用する時は「jquery-ui.js」も外部ファイルに加え
フォームにテキストを入力する際、ちょっと面白いアニメーション（5種類）を与えるjQueryのプラグインを紹介します。 colissと入力、そして削除すると、こんな感じです。 Fancy Input Fancy Input -GitHub Fancy Inputのデモ Fancy Inputの使い方 Fancy Inputのデモ デモはFirefox, Chrome, Safari, Operaでご覧ください。 IEはゴメンナサイとのことで、通常通りに入力できるだけです。 デモページ デモではテキストとテキストエリアの2種類があり、エフェクトはそれぞれ5種類用意されています。 ※日本語の入力は対応していないようです、残念。 Fancy Inputの使い方 実装は非常に簡単です。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。
ランダムな文字を次々に表示し、一つのテキストを生成するSci-Fi styleのアニメーションのエフェクトを与えるjQueryのプラグインを紹介します。 Text Effects Text Effects -GitHub ※上記のアニメーションgifは軽量化のため、間引いてます。実際はもっと多くの文字列が高速に表示されます。 Text Effectsのデモ Text Effectsの使い方 Text Effectsのデモ テキストのエフェクトにはいくつかのバリエーションがあります。 上記のアニメーションgifのようなシンプルなエフェクトをはじめ、複数のテキストを使ってループで表示したり、逆からテキストを生成するリバースなどがあります。 Text Effectsの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。
使いどころもありそうだったので 備忘録。文字をアニメーションし ながら少しずつ表示させていく様 なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。 プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。 lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。 以下動作サンプルです。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" sr
dotdotdotは、はみ出したテキストを「…」に変えてくれるjQueryプラグインです。 日本語の2バイトでの確認は必要かもですが、簡単に実装できるようです。 dotdotdot
テキストをランダムでフェード表示させて、アニメーションで整列させていくっていうのをjQueryで作りたく色々と試しながらなんとかできたのでプラグイン（jquery.random.text.return.js）にしてみました。ぶっちゃけほぼ使い道がなさそうなプラグインですけど。。ということで以下使い方です。 使い方 とりあえずサンプルみた方が早いので以下のページから見れます。 サンプル 使い方はめっちゃ簡単です。以下のページからファイルをダウンロードします。 ダウンロードページ head内にjQuery本体とダウンロードしたプラグインを読み込みます。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script> <
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ちょっと面白いプラグインだったので 備忘録。曲線に沿ってテキストを折り 返せるようにするjQueryプラグインで す。新聞のようなレイアウトも組めそ うです。用途はあまり無さそうですけ ど、珍しいので覚えておきたい。 Bacon!(ベーコン)です。名前の経緯は分かりませんが、ペジェ曲線にそったテキストの折り返しが可能です。 こんな感じ。結構前に同じようなライブラリありましたね。こちらはペジェ曲線と同じような感覚でラインを作る事が出来ます。 こういうのとか こういうのも作れる。 IEでもなんとか動く。 コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></
Demo 4: Set/animate 「Animate me」でアニメーション。 Arctext.jsの使い方 Arctext.jsは「Lettering.js」をベースに文字をパスに沿わせて正しく回転させ配置します。 Lettering.jsについては、下記を参考ください。 HTMLファイルを汚さずに細かい設定でspanを挿入できるスクリプト -Lettering.JS では、Arctext.jsの使い方を。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
