paris1204の日記

可視範囲に入った時にカーテンとスライドの開始

参考にしたページ
www.dot-st.com

上記ページのスクロールしたらカーテンのようなものが右側にスライドして通過後に画像が見え始めるような動きを組んでみました。
scroll_addclass.jsで視界に入った時にactiveというクラスをつけて、それが付いた後にカーテンが左から右に出てくるようにしました。(cssで)
画像の切り替えはeffect.jsを使用しています。

html**

<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>スクロールして見えた時にカーテンのような動きをつける</title>
	<link rel="stylesheet" href="css/style.css">
	<script src="js/jquery.js"></script>
	<script src="js/scroll_addclass.js"></script>
	<script src="js/effect.js"></script>
<!-- 
	参考サイト
	http://www.dot-st.com/cp/jeanasis/media_fashion?JSmain=1
	http://cubic-bezier.com/#.01,.98,.82,1.32
	http://www.htmq.com/css3/transform-origin.shtml
	http://uxmilk.jp/44962
	https://takuo4649design.com/weblog/note/archives/2182
	 -->
</head>
<body>
	
<div id="curtain">
	<ul class="cnts">
	<!-- .style01 -->
		<li class="each_area style01">
			<div class="green slide left">
				<ul>
				<li class="fade"><a href=""><img src="img/green01.jpg" alt=""></a></li>
				<li><a href=""><img src="img/green01_2.jpg" alt=""></a></li>
				<li><a href=""><img src="img/green01_3.jpg" alt=""></a></li>
				<li><a href=""><img src="img/green01_4.jpg" alt=""></a></li>
				</ul>
			</div><!-- .green -->
			

			<div class="green slide right">
				<ul>
				<li class="fade"><a href=""><img src="img/green02.jpg" alt=""></a></li>
				<li><a href=""><img src="img/green02_2.jpg" alt=""></a></li>
				<li><a href=""><img src="img/green02_3.jpg" alt=""></a></li>
				<li><a href=""><img src="img/green02_4.jpg" alt=""></a></li>
				</ul>
			</div><!-- .green -->
		</li><!-- .each_area -->

	<!-- .style02 -->
		<li class="each_area style02">
			<div class="orange slide left">
				<ul>
				<li class="fade"><a href=""><img src="img/orange01.jpg" alt=""></a></li>
				<li><a href=""><img src="img/orange01_2.jpg" alt=""></a></li>
				<li><a href=""><img src="img/orange01_3.jpg" alt=""></a></li>
				<li><a href=""><img src="img/orange01_4.jpg" alt=""></a></li>
				</ul>
			</div><!-- .orange -->
			

			<div class="orange slide right">
				<ul>
				<li class="fade"><a href=""><img src="img/orange01.jpg" alt=""></a></li>
				<li><a href=""><img src="img/orange01_2.jpg" alt=""></a></li>
				<li><a href=""><img src="img/orange01_3.jpg" alt=""></a></li>
				<li><a href=""><img src="img/orange01_4.jpg" alt=""></a></li>
				</ul>
			</div><!-- .orange -->
		</li><!-- .each_area -->
	</ul>
</div><!-- ＃curtain -->

</body>
</html>

CSS**

*{padding:0;
margin:0;}


ul,li{list-style: none;}


#curtain{width:80%;
margin:500px auto;}

#curtain a{transition:0.2s;}
#curtain a:hover{opacity:0.7;}
#curtain img{width:100%;}

/*ul.cnts*/
#curtain ul.cnts{letter-spacing: -0.40em;}
#curtain ul.cnts li.each_area{padding-bottom: 100px;}
#curtain ul.cnts li.each_area .slide{width:45%;
display: inline-block;
position: relative;
height: 0;
padding-bottom:69.3%;
overflow: hidden;
transition-delay:1s;}
#curtain ul.cnts li.each_area .slide > ul{opacity:0;}
#curtain ul.cnts li.each_area.active .slide > ul{opacity:1.0;
transition: 0; 
transition-delay:.5s;}
#curtain ul.cnts li.each_area .slide.left{margin-right: 10%;}
#curtain ul.cnts li.each_area .slide.green::before{background-color:#ff936d;}
#curtain ul.cnts li.each_area .slide.orange::before{background-color:#92e5a1;}


