#19-我的台北直直落! 文字影片＋滚动视差

有一阵子滑网页案例时，超常看到用SVG配上滚动视差（Parallax）
今天终於要来试试看了！

滚动视差就是让元素动的幅度和滚动的幅度有落差，
主要是侦测scroll的位置和幅度，来控制各个照片们的位置(JS)。

老样子！先看成果！
为你献上这一首～台北直直落
影片 + 文字与城市的图片和scroll幅度不同步的滚动视差

不过画面很暗看不太清楚哈哈

滚动视差＆文字影片

滚动式差
侦测目前滑动的距离，然後让想要滚动视差的元素style
设定不同参数就好啦！
看看～

window.addEventListener('scroll', function(){
  var value= window.scrollY;
  text.style.top = scrollY * 1 + 'px';
  city_1.style.left = scrollY * -1 + 'px';
  city_2.style.right = scrollY * -1 + 'px';
  city_3.style.bottom = scrollY * -0.3 + 'px';

文字影片

用CSS mix blend mode就可以做文字影片的效果！
原理就是让文字是白色，盖过影片，再用mix-blend-mode
将文字颜色就会透过去显示背景～

mix-blend-mode: multiply;

参考
动画滚动式差code参考：

https://www.youtube.com/watch?v=TawH-AqHTXc

文字影片制作参考：

https://www.youtube.com/watch?v=EfkyXRYmFzw&t=595s

上code!

<!---ＨＴＭＬ --->

<div class="hero">
  <div class="text">
    <h1>Taipei</h1>
    <iframe id="existing-iframe-example"
          ...略
          ></iframe>
  </div>
  <div class="city city--1">
	  <svg>......略
	  </svg>
	</div>
  <div class="city city--2">
    <svg> ...略</svg>
  </div>
  <div class="city city--3">
    <svg>...略</svg>
  </div>
</div>

<!---section只是要让你可以滑啦 --->
<div class="section"></div>


//SCSS （部份省略）
.hero{
  width: 100%;
  height: 100vh;
  background: black;
  overflow: hidden;
  position: relative;
  
  &:before{
    content: '';
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    //盖一层渐层，让城市底部渐渐消失感
    background: linear-gradient(180deg, 
		transparent 76%, rgba(22,160,133,1) 100%);
  }
  
  h1{
	  top: 10%;
	  position: absolute;
	  width: 100vw;
        //要高到把iframe盖过去
	  height: calc( 100vw /640 *360 + 20px);
	  text-align: center;
	  font-size: 30vw;
		//就是blend-mode 会把黑色的都滤掉，白色的地方加强
		//所以文字白色的地方就可以把底下的影片透出来
	  mix-blend-mode: multiply;
	  color: white;
	  background: black;
	  z-index: 1;

	//做字外框霓虹灯的感觉
	  text-shadow: 0 0 10px #03bcf4,
	    0 0 20px #03bcf4,
	    0 0 40px #03bcf4,
	    0 0 80px #03bcf4,
	    0 0 160px #03bcf4,;
  }
  
  .text{
    position: relative;
    
    iframe{
      width: 100vw;
      height: calc( 100vw /640 *360);
      position: absolute;
      top: 10%;;
      left: 0;
    }
  }
}

.city{
  position: absolute;
  transition: 0.3s;
  z-index: 1;
  bottom: 0;
  opacity: 0.9;

  &--2{
    right: 0;
  }
}

//JS
var text = document.querySelector('.text');
var city_1 = document.querySelector('.city--1');
var city_2 = document.querySelector('.city--2');
var city_3 = document.querySelector('.city--3');

window.addEventListener('scroll', function(){
  var value= window.scrollY;
  text.style.top = scrollY * 1 + 'px';
  city_1.style.left = scrollY * -1 + 'px';
  city_2.style.right = scrollY * -1 + 'px';
  city_3.style.bottom = scrollY * -0.3 + 'px';
})