カルーセル・スライダーになる万能jQueryプラグイン「carouFredSel」

jQueryで簡単にグラフを作る！

jQuery 3D画像スライドエフェクト

ナビゲーションを上部に隠すjQueryを実装してみました

jQueryでアコーディオンを横向きに開閉する。
HTMLを用意する
&lt;div&gt; 
　&lt;dl&gt; 
　　&lt;dt id=&#8221;step1&#8243;&gt;&lt;span&gt;Step.1&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　　&lt;dt id=&#8221;step2&#8243;&gt;&lt;span&gt;Step.2&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　　&lt;dt id=&#8221;step3&#8243;&gt;&lt;span&gt;Step.3&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　&lt;/dl&gt; 
 &lt;/div&gt;
&nbsp;
CSSを用意する
body{ 
 background:#252422; 
 } 
 div{ 
 width:800px; 
 height:300px; 
 margin:50px auto; 
 overflow:hidden; 
 } 
 dl{ 
 width:900px; 
 height:300px; 
 } 
 dt{ 
 width:35px; 
 height:300px; 
 float:left; 
 } 
 dt span{ 
 display:block; 
 width:100%; 
 height:100%; 
 text-indent:-9999px; 
 } 
 dt span.over{ 
 cursor:pointer; 
 } 
 dt span.selected{ 
 cursor:default; 
 } 
 dt#step1 span{ 
 background:url(&#8220;images/background-1.jpg&#8221;); 
 } 
 dt#step1 span.over{ 
 background:url(&#8220;images/background-1-over.jpg&#8221;); 
 } 
 dt#step1 span.selected{ 
 background:url(&#8220;images/background-1-selected.jpg&#8221;); 
 } 
 dt#step2 span{ 
 background:url(&#8220;images/background-2.jpg&#8221;); 
 } 
 dt#step2 span.over{ 
 background:url(&#8220;images/background-2-over.jpg&#8221;); 
 } 
 dt#step2 span.selected{ 
 background:url(&#8220;images/background-2-selected.jpg&#8221;); 
 } 
 dt#step3 span{ 
 background:url(&#8220;images/background-3.jpg&#8221;); 
 } 
 dt#step3 span.over{ 
 background:url(&#8220;images/background-3-over.jpg&#8221;); 
 } 
 dt#step3 span.selected{ 
 background:url(&#8220;images/background-3-selected.jpg&#8221;); 
 } 
 dd{ 
 margin:0; 
 width:695px; 
 height:300px; 
 float:left; 
 background:#D4D0C8; 
 overflow:hidden; 
 } 
 dd p{ 
 width:655px; 
 text-indent:1em; 
 padding:20px; 
 }