/*.left*/
#curtain ul.cnts li.each_area .slide.left::before {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transform-origin: left;
/*  transition: all .3s;*/
  content: "";
}
#curtain ul.cnts li.each_area.active .slide.left::before {
  transition: width .5s cubic-bezier(.21,1.06,.93,.96) ,left .7s cubic-bezier(.21,1.06,.93,.96) .5s;
  left: 100%;
  width: 100%;
}

/*.right*/
#curtain ul.cnts li.each_area .slide.right::before {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transform-origin: left;
/*  transition: all .3s;*/
  content: "";}
#curtain ul.cnts li.each_area.active .slide.right::before {
  transition: width .5s cubic-bezier(.21,1.06,.93,.96) ,left .7s cubic-bezier(.21,1.06,.93,.96) .7s;
  /*transition-delay:.5s;*/
  left: 100%;
  width: 100%;}




#curtain ul.cnts li.each_area .slide li{opacity:0;
position: absolute;
top:0;
left:0;}
#curtain ul.cnts li.each_area .slide li.fade{opacity:1.0;}

JS**

$(document).ready(function(e) {
  $('#curtain ul.cnts li.each_area').scrollAddClass({
    trigger: 'active'
  });

  $('#curtain ul.cnts li.each_area').bind('active',function(){
    start(this);
  });

  function start(elm){
    setInterval(function(){
      var sel = $('.slide ul li',elm).siblings('.fade');
      $('.slide ul li',elm).removeClass('fade');
      if( sel.next().length ){
        sel.next().addClass('fade');
      }else{
      $('.slide ul li:first-child',elm).addClass('fade');
      }
    },2300);

  }



});

★★★★★★★★ スライドにbxsliderを使って開始時期と切り替わりスピードを調整した　★★★★★★★★

html**

今回画像の切り替えをbxsliderで行ったため、カーテンが通りすぎた後の１枚目のスライドがfadeInのようにできなかった。
その対策として、スライド下に背景を白色にしたdivを入れてfadeOutで消している。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>スクロールして見えた時にカーテンのような動きをつける</title>
	<link rel="stylesheet" href="css/bxslider.css">
	<link rel="stylesheet" href="css/style.css">
	<script src="js/jquery1.11.3.js"></script>
	<script src="js/scroll_addclass.js"></script>
	<script src="js/bxslider.js"></script>
	<script src="js/effect.js"></script>

</head>
<body>
	
<div id="curtain">
	<ul class="cnts">
	<!-- .style01 -->
		<li class="each_area style01">
			<div class="green slide left">
				<ul>
				<li class="fade"><a href=""><img src="img/green01.jpg" alt=""></a></li>
				<li><a href=""><img src="img/green01_2.jpg" alt=""></a></li>
				<li><a href=""><img src="img/green01_3.jpg" alt=""></a></li>
				<li><a href=""><img src="img/green01_4.jpg" alt=""></a></li>
				</ul>
				<div class="upper"></div>
			</div><!-- .green -->
			

			<div class="green slide right">
				<ul>
				<li class="fade"><a href=""><img src="img/green02.jpg" alt=""></a></li>
				<li><a href=""><img src="img/green02_2.jpg" alt=""></a></li>
				<li><a href=""><img src="img/green02_3.jpg" alt=""></a></li>
				<li><a href=""><img src="img/green02_4.jpg" alt=""></a></li>
				</ul>
				<div class="upper"></div>
			</div><!-- .green -->
		</li><!-- .each_area -->

	<!-- .style02 -->
		<li class="each_area style02">
			<div class="orange slide left">
				<ul>
				<li class="fade"><a href=""><img src="img/orange01.jpg" alt=""></a></li>
				<li><a href=""><img src="img/orange01_2.jpg" alt=""></a></li>
				<li><a href=""><img src="img/orange01_3.jpg" alt=""></a></li>
				<li><a href=""><img src="img/orange01_4.jpg" alt=""></a></li>
				</ul>
				<div class="upper"></div>
			</div><!-- .orange -->
			

			<div class="orange slide right">
				<ul>
				<li class="fade"><a href=""><img src="img/orange01.jpg" alt=""></a></li>
				<li><a href=""><img src="img/orange01_2.jpg" alt=""></a></li>
				<li><a href=""><img src="img/orange01_3.jpg" alt=""></a></li>
				<li><a href=""><img src="img/orange01_4.jpg" alt=""></a></li>
				</ul>
				<div class="upper"></div>
			</div><!-- .orange -->
		</li><!-- .each_area -->
	</ul>
