「jQuery」カテゴリーアーカイブ

jQueryに関する記事をまとめています。htmlに簡単に動きを与えてくれる便利なフレームワークであるjQuery。便利な小技が沢山あります。

文字列の操作はとても難しく、それらを自動化してくれるのは大変助かりますね。

ウインドウのサイズに合わせて文字サイズや文字間のサイズを調整してくれるのですが、動作が自然で素敵です。

色々な所で利用できすおなのでメモしておきます。

プラグイン

テキストをエフェクト・アニメーションさせる文字列操作系jQueryプラグインまとめ

2014年4月3日 aoringo12

わりと色々な所にアクセントとして利用することが増えてきていたので、ここらでテキストにエフェクトやアニメーションを追加するjQueryプラグインをまとめて置こうと思います。選択肢を持っておくと、ページ製作も効率良く進める事が出来ますね。

テキストの入れ替え表示

Textualizer

Textualizer | K. Risk – JavaScript Refined

テキストをフィードインで入れ替えながら表示させる事ができます。表示させる文字列の中に「前に使用した文字」が含まれていれば、それは消さずにスライドさせて次の文章を表示させます。ちょっと分かりづらいですがリンク先のデモを見てもらえれば分かるかと思います。

Textillate.js

指定したテキストにcss3のアニメーションを指定する事が出来ます。豊富なオプションがあり、待ち時間やエフェクトの切り替えなど、かなり細かく設定できるのが特徴です。

dinamo

dynamo.js

文字列の指定した部分がくるっと入れ替わります。シンプルで控えめ。簡単に実装でき、待機やアニメーションの時間を設定する事が出来ます。githubはこちら→jdan/dynamo.js · GitHub

Shuffle Letters Effect

Shuffle Letters Effect: a jQuery Plugin | Tutorialzine

文字列をシャッフルさせながら表示します。文字の入れ替えも可能。デモを見てみるとどういうことか良く分かるかと思います。→Shuffle Text Effect with jQuery | Tutorialzine Demo

色々と使い道がありそうですね。

TEXT OPENING SEQUENCE WITH CSS ANIMATIONS

Text Opening Sequence with CSS Animations | Codrops

まさにこれから映画が始まるのか？　と思えるほど重厚な雰囲気を出せるjQueryプラグインです。凄いんですけれども、使い道に困りそうですｗ

Sliding Letters

Sliding Letters with jQuery | Codrops

テキストをマウスオーバーすると、スライドするような感じでかわいらしくアニメーションします。太めの文字で動作させると良い感じでは無いでしょうか。デモでどういった動作をするかがわかります→Sliding Letters with jQuery

Super Simple Text Rotator

peachananr/simple-text-rotator · GitHub

文字列の一部をシンプルなエフェクトとともに入れ替える事が出来ます。色々なエフェクトが容易されておりたのしげです。デモで動作を確認してみてください→jQuery Super Easy Text Rotator by Pete R. | The Pete Design

テキストのエフェクト表示

Squiggle

テキストの取り消し線をぐにゃぐにゃした手書き風で表現してくれます。かなり特殊で面白いですね。

Textmorph

テキストを指定された図形に合わせて整形して表示してくれます。インパクト大きいですね。

Arctext.js

Arctext.js – Curving Text with CSS3 and jQuery | Codrops

色々な使い道が出来そうです。色々なレイアウトに使う事ができそうです。

grab bag-Text Effects

grab bag

テキストをタイプしながらというイメージでアニメーションさせたり、文字をランダムに入れ替えながら表示させたりと様々な表現ができるようです。シンプルな分色々な所に使えそうですね。

textblur

ottonascarella/textblur · GitHub
ブラーでボカしたような感じからアニメーションしてくっきりと文字列が表示されるようにアニメーションします。デモ→TextBlur – a jQuery Plugin

セレクタ

jQueryでチェックがついたラジオボタンの親要素を指定する

2014年3月20日 aoringo12

スライド開閉式のコンテンツなどで、特定の要素だけは開いた状態にしておきたい時などに利用する。

たとえばこのようなコンテンツがあったときに、単純なスライドだとリロードすると全て閉じた状態になってしまう。

ドキュメントの用意が終わった段階で、チェックがついたラジオボタン要素の親を表示したままにするのは下記コードを利用する。

jQuery('親要素:has(子要素)')

has()で囲われた要素を親に持つ要素を対象にする事が出来る。

jQuery('ul.children:has(input:checked)').css("display", "block");

今回の場合はこのようにした。リストのチェックが入ったラジオボタン要素を親に持つ「ul.children」を全てdisplay情報の変更といったところか。

プラグイン

要素をランダムにcss3グラデーションしてくれるjQueryプラグイン「SHARDS」が素敵オシャレ

2013年7月26日 aoringo12

CSS3による多層グラデーションを使った背景を作れるjQueryプラグイン・SHARDS – かちびと.net
ちょっと面白かったので備忘録。CSS3で多層グラデーションの背景を手軽に作れる、というスクリプト。jQueryに依存します。レイヤーはランダムに組まれるみたいですね。 …

katibito.netさんで取り上げられていて面白そうだったんで早速飛びつきました。

スクリプトが走ると自動で色づけしてくれるようです。

SHARDS – A jQuery plugin

公式のdemoはこちら。むっちゃオシャレんてぃです。

$('element').shards(col1,col2,highlight,levels,complexity,lightness,alpha,fullscreen);

これだけで要素をグラデーションかける事ができます。色つきクリスタルを割ったような鮮やかでシャープなグラデ。かっこいい！

要素はそれぞれ

colour 1/カラー１　　　　　　　　　　　: rgba array-> [255,255,55,.5]
colour 2/カラー2　　　　　　　　　　　　: rgba array-> [255,255,55,.5]
shade colour/グラデカラー　　　　　　　: rgba array-> [255,255,55,.5]
number of shards/重なる色の数　　　　　: integer-> 12 max:100
comlexity/複雑さ（色の変化の多さ的な）　: decimal-> .8 max:1
lightness/明るさ　　　　　　　　　　　　: integer-> 2 max:3
alpha/透明度　　　　　　　　　　　　　　: decimal-> .8 max:1
fullscreen/フルスクリーン　　　　　　　: boolean-> true

こんな感じですか。

色々いじってみたついでにdemoも用意してみました！

DEMO / test

グラデーション！ボタンで色々遊べます。動作チェックにでもどうぞ。うん、楽しかった。

aoringo works