JavaScriptの配列をカルーセルなどで使う際のループの解釈の仕方

JavaScriptでカルーセルなどを作る場合、単に「次へ」「前へ」の実装のときは特に難しくないのですが、

カルーセルの下に何番目の画像かを表すためのボタンなどがある場合、そこを押すとその画像が出てくるようになっている。

見た目は至って普通に見える機能のひとつですが、実際作るとなると、格納した配列をfor文のループで決めた回数まわして、その後あとから配列を足す・・・?

といった複雑な計算をしないといけないのが何とも言えない気分になったので、少し簡略化できる方法を簡単な図解とともにメモ。

下記の様に5つのボールがある想定で考えてみる。

Illu 01

 

通常、2を先頭にもってくる場合は、先頭の1を格納して最後につけるような操作を行う。

Illu 02

 

4番目を先頭にもってこようと考えると、上の処理を3回繰り返すと再現できるものの、カルーセルなどでは実用的な方法ではない。

Illu 03

 

そこでできる限り簡単に4番目を先頭にもってくるために、配列の定義を少し広げ、同じ配列が2つ連なった配列を参照して、

4番目を先頭にもってくる→4番目からN番目(配列のサイズ/2)までを取得するという捉え方を図式にしたのが下記。

Illu 04

 

実際にJavaScriptでこの考え方をかたちにする際は配列を2つ連なった状態で格納し、

その格納した配列に対してArray.sliceなどで必要な項目を取得するような方法をとります。

jQueryのスムーズスクロールであえて#をつける方法

パララックスなサイトなどでよく使われるページ内リンクをスクロールさせて移動するスクリプト。

見た目がよく、#もつかなくてスマートなのですが、複数のコンテンツを1ページで見せている場合、特定のコンテンツだけを見せたいときにそのアドレスをコピーしても#がついていないため、リンクをクリックすると常にトップが表示されてしまうことがあり、これがネックになることがあるのでそれを解決するための方法。

$(document).ready(function(){

 $(“a[href^=#]”).on(“click”,function () {
  var c = $(this).attr(“href”);
  var d = $(c).offset().top;
  setTimeout(function(){
   $(‘html,body’).animate({ scrollTop: d }, 1500,”easeOutCubic”);
   setTimeout(function(){//アニメーションが終える時間に合わせて以下3行を追加
    location.href=c;
   },1500);
  },100);
  return false;
 });

});

上記のようなかたちで通常のスムーズなスクロールを実行した直後にターゲット先にリンクさせると不自然な動きをさせずに#を付加したアドレスを維持できます。

レスポンシブなレイアウトでテーブルの縦横を入れ替えたときにjQueryでセルの高さをそろえる方法

レスポンシブWebデザインのテーブルに関するTipsでthead要素を左に揃えて縦横を入れ替え、横長、オーバーフローにして見せる方法があるのですが、それをそのままやってしまうと、セルの内容によって高さがちがうときに横の列(行)が揃ってくれない落とし穴が・・・。

デモやサンプルなどではセルの中で改行したりといったことをしていないのできれいに見せているのですが、実際には高さが揃わずチグハグになり、うまくいかないので、jQueryで高さを揃えるスクリプトを下記のような感じで作り、resizeとload時に実行して揃えます。

function tableset(){
  $(“table”).each(function(){//テーブルを探して実行
    var n = $(“tr:nth-child(1) th”,this).size();//テーブルのヘッダーをみてセルの列数を取得
    for (var i=1 ; i<=n ; i++){
      var tarray= new Array();
      var tselector = $(“th:nth-child(“+i+”),td:nth-child(“+i+”)”,this);
      tselector.each(function(){
         $(this).attr({“data-rows”:i});
         var h = $(this).height();
         tarray.push(h);//セルの高さを配列に格納
      });
      tarray.sort(//格納した値を低い順にソート(その後、逆にする)
         function(a,b){
            if( a < b ) return -1;
            if( a > b ) return 1;
               return 0;
          }
      );
      var max = tarray.reverse();
      $(“th:nth-child(“+i+”),td:nth-child(“+i+”)”,this).height(max[0]);//一番高いものに合わせる
      }
   });
}

線の幅を揃えるなどほかにもいろいろ処理は必要になってくると思いますが、この処理一つでレスポンシブでのテーブルの課題はかなり減っていくと思います。

また、レスポンシブにしたときのみセルの中の改行を使いたくない場合は<br>タグにクラスをつけて、display:noneにするとあっさり改行しないように出来ます。

jQueryとパララックス効果を応用して遠近感のある背景を作る方法

 ページ全体をパララックスにしようとすると大変ですが、背景だけと行った使い方をする際に、遠近感を簡単にだすことが出来るのでメモ。

CSSで背景を2パターン、position:fixed,top:0,right:0,bottom:0,left:0,みたいなかたちで用意して、z-indexをそれぞれ設定。

その設定した背景をjQueryでスクロールに応じて移動させるという方法。

このページではパターンのうちの一つを逆走するように設定したストライプなので万華鏡のような効果が出ています。

サンプルコード

//ファンクションで設置するコード

function bg(){
	var s = document.body.scrollTop;//スクロール値を取得
	var bg1 = s*0.1;//動く量の設定
	var bg2 = -s*0.05;
$("#background").css({backgroundPositionY:bg1}); $("#background2").css({backgroundPositionY:bg2}); } //上のコードを実行するためのコード $(document).ready(function(){ $(window).scroll(function () { bg(); }); });

 背景を動かすだけであればほんの数行のコードで出来てしまうので、ぜひ使ってみてください。