</div><!-- ＃curtain -->

</body>
</html>

CSS**

*{padding:0;
margin:0;}


ul,li{list-style: none;}


#curtain{width:80%;
margin:500px auto;}

#curtain a{transition:0.2s;}
#curtain a:hover{opacity:0.7;}
#curtain img{width:100%;}

/*ul.cnts*/
#curtain ul.cnts{letter-spacing: -0.40em;}
#curtain ul.cnts li.each_area{padding-bottom: 100px;}
#curtain ul.cnts li.each_area .slide{width:45%;
display: inline-block;
position: relative;
height: 0;
padding-bottom:69.3%;
overflow: hidden;
transition-delay:1s;}
#curtain ul.cnts li.each_area .slide > ul{opacity:0;}
#curtain ul.cnts li.each_area .slide .upper{
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background:#fff;
}


#curtain ul.cnts li.each_area .slide.left{margin-right: 10%;}
#curtain ul.cnts li.each_area .slide.green::before{background-color:#ff936d;}
#curtain ul.cnts li.each_area .slide.orange::before{background-color:#92e5a1;}


/*.left*/
#curtain ul.cnts li.each_area .slide.left::before {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transform-origin: left;
/*  transition: all .3s;*/
  content: "";
}
#curtain ul.cnts li.each_area.active .slide.left::before {
  transition: width .5s cubic-bezier(.21,1.06,.93,.96) ,left .7s cubic-bezier(.21,1.06,.93,.96) .5s;
  left: 100%;
  width: 100%;
}

/*.right*/
#curtain ul.cnts li.each_area .slide.right::before {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transform-origin: left;
/*  transition: all .3s;*/
  content: "";}
#curtain ul.cnts li.each_area.active .slide.right::before {
  transition: width .5s cubic-bezier(.21,1.06,.93,.96) ,left .7s cubic-bezier(.21,1.06,.93,.96) .7s;
  /*transition-delay:.5s;*/
  left: 100%;
  width: 100%;}

JS**

$(document).ready(function(e) {
  $('#curtain ul.cnts li.each_area').scrollAddClass({
    trigger: 'active'
  });

  $('#curtain ul.cnts li.each_area').bind('active',function(){
    start(this);
  });


  function start(elm){
    setTimeout(function(){
    $('.slide.left ul',elm).bxSlider({
         auto:true,
         startSlide: 0,
         speed: 1000,
         pause:2000,
         pager:false,
         controls: false,
        mode: 'fade',
        
     });  
    },1500);

    setTimeout(function(){
    $('.slide.right ul',elm).bxSlider({
         auto:true,
         startSlide: 0,
         speed: 1000,
         pause:2000,
         pager:false,
         controls: false,
        mode: 'fade',
        
     });  
    },3000);

    setTimeout(function(){
    $('.slide.left .upper',elm).fadeOut(2000);
    },1400);

    setTimeout(function(){
    $('.slide.right .upper',elm).fadeOut(2000);
    },3000);


  }

});