iPhone SE 产品网页之 A13 晶片动画特效

亦凉 2023-02-20 07:43 42阅读 0赞

html部分

<section id="chip-section">
      <video src="https://www.apple.com/105/media/us/iphone-se/2020/90024c0f-285a-4bf5-af04-2c38de97b06e/anim/arcade-loop/large.mp4" muted playsinline autoplay loop></video>
      <h1>
        iPhone 11 Pro called.<br>
        It wants its chip back.
      </h1>
      <div id="the-chip">
        <svg viewBox="0 0 1000 1000" id="A13">
          <rect class="text-bg" x="78" y="307" width="843" height="387"></rect>
          <path d="M893.839695,31 L895.066071,31.0099354 C935.054114,31.6582805 967.348376,63.956556 967.990262,103.946169 L968,105.160305 L968,894.839695 L967.990065,896.066071 C967.341719,936.054114 935.043444,968.348376 895.053831,968.990262 L893.839695,969 L104.160305,969 L102.933929,968.990065 C62.9458856,968.341719 30.6516243,936.043444 30.0097379,896.053831 L30,894.839695 L30,105.160305 L30.0099354,103.933929 C30.6582805,63.9458856 62.956556,31.6516243 102.946169,31.0097379 L104.160305,31 L893.839695,31 Z M746.261438,399 C720.891068,399 697.908497,406.178571 686.267974,413.65625 L695.520697,446.558036 C703.281046,441.772321 719.995643,434.892857 735.814815,434.892857 C755.215686,434.892857 764.46841,443.566964 764.46841,455.232143 C764.46841,471.683036 745.366013,477.665179 730.143791,477.665179 L712.235294,477.665179 L712.235294,510.267857 L730.740741,510.267857 C750.738562,510.267857 769.840959,518.941964 769.840959,538.383929 C769.840959,552.741071 757.901961,564.107143 734.32244,564.107143 C715.816993,564.107143 697.311547,556.629464 689.252723,552.142857 L680,586.540179 C691.342048,593.419643 712.533769,600 737.605664,600 C786.854031,600 817,574.875 817,540.776786 C817,515.053571 798.196078,497.40625 774.915033,493.21875 L774.915033,492.620536 C798.793028,484.544643 810.433551,468.09375 810.433551,447.455357 C810.433551,420.834821 787.45098,399 746.261438,399 Z M486.512195,395 L427,395 L366,596 L412.717073,596 L427,544.408012 L484.429268,544.408012 L499.902439,596 L549,596 L486.512195,395 Z M644,402 L606.667785,402 L555,425.876923 L562.466443,459.901538 L599.5,442.292308 L600.097315,442.292308 L600.097315,596 L644,596 L644,402 Z M240.531042,404.280688 L237.283702,405.468274 C227.238818,409.107297 221.243767,410.93207 219.349668,410.93207 C216.554106,410.93207 210.17784,409.031898 200.247412,405.284905 L198.837992,404.763898 C189.530001,401.373803 181.984244,399.650292 176.164334,399.650292 C164.996112,399.837018 154.625512,402.75553 145.027551,408.482713 C135.647735,414.079741 128.110486,421.657892 122.392498,431.23034 L121.99652,431.901421 C114.661865,444.214093 111,458.907077 111,475.942715 C111,490.81457 113.715961,506.175987 119.133835,522.039516 C124.192702,536.726222 130.650134,549.608473 138.504565,560.717633 L139.862999,562.632356 C146.584254,572.026688 152.241437,578.731806 156.82169,582.747709 C164.32913,589.765174 171.850072,593.175357 179.394841,592.993063 L179.838678,592.978196 C184.897548,592.805595 191.514187,591.063893 199.727635,587.721741 C207.928586,584.395242 215.595715,582.747709 222.744623,582.747709 C229.561062,582.747709 237.015908,584.395242 245.127887,587.721741 C253.213333,591.063893 260.159327,592.711447 265.919035,592.711447 C273.942048,592.523152 281.434355,589.212369 288.42717,582.747709 C292.938164,578.809281 298.791526,571.716976 305.940438,561.470815 C311.185053,553.954856 315.711655,545.779887 319.535849,536.898823 C321.11236,533.133 322.595212,529.210267 324,525.114938 C317.771435,522.489722 312.148969,518.834501 307.090999,514.135332 L306.486749,513.56642 C294.982938,502.849509 289.129576,489.352176 288.957877,473.132468 C288.770571,452.309041 298.182783,436.076779 317.210116,424.487459 C306.580405,409.298642 290.59682,400.867905 269.32179,399.141902 C261.470478,398.4719 251.886573,400.172802 240.531042,404.280688 Z M454.966443,430 L455.557047,430 L458.400752,441.493321 C460.667056,450.623403 463.132186,460.315337 465.597315,468.571429 L478,511 L434,511 L445.812081,468.571429 C449.060403,457 452.013423,441.868132 454.966443,430 Z M269.735915,340 C263.351502,340.327936 256.563201,342.242941 249.386557,345.705743 C242.194375,349.220995 236.263544,353.627625 231.600286,358.927326 C222.259769,369.394476 217,382.196201 217,394.158222 C217,395.811495 217.107185,397.384794 217.292036,398.879663 C231.799116,400.04695 245.176874,392.649512 256.236994,379.84778 C265.401969,369.079203 270,357.444914 270,344.984462 C270,343.33164 269.922334,341.665768 269.735915,340 Z" class="chip-mask"></path>
          <path d="M894.279877,0 C952.083613,0 999.052244,46.3905942 999.985837,103.971847 L1000,105.720123 L1000,894.279877 C1000,952.083613 953.609406,999.052244 896.028153,999.985837 L894.279877,1000 L105.720123,1000 C47.9163872,1000 0.947755733,953.609406 0.0141634759,896.028153 L0,894.279877 L0,105.720123 C0,47.9163872 46.3905942,0.947755733 103.971847,0.0141634759 L105.720123,0 L894.279877,0 Z M892.997819,31 L105.002181,31 C64.5406078,31 31.6634119,63.4725801 31.0099142,103.77842 L31,105.002181 L31,892.997819 C31,933.459392 63.4725801,966.336588 103.77842,966.990086 L105.002181,967 L892.997819,967 C933.459392,967 966.336588,934.52742 966.990086,894.22158 L967,892.997819 L967,105.002181 C967,64.5406078 934.52742,31.6634119 894.22158,31.0099142 L892.997819,31 Z" class="chip"></path>
        </svg>
      </div>
    </section>

