UNIRRY

WEBデザインとホロスコープと宇宙のブログ

イメージギャラリーのアニメーション部分を色々つくってみた

galleryanime

イメージギャラリーのアニメーション部分をいろんな動きで無駄につくってみました。

これまでのもの
・サムネイルスライド: サムネイルのスライドに合わせて画像を切り替える
・サムネイルクリック: サムネイル操作つきギャラリー風自動スライダー
・nextとprevボタン追加: サムネが横スライドで大きくなるイメージギャラリー

アニメーションパターン①:スライダーっぽいやつ

メインビジュアルのlistをposition指定せずfloatさせといて、移動させていくスライダーっぽいやつです。

これがサンプル

sam1

追加部分:cssでlistをfloatさせる

#icolist ul {
position: absolute;
top: 0;
left: 0;
width: 5500px; /* 適当値 */
margin: 0;
padding: 0;
}
#icolist li {
float: left;
width: 512px;
height: 340px;
margin: 0;
padding: 0;
list-style: none;
}

追加部分:メインビジュアルの切り替えをnextとprevのふたつ用意する

// next方向のメインビジュアルの切り替え関数
function nowidFadenext(rell) {
  icolist.animate({"left" : "-512px"}, 700, "easeInOutQuart", function(){
    var firimg = $("#icolist ul li:first-child").html();
    $("#icolist ul li:first-child").remove();
    $("#icolist ul").append( "<li>" + firimg + "</li>");
    icolist.css("left" ,"0");
    $("#icolist ul li:first-child").addClass("selected");
  });
}
  
// prev方向のメインビジュアルの切り替え関数
function nowidFadeprev(rell) {
  var lasimg = $("#icolist ul li:last-child").html();
  $("#icolist ul").prepend( "<li>" + lasimg + "</li>");
  icolist.css("left" ,"-512px");
  icolist.animate({"left" : "0"}, 700, "easeInOutQuart", function(){
    $("#icolist ul li").removeClass("selected");
    $("#icolist ul li:last-child").remove();
    $("#icolist ul li:first-child").addClass("selected");
  });
}

アニメーションパターン②:下からでてくるやつ

移動の値をpositionのtopで指定しています。また、これまでのクロスフェードとは違く、後ろのものを移動させずに表示させたままにして、そのほかの動きをつけるので、classの付与を2枚にしています。また、ソース上最後のメインビジュアルまでいって一枚目にもどるときは、最後のメインビジュアルが一枚目より前にきてしまうので別処理で振り分けています。ただしサムネイルクリックでとんでフェードする操作は削除しました(アニメーション④のやり方だったらできます)。

これがサンプル(next方向のみ)

sam2

ソースはちょっとめんどくさいのでやめますです。

アニメーションパターン③:真ん中からでてくるやつ

移動の値をpositionのtopとleft、widthとheightで指定しています。また、こちらもクロスフェードとは違うので、classの付与を2枚にして、一枚目にもどるときは別処理で振り分けています。ただしサムネイルクリックでとんでフェードする操作は削除しました(アニメーション④のやり方だったらできます)。

これがサンプル(prev方向のみ)

sam3

これは絶対使わないな^q^

アニメーションパターン④:軽く上にジャンピング

全般的に変えています。サムネイルをクリックしても、選んだメインビジュアルの後ろに、ひとつ前に選んでいるメインビジュアルが見えている状態で動作させる必要があるので、メインビジュアルの切り替え関数をやりかえて一つにまとめました。

これがサンプル

sam4

ひとつ前に選んでいるメインビジュアルが見えている状態で動作させるようにする

一個前に選んでいるselectedがついたものをprependして、新しく選んだものをappendすることで、サムネイルクリック時でもメインビジュアルの順序が正しくフェードがとべるように組み替えました。サムネイルクリック時の挙動も考えたら、やり方は、今のところこれしか思い浮かばなかったのですが、もっと良いやり方があるかもしれません。