jQueryでスクロールすると出てくるフッターを実装

cdbk.net CREATIVES.のサイトはコピーライトがヘッダー付近にあり、フッターリンクがない状態だったのでフッターリンクを追加しました。

ただつけても、利便性がよくないのでアクセスしやすいよう、一定の高さまでスクロールすると出るようにjQueryで制御しています。

大まかな仕組みは、

現在のHTML,BODYのスクロール位置を取得、一定位置以上の場合にフッターを表示するアニメーションを実行、これを繰り返すスクリプトを入れています。

フッター自体はCSSでposition:fixed;bottom:-〜指定を指定して、フッター要素が下に隠れるような位置で配置。

スクリプトでbottom:0へ移動させるような方法で作っています。

簡素ですが、下記がJavaScriptのサンプル(別途jQuery本体が必要)

function onscrolls(){
	setTimeout(function(){
		var a =Number($('html, body').scrollTop());
		if(100 < a){
		$("#footerbar").stop().animate({bottom:0},500);
		}else{
		$("#footerbar").stop().animate({bottom:-100},500);
		}
		setTimeout(function(){
			onscrolls();
		},300);
	},300);
}
$(document).ready(function(){
	onscrolls();
});

このような形のものを本サイトにも入れております。

雪を降らせるjQueryプラグイン「snowfall」で上下逆に降らせる方法

Cap cdbk2014

 

jQueryで雪が舞うような効果を使いたいとき便利なLoktar氏の「jQuery Snowfall Plugin」。

様々な設定が出来るのですが、cdbk.net CREATIVESのサイトで現状使っているような下から上にあがるようなエフェクトにしたいときの方法があるので紹介します。

最新のバージョン1.4、snowfall.jquery.jsであれば91行目の

this.element.style.top = this.y + 'px';

this.element.style.top =($(window).height()-100)- this.y + "px";

といったように表示したい高さで引き算(+調整分の高さ)で実現できます。

フレークの部分を画像などに置き換えたりすれば水の中で泡が上に上がるような表現や、風船があがるようなエフェクトも作りやすいと思います。

WordPressの一つのテーマで複数のデザインを使う方法

Issue2013sample

ひとつのWordPressで複数のデザインを使いたいとき、複数のテーマを同時には使えないので小手先ではあるものの、ひとつのテーマ内で複数のデザインを扱うことでページによって使い分けることができるようになります。

まずはheader.phpなどを複数用意

ページのテンプレート内にある「<?php get_header(); ?>」の記述を「<?php get_header(“2”); ?>」など()内に数字を入れることで「header-2.php」といった別のファイルを使えるようにでき、CSSなどを別に用意しておけば、全く違うデザインを共存させることができます。

試しに新しく使う予定のデザインを共存させてみる

年末に切り替え予定の新しいデザインを現在のテーマに追記して、公開したところ。

リニューアルなどでデザインを変えるとき、テストサイト用の場所を確保してデモを行うのも有効なのですが、環境やディレクトリが変わると変更時に作業が増えるので複数のデザインをひとつのテーマ内で共存させ、非公開の状態でページを増やしていくほうが切り替えなどの手間を省けるのでお勧めです。

 

jQueryでよく使うセレクターの活用法

jQueryを使い始めた方等はなかなか0から作るのは難しいと思うので、よく使うもののなかでセレクターの活用法を書き出してみます。

例えば、タブのボタンを切り替えたいとき、押したところをON,その他をOFFにしたい処理をしたいときのセレクターの活用方法は・・・?

サンプル

ボタン01
ボタン02
ボタン03




ボタンを押した際にクラス「on」を付加、その他の並列したボタンのクラス「on」を取るスクリプトの簡単なサンプル。

<style>
<!–
.tab_blog{
display:block;
float:left;
padding:10px;
margin:0px 2px;
background-color:#EEE;
border:1px solid #333;
}
.tab_blog.on{
display:block;
float:left;
padding:10px;
margin:0px 2px;
background-color:#333;
color:#FFF;
}
–>
</style>

<div class=”tab_blog on”>
ボタン01
</div>
<div class=”tab_blog”>
ボタン02
</div>
<div class=”tab_blog”>
ボタン03
</div>
<script>
$(document).ready(function(){
$(“.tab_blog”).on(“click”,function(){
var a = $(this).parent();
$(“.tab_blog”,a).removeClass(“on”);
$(this).addClass(“on”);
});
});
</script>

 

.parent()を使い、押したボタンの要素の一つ上の要素を見て、そこからボタンと同じクラスを選び、「on」のクラスの出し分けを操作するスクリプト。

スマホ(ブラウザ)でanimate()を使った際に出てしまう罫線などの残像対策メモ

スマホサイトでスライダーやカルーセル等を使うとき、可視領域外からオブジェクトがモーションで移動してきた際に罫線等の残像が残ってしまう場合があります。

高スペックなAndroidでは出ず、iPhoneなどでよく出る傾向がある印象なのですが、問題はブラウザのレンダリング時に本来消えるはずの線等の色が消えずに残ってしまうことが原因となります。

一番簡単な対処法は動かした後、残像が残る領域の背景を着色してしまう方法。

背景が白く、その状態で白を入れてもなおらない場合があるのでそういった場合は意図的に#FEFEFEなどといった分かりにくい色を入れてから#FFFFFFを入れる等、あまり違和感のない方法で簡単な記述でやると全体の処理も軽く済みます。