Animation Worklet滚动改变布局实例页面

展示

• 列表1
• 列表2
• 列表3
• 列表4
• 列表5
• 列表6
• 列表7
• 列表8
• 列表9
• 列表10

代码

• HTML：

  <div id="container" class="container">
      <img id="cover" src="1.jpg">
      <ul class="list">
          <li>列表1</li>
          <li>列表2</li>
          <li>列表3</li>
          <li>列表4</li>
          <li>列表5</li>
          <li>列表6</li>
          <li>列表7</li>
          <li>列表8</li>
          <li>列表9</li>
          <li>列表10</li>
      </ul>
  </div>

  CSS：

  .container {
      width: 256px; height: 360px;
      border: 1px solid #eee;
      max-width: calc(100% - 2rem);
      margin: auto;
      overscroll-behavior: none;
      overflow: auto;
  }
  
  .container img {
      width: 100%;
      height: 192px;
      display: block;
  }
  
  .list {
      list-style: none;
      padding: 0;
      background-color: #fff;
      position: relative;
  }
  .list li {
      padding: 8px 10px;
      border-top: 1px solid #eee;
      text-align: left;
  }

  页面内JS：

  <script id="workletScript" language="animationworklet">
  registerAnimator('passthrough', class {
      animate(currentTime, effect) {
          effect.localTime = currentTime;
      }
  });
  </script>

• JS代码：

  var eleCover = document.querySelector('#cover');
  var eleScript = document.querySelector('#workletScript');
  
  const blobWorklet = new Blob([eleScript.textContent], {
      type: "text/javascript"
  });
  
  async function init() {
      await CSS.animationWorklet.addModule(URL.createObjectURL(blobWorklet));
  
      new WorkletAnimation('passthrough', new KeyframeEffect(eleCover, [{
          transform: 'translateY(0)'
      }, {
          transform: 'translateY(100px)'
      }], {
          duration: 2000, 
          fill: 'both'
      }), new ScrollTimeline({
          scrollSource: document.querySelector('#container'),
          // 'horizontal' 或 'vertical'
          orientation: 'vertical', 
          timeRange: 2000
      })).play();
  }
  if (CSS.animationWorklet) {
      init();
  }