フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグイン 8 - NxWorld
いずれもテキストがフェードや回転といったアニメーション付きで表示されたり、一文字ずつタイピングされているような見せ方を実装することができるjQueryプラグインです。 同じようなプラグインが並んでいる感じですが、軽量なものやオプションが豊富に揃っているもの、日本語にもしっかり対応しているかなどそれぞれ特徴もあるので、こういったものを使いたい時に少しでも選択肢が広がるよう良さそうなものを備忘録兼ねてまとめました。 Letter by Letter JS Letter by Letter JS はテキストを徐々に表示させる効果を簡単に実装でき、1KBという軽さも特徴のjQueryプラグインです。 デモ画面などでは全て英語が使われていますが、日本語でも動くのは確認できました。 オプションとして表示スピードと表示タイプを指定することができ、表示タイプでは単純に表示させる'show'とフェード表示さ
Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
ちょっとした仕掛けや面白い表現を実装できるjQueryプラグイン - NxWorld
サイトにちょっとした仕掛けをつけたり、使い方によっては面白い表現を与えてくれるjQueryプラグインをいくつか紹介します。 案件とかだと難しいですけど、例えば個人ブログのように自分でサイトを運営しているなら、こういった遊び心を取り入れても面白いですね :) サイトにコナミコマンドを埋め込む「Cheat Code」 サイトで↑↑↓↓←→←→BAのようなコナミコマンドを入力するとメッセージを表示できるプラグイン。 使い方は「Cheat Code」よりjquery.cheat-code.jsをダウンロードし、jQueryと合わせて読み込みます。 例としてコードは下記のようになります。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.c
jQueryプラグイン「Isotope」でIEの不具合を修正する: JavaScriptメモ
jQueryプラグイン「Isotope」でIE6の不具合を修正する方法。 Isotopeではエフェクトを制御する為、要素にfilterが自動的に適応されます。その為、marginやpositionを指定した配置を行った場合、表示がおかしくなることがあります。 $('#unitItem').isotope({ filter: "" , animationOptions: { duration: 250, easing: 'linear', queue: false , complete : function(){ if($.browser.ie){ $(this).attr("style",$(this).attr("style").replace("alpha(opacity=100)","")) } } } }); animataionOptionsではanimateメソッドのオプション
タイルレイアウトjsIsotope
Install Download isotope.pkgd.js un-minified, or isotope.pkgd.min.js minified CDN Link directly to unpkg. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script> <!-- or --> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save
英字をぐるぐるシャッフルした感じで表示するjQueryプラグイン「Shuffle Letters Effect」
twitter facebook hatena google pocket 英字を、映像などで見るシャッフル感を与えてみると面白い表現になります。 Shuffle Text Effect with jQueryを利用することで可能になります。 sponsors 使用方法 Shuffle Text Effect with jQueryからファイルをダウンロードします。 <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script src="jquery.shuffleLetters.js"></script> <script type="text/javascript"> $(function(){ $("#id名").shuffleLetters(); }); </script> あとは効果を与えたい要
手軽にテキストをシャッフル演出できるjQueryプラグイン「jQuery Shuffle Effect」 | A40
私のポートフォリオサイト「KATOSHUN.com」のオープニングで、テキストのシャッフル演出用に作ったjQueryプラグインを公開します。 ３年くらい前にベースとなるJavaScriptを作ったのですが、KATOSHUN.comのリニューアルにあたって、jQueryプラグインに書き換えたものです。 実は作ってから他にも似たようなプラグインがいくつかあることを知りました…orz でもシンプルでわかりやすいから使ってくれる人もいるだろうと思い込むことにして、公開に踏み切りたいと思います。 デモ 簡単にテキストにこんな効果を加えることができます。（「デモ」のボタンを押してみてください） デモ 使い方 まずは「jQuery.shuffleeffect.js」をダウンロードし、HTMLに読み込ませます。 <script type="text/javascript" src="jquery.js">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
