文章内の任意のテキストのみ、内容をアニメーション付きでローテーションさせるスクリプト・Simple Text Rotator
文章内のテキストをアニメーションエフェクト付きで別テキストに変更、ローテーションで回せるというスクリプト。利用シーンはある程度限られますが、訴求力の向上に役立ってくれるかもしれません。 文章内の任意のテキストをローテーションさせる、というもの。以前にも似たようなものをご紹介させて頂いてますが、こちらもシンプルで良さそうです。 くるくる回ったりフェードイン/アウトしたり。 これはテスト <span class="rotate">foo, bar, hoge, huga</span>導入も楽です。 $(".piyo .rotate").textrotator({ animation: "flip", speed: 1250 });エフェクトは上記のようにセッティングします。 どこかで使うかも。リンクも設定出来るとこの手のスクリプトの利用シーンも増すんですけどね・・ Simple Text Ro
DD_belatedPNG / jQuery.belatedPNG についてメモ的な | プログラマ気分
一定期間更新がないため広告を表示しています
幅が異なる要素にも対応可能なカルーセルを実装するjQueryプラグイン・Lemmon Slider
以前やろうと思ったカルーセルを 実装できるプラグインが配布されて いたので備忘録。幅の異なる要素 にも対応できるカルーセルです。 多くのカルーセルやスライダーは サイズ固定ですよね・・・ 多くのカルーセル系スクリプトは、一度に進む幅が一定の値にされているため、回す要素のサイズを統一する必要がありました。Lemmon Sliderは異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。 上記のように幅の異なるアイテムでも幅を解析してスライドさせたときにピッタリ揃えてくれます。また、IE6などのオールドブラウザにも対応しています。 動作サンプルです。 div等のボックス要素も対応可能、画像もサイズを指定する必要は無く、幅を解析して自動でそろえてくれます。 コード<script type='text/javascript' src='http://ajax.googleapis.co
[JS]実行のタイミング（開始時間・回数・リピートなど）を簡単に設定できるスクリプト -timing
JavaScriptにはsetTimeout(), setInterval()とタイミングを設定できるメソッドがありますが、より簡単にタイミング（遅延時間・回数・リピートなど）を設定できるjQueryのプラグインを紹介します。 timing — a jQuery plugin [ad#ad-2] デモを例に、スクリプトの使い方を紹介します。 スクリプトの準備 スクリプトを使用するには「jquery.js」と当スクリプトを外部ファイルとして記述します。 ※jQueryは1.2+対応で、.join()使用時は1.7+を。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/<preferred-version>/jquery.min.js"></script> <script type=
レスポンシブなカルーセル実装jQueryプラグイン「Slastislide」:phpspot開発日誌
Elastislide - A Responsive jQuery Carousel Plugin | Codrops レスポンシブでカッコいいカルーセル実装jQueryプラグイン「Slastislide」 動きがいい感じな上に、ブラウザを縮小すると全体的に縮小されて使いやすそうです jQueryプラグインの形なので使うのも簡単です 通常モード スマホ等モード。ちょっとちっちゃいかも（＾＾；） 関連エントリ 高機能なカルーセルを実装するjQueryプラグイン５０まとめ ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル スマフォでも使える３Dカルーセル実装jQueryプラグイン「Cloud Carousel Touch」
要素にフローティング効果を手軽に与えられるjQueryプラグイン・jqFloat.js
画像とかをフワフワ動かすやつです。 指定した要素を、指定どおりに継続 的にサイト内で動かします。CPUの 問題とかもあると思うので多用は 出来ないと思いますが、よく見かけ るといえば見かけるので一応メモ。 オブジェクトにフローティング効果を与えます。キャラクターのあるキッズ、ファミリーをメインターゲットとしたWebサイトなんかと相性良さそうですね。 いろいろと画像が動きます。自動で動くものもあれば、マウスホバーで、クリックでアニメーションがスタートする、なども設定可能みたいです。 見た方が早いですかね。公式デモです。 Demo デモでは画像のみになっていますが、ボックス要素を丸ごと動かしていますので、テキストにしても同じ動作をしてくれます。 IEでも動く。 iPhoneでも動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jq
jQueryを使い要素の出てくる順に番号をつける方法（forの代わりにeach()を使う繰り返し）
今回、「jQuery Sequential List - Web Designer Wall」をみて、 eachがforと同じ動きをしているのを知った。 関数の中で数字の加算をしたら繰り返しのたびに増える… まさにforの動きなのですが、なぜかこの発想、自分の中になくて なんでこんなことに気づかなかったんだ～って なぜかショックを受けております。 ということで、いつものように試しにメモエントリーしておきます。 今回の簡単仕組み説明 今回使おうとしているのは、jQueryのeach これはよく使うのですが、これがforのかわりになるなんて なぜか思いつかなかった自分…(汗) 発想とかって、やっぱり必要なんだなって実感しております。 ulのliに適応させてみる まずはシンプルにリストに適応させてみます。 ■スクリプト $("#testList li").each(function (i) {
スクロール制御系のjqueryプラグイン「Jquery Waypoints」 | バニデザノート
主要な動きは４つ。 ・[ Infinite Scroll ] 永遠にスクロールしてくれる （先頭の要素をもう一度読み込んでくるくる回転しているようにみえる） ・[ Sticky Elements ] 一部のエレメントだけ、スクロールしても動かなくする ・[ Scroll Analytics ] スクロールした任意のポイントで、ページビューカウント ・[ Dial Controls ] ダイアル状の要素をスクロールさせると、他の要素が変化する ダウンロード＆解説はこちら Jquery Waypoints ご参考にどうぞ。 関連記事 やさしい時間と音楽の流れるサイト「hanging up the moon」 2011/11/09 完成度の高いフリーのアイコンセット「iconSweets2」 2011/11/08 可変グリッドで斜めなアイデアが素敵なサイト「ARNAUD BEEN」 2011/1
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル