有一陣子滑網頁案例時，超常看到用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';
})

以上！

(寫完這一篇發現跟SVG沒什麼關係ＸＤ)
今天的code: 在這裡
不過影片video 的loop沒有設定成功，
所以只能看帥帥英宏一首歌的長度啦哈哈哈哈

有任何問題＆想法＆錯誤請留言讓我知道！