&nbsp;
jQueryを用意する
$(function(){ 
        $(&#8220;dd:not(:first)&#8221;).css(&#8220;width&#8221;,&#8221;0px&#8221;); 
        $(&#8220;dt:first span&#8221;).addClass(&#8220;selected&#8221;); 
        $(&#8220;dl dt&#8221;).click(function(){ 
                 if($(&#8220;+dd&#8221;,this).css(&#8220;width&#8221;)==&#8221;0px&#8221;){ 
                 $(&#8220;dt:has(.selected) +dd&#8221;).animate({&#8220;width&#8221;:&#8221;0px&#8221;}); 
                 $(&#8220;+dd&#8221;,this).animate({&#8220;width&#8221;:&#8221;695px&#8221;}); 
                 $(&#8220;dt span&#8221;).removeClass(&#8220;selected&#8221;); 
                 $(&#8220;span&#8221;,this).addClass(&#8220;selected&#8221;); 
                 } 
         }).mouseover(function(){ 
          $(&#8220;span&#8221;,this).addClass(&#8220;over&#8221;); 
         }).mouseout(function(){ 
          $(&#8220;span&#8221;,this).removeClass(&#8220;over&#8221;); 
         }); 
 }); 
<a href="http://poe.ud-ac.com/JavaScript_SelfStudy/other/sample2/samp6.html" target="_blank">DEMOはコチラ</a>
「説明」
①　 $(&#8220;dd:not(:first)&#8221;).css(&#8220;width&#8221;,&#8221;0px&#8221;);
初期状表示態の設定では、１番目の以外のパネル(dd要素)のwidthを０pxに変更します。
②　$(&#8220;dt:first span&#8221;).addClass(&#8220;selected&#8221;);
１番目のdt要素に対してclass属性「selected」を追加し、展開中のラベルスタイルに
設定します。
③　if($(&#8220;+dd&#8221;,this).css(&#8220;width&#8221;)==&#8221;0px&#8221;){
if分で、クリックされたラベルに対応するパネル(dd要素）の横幅が0の場合の処理を
記述します。
④　 $(&#8220;dt:has(.selected) +dd&#8221;).animate({&#8220;width&#8221;:&#8221;0px&#8221;});
ラベルがクリックされたら、class属性が「selected」の要素を含むdt要素の次に登場する
dd要素の幅(width)を0に変更します。幅の変更には、任意のCSSプロパティの値を 
アニメーション付きで変化させるanimate()を使います。これで展開中のパネルが閉じます。
⑤　 $(&#8220;+dd&#8221;,this).animate({&#8220;width&#8221;:&#8221;695px&#8221;});
同様に、クリックされた要素の次に登場するdd要素の幅(width)をanimate()で695pxに変更します。
これで、クリックされたラベルに対応するパネルが開きます。
⑥　  $(&#8220;dt span&#8221;).removeClass(&#8220;selected&#8221;); 
$(&#8220;span&#8221;,this).addClass(&#8220;selected&#8221;);
クリックされたラベルを選択状態にするため、すべてのspan要素からclass属性「selected」
を取り除き、クリックされたdt要素内のspan要素にclass属性「selected」を再設定します。
⑦　}).mouseover(function(){ 
$(&#8220;span&#8221;,this).addClass(&#8220;over&#8221;); 
}).mouseout(function(){ 
$(&#8220;span&#8221;,this).removeClass(&#8220;over&#8221;); 
});
最後にmouseover/mouseoutイベントでロールオーバーの処理を設定したら完成です。

アコーディオンを横向きに開閉する

HTML5のSVG + jQueryで画像の拡大縮小

写真を自動的に加工してくれるjQuery「vintage.js」

流行りのスクロール効果を自作してみました。

フリックでの操作をjQueryで組む

jQueryで歩くアニメーションに挑戦

フルスクリーンのコンテンツイメージスライダーのjQueryプラグイン

Pathのアプリのメニューぽい動きをjQueryで作ってみる2

画像やコンテンツを左右にスライド、スクロールするjQuery

<a href="https://path.com/">https://path.com/</a>
こちらのアプリのメニューの動きが心地いいので、
jQueryのプラグインなどを使って再現に挑戦しました。
<a href="https://sterfield.co.jp/demo/ninomiya/02/demo1.html" target="_blank" class="demo">demo</a>
&nbsp;
イージングを、<a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jquery.easing</a>のeaseOutBackで。
回転を、<a href="http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html" target="_blank">jquery-animate-css-rotate-scale.js</a>を使ってみました。
&nbsp;
実際は、回転させてから動くようですが、
今回は逆の動きになってしまいました。
&nbsp;
また次回、近い動きを目指してみます。

Pathのアプリのメニューぽい動きをjQueryで作ってみる1

最近縦長のサイトが増えてきており、
体外そういうサイトは、ページ内リンクのスクロールに
アニメーション効果がされていることが多いかと思います。
&nbsp;
そのアニメーション効果は基本的には変わらないので、
なにか面白い動きができないものかと思い、
jQueryのプラグインの<a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jQuery Easing Plugin</a> のイージング効果を利用しよう！
と思い、いろいろと試してみました。
&nbsp;
その結果、
本家のサイトにも試せるものはありますが、
どれかひとつだけしか試せないのもなんなので、選べるようにしました。
スピードも調節できます。
&nbsp;
デモは下記リンクから
<a class="demo" href="/demo/abe/10/" target="_blank">DEMO</a>
&nbsp;
違いがわからない動きが多いですね。。。
ものによっては、ものすごい効果のもありますね?
&nbsp;
<h4>イージング効果を付ける方法を説明します。</h6>


		<div id="crayon-64953fd57d38f771442295" 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;">
			<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>XHTML</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;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery.easing.1.3.js"&gt;&lt;/script&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-64953fd57d38f771442295-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d38f771442295-2">2</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-64953fd57d38f771442295-1">&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d38f771442295-2">&lt;script src="js/jquery.easing.1.3.js"&gt;&lt;/script&gt;</div></div></td>
					</tr>
				</table>
			</div>
		</div>


&nbsp;
基本的には、jquery.easing.1.3.jsを読み込めばOKです。
（jqueryはもちろん必要です。）
&nbsp;
あとは、アニメーションスクロールのスクリプトのanimateを以下のように設定すればOKです。


		<div id="crayon-64953fd57d393672114889" 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;">
			<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>JavaScript</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;">
$('a[href^=#]').click(function() {
 var speed = 1000; 
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 var position = target.offset().top; 
 $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, { duration: speed, easing: 'ここに効果名を入れる' });
 return false;
 });</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-64953fd57d393672114889-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d393672114889-2">2</div><div class="crayon-num" data-line="crayon-64953fd57d393672114889-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d393672114889-4">4</div><div class="crayon-num" data-line="crayon-64953fd57d393672114889-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d393672114889-6">6</div><div class="crayon-num" data-line="crayon-64953fd57d393672114889-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d393672114889-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-64953fd57d393672114889-1">$('a[href^=#]').click(function() {</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var speed = 1000;&nbsp;&nbsp;</div><div class="crayon-line" id="crayon-64953fd57d393672114889-3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var href= $(this).attr("href");</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var target = $(href == "#" || href == "" ? 'html' : href);</div><div class="crayon-line" id="crayon-64953fd57d393672114889-5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var position = target.offset().top; </div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, { duration: speed, easing: 'ここに効果名を入れる' });</div><div class="crayon-line" id="crayon-64953fd57d393672114889-7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-8">&nbsp;&nbsp; });</div></div></td>
					</tr>
				</table>
			</div>
		</div>


&nbsp;
なにかおもしろい動きをつけるとちょっと印象には残りますよね。
これからどんどん動きのあるサイトは増えてくるとおもいますので、
その中でどれだけ「ユーザーの記憶に残る」ことができるか、
そのような工夫をしていかなければと思う今日この頃です。

jQueryのイージング効果をスクロールでいろいろ試せるデモを作ってみた

ECサイトで使えそうな写真をズームできるjQuery &#8211; Cloud Zoom &#8211;

スクロールに応じてコンテンツにエフェクト効果をつける　- scrolldeck &#8211;

スマートフォン対応の画像スライダー「flexslider」

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #jQuery

2012/11/29

2012/11/29

2012/11/22

2012/11/08

2012/11/07

2012/11/01

2012/10/18

2012/10/11

2012/10/04

2012/09/27

2012/09/26

2012/09/13

2012/08/30

2012/08/30

2012/08/09

2012/07/18

2012/07/12

2012/06/07