The current article

スライダーの上に、扉が開く動作(animate)を付けるjQuery

クロスフェードのスライダー上に、扉が開く動きを付けるjQueryです。
オンマウスやクリックで開くタイプではなく、読み込めば開くタイプです。
コードはとても簡単・シンプルですので、使える部分があれば参考にしてみてください。

capture

参照サイト-スライド:最も短いコードで実装出来るイメージスライドショー
参照サイト-アニメーション:Crafting an Animated

上記の参照サイトを参考にさせていただききました。
良記事ありがとうございます!

DEMO

デモページ DEMO

デモページを例に説明していきます。
また、スライダー部分についての説明は省略ぎみです。
この記事のHTML・CSS・JSをコピペすれば動くと思いますが、詳しくは参照サイトの「スライド」をご覧ください。

記述例:HTML

<html>
<head>
  ・
  ・
  <link href="style.css" type="text/css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
  <script src="js/animate.js" type="text/javascript"></script>
  ・
  ・
</head>

<body>
  ・
  ・
<div class="slidewrap">
   <div class="cover"><img src="img/cover.png" alt=""></div>
   <div class="left-pos"><img src="img/slide_left.png"></div>  
   <div class="right-pos"><img src="img/slide_right.png"></div>
	  <div class="slide">
      	<div class="in">		  
		  <img src="img/slide01.jpg">
		  <img src="img/slide02.jpg">
          <img src="img/slide03.jpg">
		</div>
	  </div>
</div> 
  ・
  ・
</body>
</html>

5行目で、CSS(後述)
6行目で、jQuery本体
7行目で、実行JSを読み込み(後述)
16行目、丸抜きの画像部分なので、不必要なら削除OK
17行目、左扉画像
18行目、右扉画像
19行目以降スライダー部分
21~23行目、スライダー画像

CSS(style.css)

.slidewrap{ position:relative; margin:0 auto 30px; width:960px; height:450px; overflow:hidden; }
.cover { position:absolute; top:0; left: 0; z-index:100;}
.left-pos{ position:absolute; top:0; left: 260px; z-index:50; }  
.right-pos{ position:absolute; top:0; left: 480px; z-index:50; } 
.slide { position:absolute; top:0; left:0;}
.slide .in { position:relative; width:960px;  }
.slide .in img { position:absolute; left:0; top:0; }

1行目、「.slidewrap」の「position:relative」と「overflow:hidden」は必ず指定
後で述べる「JS」の基準も、このボックスの左上
2行目、カバー画像を付ける場合に記述、「z-index:100;」で重なりを上層に
3行目、左扉の開始位置と重なりを指定
4行目、右扉の開始位置と重なりを指定
両扉は「z-index:50;」で、スライダーとカバー画像の間に配置
5行目以降スライダー部分

JS(animate.js)

$(window).load(function() {
	setTimeout(function() {
		$(".left-pos").animate({left: '-220px' }, {queue:false,duration:2000});
		$(".right-pos").animate({left: '960px' }, {queue:false,duration:2000});	
	},1000); //扉部分

 	$('.in img:gt(0)').hide();
 		setInterval(function() {
			$('.in :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('.in');
	  	}, 4000); //スライダー部分
});

1行目は、全て読み込んでから動作開始
2行目(と5行目)で、読み込んで1秒後に動作開始と指示
3行目、「left-pos」というクラスの付いたボックスを、基準から「left: '-220px'」の場所まで「duration:2000」2秒かけて移動
4行目、「right-pos」というクラスの付いたボックスを、基準から「left: '960px'」の場所まで「duration:2000」2秒かけて移動
「queue:false」とあるのは、同時にアニメーションさせるため
7行目、最初の画像以外を非表示
8行目(と10行目)、1回のフェードイン・アウトのインターバル(10行目に秒数を入れる)
9行目、フェードインとアウトを繰り返し、
「fadeOut」と「fadeIn」のカッコ内はフェードを何秒かけるか
となります。

DEMOページには別バージョンも置いてみました。
気になる所があれば、ソースをご覧いただければと思います。
少し変更すれば、1枚扉やシャッターのような上下の動きにも出来ますし、
スライダー部分は他のスライダーに差し替えても大丈夫と思います・・・
参考になれば良いのですが、適宜ご自分でカスタマイズしてください!
(動いてますが、コード間違っていたらすみません)

以上、「スライダーの上に、扉が開く動作(animate)を付けるjQuery」でした。


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。