如何創建類似滾動效果的 Nest Thermostat？

Question

經過數百次參考后，我正在寫這篇文章。 我想創建/或Nest Thermostat像滾動效果。 我找到了這個解決方案https://jsfiddle.net/desandro/daZmA/但它的父級已修復 position。 我不能在網站內使用。

 window.addEventListener( 'load', function() { var box = document.getElementById('box'), docHeight = document.documentElement.offsetHeight; window.addEventListener( 'scroll', function() { // normalize scroll position as percentage var scrolled = window.scrollY / ( docHeight - window.innerHeight ), transformValue = 'scale('+scrolled+')'; box.style.WebkitTransform = transformValue; box.style.MozTransform = transformValue; box.style.OTransform = transformValue; box.style.transform = transformValue; }, false); }, false);

 body { height: 2000px; } #container { width: 200px; height: 200px; border: 2px solid; position: fixed; } #box { width: 100%; height: 100%; background: red; }

 <div id="container"><div id="box"></div></div>

任何人都可以幫助我或建議一個好的參考或現有的插件來使用嗎？

提前致謝

Answer 1

我強烈推薦 GSAP scrollTrigger 插件。

https://greensock.com/scrolltrigger/

https://greensock.com/docs/v3/Plugins/ScrollTrigger

https://codepen.io/GreenSock/pen/gOabMXv

https://greensock.com/st-demos/

它使基於滾動 position 的動畫元素變得非常容易。 例如

gsap.timeline({ 
  scrollTrigger: {
     trigger: ".thermo",
     start: "center center",
     end: "bottom top",
     scrub: true,
     pin: true
  }
})
.from(".dial",  { y: innerWidth * 1.5 })