【jquery】ページを丸ごと切り替えるプラグイン

高さを揃えるjQueryプラグイン「jQuery-fixHeightSimple」つくりました

phpとinfinitescrollのもっと見る機能

jQueryとCSS3で円の型抜きのホバー効果

<p>簡単に動画を背景として利用できるjQueryプラグイン「jquery.mb.YTPlayer」を使ってみた。</p>
<p><a href="http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer" target="_blank">http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer</a></p>
<p>&nbsp;</p>
<h2>設置方法</h3>
<p>■js</p>

		<div id="crayon-64953fd58f033780013895" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
jQuery(function(){
	jQuery( '.player' ).mb_YTPlayer();
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58f033780013895-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58f033780013895-2">2</div><div class="crayon-num" data-line="crayon-64953fd58f033780013895-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58f033780013895-1"><span class="crayon-e">jQuery</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58f033780013895-2"><span class="crayon-h">	</span><span class="crayon-e">jQuery</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'.player'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">mb_YTPlayer</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58f033780013895-3"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>■html</p>

		<div id="crayon-64953fd58f038630194872" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;a id="P2" class="player" data-property="{videoURL:'54dhAKNxu6c',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1, showYTLogo:false, showControls:false}"&gt;&lt;/a&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58f038630194872-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58f038630194872-1"><span class="crayon-r ">&lt;a </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"P2"</span><span class="crayon-h"> </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"player"</span><span class="crayon-h"> </span><span class="crayon-e ">data-property</span>=<span class="crayon-s ">"{videoURL:'54dhAKNxu6c',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1, showYTLogo:false, showControls:false}"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2> パラメータ</h3>
<table>
<tbody>
<tr>
<th>パラメータ</th>
<th>データ型</th>
<th>デフォルト</th>
<th>用途</th>
<th>使用方法</th>
</tr>
<tr>
<td>videoURL</td>
<td>string</td>
<td>&#8211;</td>
<td>対象動画</td>
<td>youtubeの動画IDを指定<a href="#h1">※</a></td>
</tr>
<tr>
<td>opacity</td>
<td>int</td>
<td>1</td>
<td>透明度</td>
<td>0〜1の数値を指定</td>
</tr>
<tr>
<td>mute</td>
<td>bool</td>
<td>true</td>
<td>音</td>
<td>音の有無を指定</td>
</tr>
<tr>
<td>showControls</td>
<td>bool</td>
<td>true</td>
<td>コントローラー</td>
<td>コントローラーの表示の有無を指定</td>
</tr>
<tr>
<td>ratio</td>
<td>string</td>
<td>4/3</td>
<td>アスペクト比</td>
<td>4/3若しくは16/9を指定</td>
</tr>
<tr>
<td>quality</td>
<td>string</td>
<td>default</td>
<td>画質</td>
<td>default、small、medium、large、hd720、hd1080、highresを指定</td>
</tr>
<tr>
<td>containment</td>
<td>string</td>
<td>&#8211;</td>
<td>出力場所</td>
<td>CSSセレクタで指定</td>
</tr>
<tr>
<td>optimizeDisplay</td>
<td>bool</td>
<td>true</td>
<td>画面フィット</td>
<td>画面サイズにフィットさせるか否か</td>
</tr>
<tr>
<td>loop</td>
<td>bool</td>
<td>true</td>
<td>ループ</td>
<td>ループの有無を指定</td>
</tr>
<tr>
<td>vol</td>
<td>int</td>
<td>&#8211;</td>
<td>ボリューム</td>
<td>1〜100で指定</td>
</tr>
<tr>
<td>startAt</td>
<td>int</td>
<td>0</td>
<td>開始位置</td>
<td>開始秒を指定</td>
</tr>
<tr>
<td>autoplay</td>
<td>bool</td>
<td>true</td>
<td>自動再生</td>
<td>自動再生の有無を指定</td>
</tr>
<tr>
<td>showYTLogo</td>
<td>bool</td>
<td>true</td>
<td>youtubeロゴ</td>
<td>ロゴ及びオリジナルへのリンクの有無を指定</td>
</tr>
</tbody>
</table>
<p><a id="h1" name="h1"></a><br />
<i>例えば<br />
www.youtube.com/watch?v=54dhAKNxu6c&amp;list=UUX7o_POJBRnI3bs5PQOnH2w<br />
の<br />
54dhAKNxu6c<br />
の部分。つまり<br />
v=**********<br />
を抽出<br />
</i><br />
ECサイトにおいても、詳細ページでの訴求力アップに役立ちそうだ。</p>
<p><a class="demo" href="/demo/hoshino/43/1.html">デモ(商品動画)</a></p>
<p><a class="demo" href="/demo/hoshino/43/2.html">デモ(イメージ)</a></p>

youtubeの動画を背景に利用できるjQueryプラグイン

jQuery.Deferredでわかりやすく順番にアニメーションする方法

シンプルでフレキシブルでレスポンシブなlightboxプラグイン「Nivo Lightbox」

<p>テキストのエフェクトがかっこいいjQueryプラグイン texteffects.jsを使ってみた。</p>
<p><a href="http://fourdesire.com/playgrounds/texteffects" target="_blank">http://fourdesire.com/playgrounds/texteffects</a></p>
<p><a class="demo" href="/demo/hoshino/42/">demo</a></p>
<p>&nbsp;</p>
<p>設置は非常に簡単で</p>
<p>JS</p>

		<div id="crayon-64953fd58dcef552381051" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	$(".test1").textEffect();
	$(".test2").textEffectLoop();
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58dcef552381051-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58dcef552381051-2">2</div><div class="crayon-num" data-line="crayon-64953fd58dcef552381051-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58dcef552381051-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58dcef552381051-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58dcef552381051-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".test1"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">textEffect</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58dcef552381051-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".test2"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">textEffectLoop</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58dcef552381051-4"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>HTML</p>

		<div id="crayon-64953fd58dcf3367119290" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;p class="test1"&gt;
    スタンダードな関数です。1度だけ再生されます
&lt;/p&gt;
&lt;ul class="test2"&gt;
    &lt;li&gt;スタンダードな関数が、ループし続けます&lt;/li&gt;
    &lt;li&gt;liタグで複数指定します&lt;/li&gt;
    &lt;li&gt;liタグの数だけループし、最後までいくとまた最初から再生します&lt;/li&gt;
&lt;/ul&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58dcf3367119290-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58dcf3367119290-2">2</div><div class="crayon-num" data-line="crayon-64953fd58dcf3367119290-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58dcf3367119290-4">4</div><div class="crayon-num" data-line="crayon-64953fd58dcf3367119290-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58dcf3367119290-6">6</div><div class="crayon-num" data-line="crayon-64953fd58dcf3367119290-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58dcf3367119290-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58dcf3367119290-1"><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"test1"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58dcf3367119290-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;スタンダードな関数です。1度だけ再生されます</span></div><div class="crayon-line" id="crayon-64953fd58dcf3367119290-3"><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58dcf3367119290-4"><span class="crayon-r ">&lt;ul </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"test2"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd58dcf3367119290-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-i ">スタンダードな関数が、ループし続けます</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58dcf3367119290-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-i ">liタグで複数指定します</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd58dcf3367119290-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-i ">liタグの数だけループし、最後までいくとまた最初から再生します</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58dcf3367119290-8"><span class="crayon-r ">&lt;/ul&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>関数はtextEffect()とtextEffectLoop()の2つだけで</p>
<p>前者が1度だけ、後者はループする。</p>
<p>&nbsp;</p>
<p>パラメータは主に以下が利用できる。</p>
<p>&nbsp;</p>
<p>textEffect()</p>
<p>fps: フレームごとのマイクロ秒<br />
repeat: 指定した文字がでる前に出るその他文字の数<br />
debug: デバッグモード<br />
reverse: trueで逆エフェクト<br />
possibleChar: 使用する文字。例：&#8221;ABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&amp;*()_+-=[];;&gt;&lt;0123456789&#8243;</p>
<p>&nbsp;</p>
<p>textEffectLoop()</p>
<p>timeout: エフェクト開始から終了までのマイクロ秒<br />
loop: 何回ループさせるか</p>

テキストのエフェクトがかっこいいjQueryプラグイン texteffects.js

レスポンシブデザインでPCとスマホで画像を切替える方法

jQueryで順番にアニメーションする方法を考える

jQueryで簡単なloading画面を作る

jQuery を使ってランダムで要素を表示する

時間まで選択できるDatepickerプラグインTimepicker。を日本語化

<p>66種類ものスライドが使えるjQueryプラグイン</p>
<p>PAGE TRANSITIONSをつかってみた。</p>
<p><a href="http://tympanus.net/Development/PageTransitions/" target="_blank">http://tympanus.net/Development/PageTransitions/</a></p>
<p>&nbsp;</p>
<p>非常にクオリティの高いエフェクトが揃っており、</p>
<p>様々なオブジェクトに対して利用できるため、これだけ使ってれば良いのではと思えた。</p>
<p>&nbsp;</p>
<p>設置方法は</p>

		<div id="crayon-64953fd58c522503132045" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;ul class="dl-submenu"&gt;
    &lt;li data-animation="1"&gt;&lt;a href="#"&gt;右から左へスライド&lt;/a&gt;&lt;/li&gt;
    &lt;li data-animation="2"&gt;&lt;a href="#"&gt;左から右へスライド&lt;/a&gt;&lt;/li&gt;
    &lt;li data-animation="3"&gt;&lt;a href="#"&gt;下から上へスライド&lt;/a&gt;&lt;/li&gt;
    &lt;li data-animation="4"&gt;&lt;a href="#"&gt;上から下へスライド&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58c522503132045-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58c522503132045-2">2</div><div class="crayon-num" data-line="crayon-64953fd58c522503132045-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58c522503132045-4">4</div><div class="crayon-num" data-line="crayon-64953fd58c522503132045-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58c522503132045-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58c522503132045-1"><span class="crayon-r ">&lt;ul </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"dl-submenu"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58c522503132045-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">data-animation</span>=<span class="crayon-s ">"1"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">右から左へスライド</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd58c522503132045-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">data-animation</span>=<span class="crayon-s ">"2"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">左から右へスライド</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58c522503132045-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">data-animation</span>=<span class="crayon-s ">"3"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">下から上へスライド</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd58c522503132045-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">data-animation</span>=<span class="crayon-s ">"4"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">上から下へスライド</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58c522503132045-6"><span class="crayon-r ">&lt;/ul&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>このように、dl-submenuを親として、その下にdata-animation=nというように</p>
<p>nでエフェクトの方法を指定する。</p>
<p>&nbsp;</p>
<p>以下はすべての動きとdata-animationの対応表。</p>
<p>&nbsp;</p>
<table>
<tbody>
<tr>
<th>大カテゴリ</th>
<th>中カテゴリ</th>
<th>小カテゴリ</th>
<th>動作説明</th>
<th>data-animation</th>
</tr>
<tr>
<td>MOVE</td>
<td>MOVE TO LEFT/ FROM RIGHT</td>
<td></td>
<td>右から左へスライド</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>MOVE TO RIGHT/ FROM LEFT</td>
<td></td>
<td>左から右へスライド</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td>MOVE TO TOP/ FROM BOTTOM</td>
<td></td>
<td>下から上へスライド</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td>MOVE TO BOTTOM/ FROM TOP</td>
<td></td>
<td>上から下へスライド</td>
<td>4</td>
</tr>
<tr>
<td>FADE</td>
<td>FADE / FROM RIGHT</td>
<td></td>
<td>右から左へフェード</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td>FADE / FROM LEFT</td>
<td></td>
<td>左から右へフェード</td>
<td>6</td>
</tr>
<tr>
<td></td>
<td>FADE / FROM BOTTOM</td>
<td></td>
<td>下から上へフェード</td>
<td>7</td>
</tr>
<tr>
<td></td>
<td>FADE / FROM TOP</td>
<td></td>
<td>上から下へフェード</td>
<td>8</td>
</tr>
<tr>
<td></td>
<td>FADE LEFT / FADE RIGHT</td>
<td></td>
<td>右フェードから左へフェード</td>
<td>9</td>
</tr>
<tr>
<td></td>
<td>FADE RIGHT / FADE LEFT</td>
<td></td>
<td>左フェードから右へフェード</td>
<td>10</td>
</tr>
<tr>
<td></td>
<td>FADE TOP / FADE BOTTOM</td>
<td></td>
<td>下フェードから上へフェード</td>
<td>11</td>
</tr>
<tr>
<td></td>
<td>FADE BOTTOM / FADE TOP</td>
<td></td>
<td>上フェードから下へフェード</td>
<td>12</td>
</tr>
<tr>
<td>DIFFERENT EASING</td>
<td>DIFFERENT EASING / FROM RIGHT</td>
<td></td>
<td>右から左へフェード改</td>
<td>13</td>
</tr>
<tr>
<td></td>
<td>DIFFERENT EASING / FROM LEFT</td>
<td></td>
<td>左から右へフェード改</td>
<td>14</td>
</tr>
<tr>
<td></td>
<td>DIFFERENT EASING / FROM BOTTOM</td>
<td></td>
<td>下から上へフェード改</td>
<td>15</td>
</tr>
<tr>
<td></td>
<td>DIFFERENT EASING / FROM TOP</td>
<td></td>
<td>上から下へフェード改</td>
<td>16</td>
</tr>
<tr>
<td>SCALE</td>
<td>SCALE DOWN / FROM RIGHT</td>
<td></td>
<td>右から左へ縮小</td>
<td>17</td>
</tr>
<tr>
<td></td>
<td>SCALE DOWN / FROM LEFT</td>
<td></td>
<td>左から右へ縮小</td>
<td>18</td>
</tr>
<tr>
<td></td>
<td>SCALE DOWN / FROM BOTTOM</td>
<td></td>
<td>下から上へ縮小</td>
<td>19</td>
</tr>
<tr>
<td></td>
<td>SCALE DOWN / FROM TOP</td>
<td></td>
<td>上から下へ縮小</td>
<td>20</td>
</tr>
<tr>
<td></td>
<td>SCALE DOWN / SCALE DOWN</td>
<td></td>
<td>縮小後縮小</td>
<td>21</td>
</tr>
<tr>
<td></td>
<td>SCALE UP / SCALE UP</td>
<td></td>
<td>拡大後拡大</td>
<td>22</td>
</tr>
<tr>
<td></td>
<td>MOVE TO LEFT / SCALE UP</td>
<td></td>
<td>左へ移動して拡大</td>
<td>23</td>
</tr>
<tr>
<td></td>
<td>MOVE TO RIGHT / SCALE UP</td>
<td></td>
<td>右へ移動して拡大</td>
<td>24</td>
</tr>
<tr>
<td></td>
<td>MOVE TO TOP / SCALE UP</td>
<td></td>
<td>上へ移動して拡大</td>
<td>25</td>
</tr>
<tr>
<td></td>
<td>MOVE TO BOTTOM / SCALE UP</td>
<td></td>
<td>下へ移動して拡大</td>
<td>26</td>
</tr>
<tr>
<td></td>
<td>SCALE DOWN / SCALE UP</td>
<td></td>
<td>縮小後拡大</td>
<td>27</td>
</tr>
<tr>
<td>ROTATE</td>
<td>GLUE</td>
<td>GLUE LEFT / FROM RIGHT</td>
<td>右から左へ畳み</td>
<td>28</td>
</tr>
<tr>
<td></td>
<td></td>
<td>GLUE RIGHT / FROM LEFT</td>
<td>左から右へ畳み</td>
<td>29</td>
</tr>
<tr>
<td></td>
<td></td>
<td>GLUE BOTTOM / FROM TOP</td>
<td>下から上へ畳み</td>
<td>30</td>
</tr>
<tr>
<td></td>
<td></td>
<td>GLUE TOP / FROM BOTTOM</td>
<td>上から下へ畳み</td>
<td>31</td>
</tr>
<tr>
<td></td>
<td>FLIP</td>
<td>FLIP RIGHT</td>
<td>右へ回転</td>
<td>32</td>
</tr>
<tr>
<td></td>
<td></td>
<td>FLIP LEFT</td>
<td>左へ回転</td>
<td>33</td>
</tr>
<tr>
<td></td>
<td></td>
<td>FLIP TOP</td>
<td>上へ回転</td>
<td>34</td>
</tr>
<tr>
<td></td>
<td></td>
<td>FLIP BOTTOM</td>
<td>下へ回転</td>
<td>35</td>
</tr>
<tr>
<td></td>
<td>FALL</td>
<td></td>
<td>落ちる</td>
<td>36</td>
</tr>
<tr>
<td></td>
<td>NEWSPAPER</td>
<td></td>
<td>くるくる</td>
<td>37</td>
</tr>
<tr>
<td></td>
<td>PUSH / PULL</td>
<td>PUSH LEFT / FROM RIGHT</td>
<td>右から左へ押し出し</td>
<td>38</td>
</tr>
<tr>
<td></td>
<td></td>
<td>PUSH RIGHT / FROM LEFT</td>
<td>左から右へ押し出し</td>
<td>39</td>
</tr>
<tr>
<td></td>
<td></td>
<td>PUSH TOP / FROM BOTTOM</td>
<td>下から上へ押し出し</td>
<td>40</td>
</tr>
<tr>
<td></td>
<td></td>
<td>PUSH BOTTOM / FROM TOP</td>
<td>上から下へ押し出し</td>
<td>41</td>
</tr>
<tr>
<td></td>
<td></td>
<td>PUSH LEFT / PULL RIGHT</td>
<td>右から左へ畳み交差</td>
<td>42</td>
</tr>
<tr>
<td></td>
<td></td>
<td>PUSH RIGHT / PULL LEFT</td>
<td>左から右へ畳み交差</td>
<td>43</td>
</tr>
<tr>
<td></td>
<td></td>
<td>PUSH TOP / PULL BOTTOM</td>
<td>下から上へ畳み交差</td>
<td>44</td>
</tr>
<tr>
<td></td>
<td></td>
<td>PUSH BOTTOM / PULL TOP</td>
<td>上から下へ畳み交差</td>
<td>45</td>
</tr>
<tr>
<td></td>
<td>FOLD / UNFOLD</td>
<td>FOLD LEFT / FROM RIGHT</td>
<td>右から左へ立体回転</td>
<td>46</td>
</tr>
<tr>
<td></td>
<td></td>
<td>FOLD RIGHT / FROM LEFT</td>
<td>左から右へ立体回転</td>
<td>47</td>
</tr>
<tr>
<td></td>
<td></td>
<td>FOLD TOP / FROM BOTTOM</td>
<td>下から上へ立体回転</td>
<td>48</td>
</tr>
<tr>
<td></td>
<td></td>
<td>FOLD BOTTOM / FROM TOP</td>
<td>上から下へ立体回転</td>
<td>49</td>
</tr>
<tr>
<td></td>
<td></td>
<td>MOVE TO RIGHT / UNFOLD LEFT</td>
<td>右から左へ立体回転</td>
<td>50</td>
</tr>
<tr>
<td></td>
<td></td>
<td>MOVE TO LEFT / UNFOLD RIGHT</td>
<td>左から右へ立体回転</td>
<td>51</td>
</tr>
<tr>
<td></td>
<td></td>
<td>MOVE TO BOTTOM / UNFOLD TOP</td>
<td>下から上へ立体回転</td>
<td>52</td>
</tr>
<tr>
<td></td>
<td></td>
<td>MOVE TO TOP / UNFOLD BOTTOM</td>
<td>上から下へ立体回転</td>
<td>53</td>
</tr>
<tr>
<td></td>
<td>ROOM</td>
<td>ROOM TO LEFT</td>
<td>右から左へ立体内側回転</td>
<td>54</td>
</tr>
<tr>
<td></td>
<td></td>
<td>ROOM TO RIGHT</td>
<td>左から右へ立体内側回転</td>
<td>55</td>
</tr>
<tr>
<td></td>
<td></td>
<td>ROOM TO TOP</td>
<td>下から上へ立体内側回転</td>
<td>56</td>
</tr>
<tr>
<td></td>
<td></td>
<td>ROOM TO BOTTOM</td>
<td>上から下へ立体内側回転</td>
<td>57</td>
</tr>
<tr>
<td></td>
<td>CUBE</td>
<td>CUBE TO LEFT</td>
<td>右から左へ3D回転</td>
<td>58</td>
</tr>
<tr>
<td></td>
<td></td>
<td>CUBE TO RIGHT</td>
<td>左から右へ3D回転</td>
<td>59</td>
</tr>
<tr>
<td></td>
<td></td>
<td>CUBE TO TOP</td>
<td>下から上へ3D回転</td>
<td>60</td>
</tr>
<tr>
<td></td>
<td></td>
<td>CUBE TO BOTTOM</td>
<td>上から下へ3D回転</td>
<td>61</td>
</tr>
<tr>
<td></td>
<td>CAROUSEL</td>
<td>CAROUSEL TO LEFT</td>
<td>右から左へ4次元回転</td>
<td>62</td>
</tr>
<tr>
<td></td>
<td></td>
<td>CAROUSEL TO RIGHT</td>
<td>左から右へ4次元回転</td>
<td>63</td>
</tr>
<tr>
<td></td>
<td></td>
<td>CAROUSEL TO TOP</td>
<td>下から上へ4次元回転</td>
<td>64</td>
</tr>
<tr>
<td></td>
<td></td>
<td>CAROUSEL TO BOTTOM</td>
<td>上から下へ4次元回転</td>
<td>65</td>
</tr>
<tr>
<td></td>
<td>SIDES</td>
<td></td>
<td>右から左に扇回転</td>
<td>66</td>
</tr>
<tr>
<td>SLIDE</td>
<td></td>
<td></td>
<td>右から左にスライド</td>
<td>67</td>
</tr>
</tbody>
</table>

67種類ものエフェクトが使えるjQueryプラグイン PAGE TRANSITIONS

CSS3 + jQueryによる、グラデーションのホバー効果

オブジェクトを良い感じでぼかしてくれるjQueryプラグイン Vague.js

<p>スマホ対応などでCSS3を使う機会が増えているが</p>
<p>理論的には理解していてもグラデーションなどはソースだけではなかなかうまくできない。</p>
<p>視覚的に微調整できる便利なツールのメモ。</p>
<p>&nbsp;</p>
<h3>css3で単純なグラデーションを生成してくれるサービス</h4>
<p><a href="http://codologic.com/page/sites/all/files/gradx/demo.html" target="_blank">http://codologic.com/page/sites/all/files/gradx/demo.html</a></p>
<p>jQueryのプラグインとしても提供されており、無いと思うがユーザーにグラデーション方法を入力させることも可能。</p>
<p>サイトの装飾部分に使える感じ。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/06/3.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2430" alt="3" src="/uploads-archive/2013/06/3.png" width="869" height="637" srcset="/uploads-archive/2013/06/3.png 869w, /uploads-archive/2013/06/3-300x220.png 300w, /uploads-archive/2013/06/3-768x563.png 768w, /uploads-archive/2013/06/3-228x167.png 228w" sizes="(max-width: 869px) 100vw, 869px" /></a></p>
<p>Linerの例</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/06/1.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2418" alt="1" src="/uploads-archive/2013/06/1.png" width="869" height="637" srcset="/uploads-archive/2013/06/1.png 869w, /uploads-archive/2013/06/1-300x220.png 300w, /uploads-archive/2013/06/1-768x563.png 768w, /uploads-archive/2013/06/1-228x167.png 228w" sizes="(max-width: 869px) 100vw, 869px" /></a></p>
<p>Circleの例</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/06/2.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2416" alt="2" src="/uploads-archive/2013/06/2.png" width="869" height="637" srcset="/uploads-archive/2013/06/2.png 869w, /uploads-archive/2013/06/2-300x220.png 300w, /uploads-archive/2013/06/2-768x563.png 768w, /uploads-archive/2013/06/2-228x167.png 228w" sizes="(max-width: 869px) 100vw, 869px" /></a></p>
<p>Ellipseの例</p>
<p>&nbsp;</p>
<p>どれもかなり簡単にできるし、どのプロパティがどうゆう動きをするか勉強にもなる。</p>
<p>&nbsp;</p>
<h3>css3でボタンを生成してくれるサービス</h4>
<p><a href="http://css-button-generator.com/" target="_blank">http://css-button-generator.com/<a href="/uploads-archive/2013/06/4.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2417" alt="4" src="/uploads-archive/2013/06/4.png" width="1239" height="603" srcset="/uploads-archive/2013/06/4.png 1239w, /uploads-archive/2013/06/4-768x374.png 768w, /uploads-archive/2013/06/4-228x111.png 228w, /uploads-archive/2013/06/4-300x146.png 300w, /uploads-archive/2013/06/4-1024x498.png 1024w" sizes="(max-width: 1239px) 100vw, 1239px" /></a></a></p>
<p>&nbsp;</p>
<p>角丸やシャドウなど、細かく設定できるので便利。</p>
<p>&nbsp;</p>
<p>ソースから見た目はなんとなくイメージできれば良いと思うので</p>
<p>詳細はこのようなツールを使ったほうがよさそうだ。</p>


便利。css3グラデーション生成ツール2つ

多機能なスライダー sly.js

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #jQuery

2013/09/11

2013/09/11

2013/09/11

2013/09/05

2013/09/05

2013/08/28

2013/08/28

2013/08/07

2013/08/07

2013/08/07

2013/07/31

2013/07/30

2013/07/17

2013/07/16

2013/07/10

2013/07/03

2013/06/13

2013/06/06