css部分

body { 
      background-color: #000;
      margin: 0;
      height: 3000px;
    }
    
    #A13 .chip { 
      fill: #fff;
    }
    
    #A13 .text-bg { 
      fill: #fff;
    }
    
    #A13 .chip-mask { 
      fill: #000;
    }
    
    #chip-section { 
      position: sticky;
      top: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
    
    video { 
      height: 100vh;
      width: auto;
      position: relative;
      left: 50%;
      transform: translate(-50%, 0);
    }
    
    #the-chip { 
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      box-shadow: 0px 0px 0px 100vw black, 0px 0px 0px 30px black inset;
      z-index: 10;
      min-width: 100px;
      min-height: 100px;
      background-color: #000;
    }
    
    #the-chip.transparent { 
      background-color: transparent;
    }
    
    #A13 { 
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
    
    h1 { 
      position: absolute;
      top: 0;
      left: 0;
      color: #fff;
      z-index: 20;
      font-family: Helvetica;
      font-size: 64px;
      letter-spacing: -1px;
      text-align: center;
      width: 100%;
      top: 50%;
      transform: translate(0, -50%);
      margin: 0;
    }

js部分

window.addEventListener('scroll', (e) => { 
      let scrolled = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight)
      
      let $h1 = document.querySelector('h1')
      let $theChip = document.querySelector('#the-chip')
      let $A13 = document.querySelector('#A13')
      let $A13TextBg = document.querySelector('#the-chip .text-bg')
      
      $theChip.style.width = $theChip.style.height = document.documentElement.clientWidth * 20 * (scrolled * scrolled * scrolled) + 'px'
      
      if (scrolled <= 0.1) { 
        $h1.style.opacity = (0.1 - scrolled) / 0.1
        $h1.style.marginTop = scrolled * 1000 * -1 + 'px'
      } else { 
        $h1.style.opacity = 0
      }
      
      if (scrolled <= 0.2) { 
        $A13.style.opacity = (scrolled - 0.1) / 0.1
      } else { 
        $A13.style.opacity = 1
      }
      
      if (scrolled >= 0.5) { 
        $A13TextBg.style.opacity = (1 - scrolled) / 0.5
        $theChip.classList.add('transparent')
      } else { 
        $A13TextBg.style.opacity = 1
        $theChip.classList.remove('transparent')
      }
      
      if (scrolled >= 0.95) { 
        $theChip.style.opacity = (1 - scrolled) / 0.05
      } else { 
        $theChip.style.opacity = 1
      }
      
    })

有空使用vuejs来实现效果，放在代码后面