// メインビジュアル切り替え関数
function nowidFade(rell) {
  
  // 現在のselected要素をprependする
  var selectimg = icolist.children("li.selected").html();
  $("#icolist ul").prepend( "<li>" + selectimg + "</li>");
    
  // selectedtoとselectedoutの操作
  icolist.children("li").removeClass("selectedout");
  icolist.children("li:first-child").addClass("selectedout");    
  icolist.children("li").removeClass("selected");  
  if ( rell == 7 ) {
    icolist.children("li").eq(1).addClass("selected");
  } else {
    icolist.children("li").eq(rell).next().addClass("selected");
  }
	  
  // classが付与されている要素のCSS調整
  icolist.children("li.selected").css({"top" : "340px", "opacity":"0"});
  icolist.children("li").not(".selected, .selectedout").css({"opacity" : "0"});
	  
  // 切り替えアニメーション
  icolist.children("li.selectedout").css({"opacity" : "1"});
  icolist.children("li.selected").animate({"top" : "0", "opacity":"1"}, 800, "easeOutBack", function(){
    // prependして表示上後ろにもってきたやつの削除
    $("#icolist ul li:first-child").remove();
  });

}

アニメーションパターン⑤:スライス式フェード

cssを追加して、フェード部分もappendしまくりながらめんどくさいことをしてスライス式のフェードになりました。仕組みだけは理解したけど、cssも簡易化しないと使えないですね。これは8枚のスライスだからまだcssでもいいですが、もっと増えたらjs上でやらなきゃダメですね。もしかしてhtml5とかでこういうエフェクトあったりして、もしくはcss3と組み合わせたらもっと使える感じになるでしょうか。

これがサンプル1(くちゃっと重なりながらフェード)

slidesam1

これがサンプル2(隙間が埋まりながらフェード)

slidesam2

なんで背景いきなり宇宙にしたかっていいますと・・・こんなエフェクト、宇宙系とかすごいアーティスティックとかすごい大きいビジュアルとかじゃないと合わない気がするんです^q^

主要な変更部分のjs

for文でスライス部分を8個分appendしています。その後appendした要素にdelay関数を使って、1秒ごとにフェードさせています。仕組みとかは別記事で書こうかと思います。

// listを新しくappendする、appendした要素にフェードエフェクトを実行したいので変数としてappend
  $("#icolist ul").append( "<li class='selectedto'><div id='slbox'></div></li>"); 
  for ( var i = 1; i < 9; i++ ) {
      eval( "var sl" + i + " = $(\"<div class='sl" + i + "'>" + fadeimg + "</div>\")" ); 
      eval( "$(\"#slbox\").append(sl" + i + ")" );
  }

// appendした要素を1秒毎にフェード、フェード後prependしたselectedoutとselectedtoを削除
  $('#slbox div').each(function(k){
      $(this).css({"width":"100px"});
      $(this).delay(100 * k).animate({"opacity":"1", "width":"64px"}, 1500, "easeOutExpo");
  });
  setTimeout(function(){
      $("#icolist ul li.selectedout").remove();
      $("#icolist ul li.selectedto").remove();
      $("#icolist ul li.selected").css("opacity","1");
  } , 1500);

アニメーションパターン⑥:パネル式フェード

flashサイトとかでよくみるやつです。仕組みは上と同じで、これ使えないな〜と思いつつもとりあえずやってみたかったので、cssを大量に追加してパネルっぽくしてみました。こっちのcssはさらにありえない量なので、これもこのままじゃ使えないです。css部分も計算のロジックを組んでfor文でまわして簡素化しないとダメでしたね。メインビジュアルの縦横を分割したい量で割って、それででた縦横のpxをもとに、cssを順にまわして設定していけばよくて、list内のimgはlistと同じ値を全部マイナス値に書き換えればよいんでしょう。まあ、やってません^^^^^^^^^^

これがサンプル1(パネルが斜めに変わっていくようにしたやつ)

slidesam3

これがサンプル2(パネルがランダムで変わっていくようにしたやつ)

slidesam4

あとですね、ブラウザとかPCによって重いです。
でもこっちのほうがスライス式より使える気がします、なんとなく。ななめならあまり違和感がない気がしました。


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3