在滚动位置更改图像

Question

我正在尝试从该网站重新创建一个部分： https ://calendly.com/。 特别是“与他人分享您的 Calendly 可用性”部分。

动画应该是带有标题和内容的左侧部分是可滚动的，并且图像应该在滚动的下一个图像中淡出。 我已经创建了一个Codepen ，但我无法让它正常工作。

 var wrappers = document.querySelectorAll(".wrapper"); function checkInView() { wrappers.forEach(function(wrapper) { var bounds = wrapper.getBoundingClientRect(); if (bounds.top < window.innerHeight && bounds.bottom > 0) { wrapper.classList.add("in-view"); } else { wrapper.classList.remove("in-view"); } }); } window.addEventListener("load", function() { var imageColumn = wrappers[0].querySelector(".image-column"); imageColumn.style.opacity = 1; }); window.addEventListener("scroll", function() { checkInView(); wrappers.forEach(function(wrapper) { var scrollPos = window.scrollY; var wrapperPos = wrapper.offsetTop; var wrapperHeight = wrapper.offsetHeight; var imageColumn = wrapper.querySelector(".image-column"); if (scrollPos > wrapperPos && scrollPos < wrapperPos + wrapperHeight) { imageColumn.style.transform = "translateY(" + (scrollPos - wrapperPos) + "px)"; imageColumn.classList.add("fade-out"); } else { imageColumn.classList.remove("fade-out"); imageColumn.classList.add("fade-in"); } }); });

 .container { display: flex; flex-direction: column; max-width: 1280px; margin: 0 auto; visibility: visible }.wrapper { display: flex; flex-direction: row; justify-content: center; align-items: center; height: 70vh; }.wrapper { visibility: hidden; }.wrapper.in-view { visibility: visible; }.text-column { width: 50%; padding: 20px; box-sizing: border-box; }.image-column-inner { width: 50%; position: sticky; top: 0; right: 0; top: calc(50% - 35vh); height: 70vh; }.image-column { width: 100%; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; height: 100%; max-height: 100vh; position: absolute; z-index: 9; } img { width: 100%; height: 100%; display: block; transition: opacity 0.5s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script> <div class="container"> <div class="wrapper"> <div class="text-column"> <h1>Share your Calendly availability with others</h1> <p> Grow your business with scheduling automation. Simply email, text, or add your Calendly availability to your website – and watch prospects and recruits book high-value meetings with you.</p> </div> <div class="image-column-inner"> <div class="image-column"> <img src="https://images.ctfassets.net/k0lk9kiuza3o/7mkknkKmPsEGwaB5mdt60t/33d742a897f87e8f6f5e11df85659960/Calendly-Email-Embed.png?w=1140&h=930&q=50&fm=webp" alt="image"> </div> </div> </div> <div class="wrapper"> <div class="text-column"> <h1>Schedule as a team </h1> <p> Calendly adapts to both you and your team's scheduling preferences. Co-host a client call with a colleague, email reminders and follow-ups, and integrate everything with your preferred software tools.</p> </div> <div class="image-column-inner"> <div class="image-column"> <img src="https://images.ctfassets.net/k0lk9kiuza3o/7mkknkKmPsEGwaB5mdt60t/33d742a897f87e8f6f5e11df85659960/Calendly-Email-Embed.png?w=1140&h=930&q=50&fm=webp" alt="image"> </div> </div> </div> <div class="wrapper"> <div class="text-column"> <h1>Hit your number</h1> <p> High-value meetings are the lifeblood of your business. Increase revenue, retain customers, and land recruits with the #1 scheduling automation platform. </p> </div> <div class="image-column-inner"> <div class="image-column"> <img src="https://images.ctfassets.net/k0lk9kiuza3o/7mkknkKmPsEGwaB5mdt60t/33d742a897f87e8f6f5e11df85659960/Calendly-Email-Embed.png?w=1140&h=930&q=50&fm=webp" alt="image"> </div> </div> </div> </div>

Answer 1

 const img = document.querySelector(".container img"); const textOne = document.querySelector(".one"); const textTwo = document.querySelector(".two"); const textThree = document.querySelector(".three"); function isInViewport(el) { const rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } document.addEventListener('scroll', function () { if (isInViewport(textOne) == true) { img.src = "https://images.ctfassets.net/k0lk9kiuza3o/7mkknkKmPsEGwaB5mdt60t/33d742a897f87e8f6f5e11df85659960/Calendly-Email-Embed.png?w=1140&h=930&q=50&fm=webp"; } if (isInViewport(textTwo) == true) { img.src = "https://images.ctfassets.net/k0lk9kiuza3o/6XqS7MbsZB4a08zAUxOHde/033649d82a01b51bbc080b037aac0206/Calendly-Round-Robin.png?w=1140&h=931&q=50&fm=webp"; } if (isInViewport(textThree) == true) { img.src = "https://images.ctfassets.net/k0lk9kiuza3o/ImJSAqUd3vtZlQiEiyWXH/a6a23c23b5d4fdb5173b5a43c48de78a/Calendly-Graph.png?w=1140&h=930&q=50&fm=webp"; } });

 *, *::after, *::before { box-sizing: border-box; } * { margin: 0; padding: 0; } body { padding: 0 100px; } h2 { text-align: center; font-size: 200%; max-width: 400px; margin: 600px auto auto auto; }.container { display: grid; grid-template-columns: repeat(2, 1fr); } img { width: 100%; position: sticky; top: 50px; }.text { height: 400px; display: flex; flex-direction: column; justify-content: center; padding-right: 50px; }.other { width: 100%; height: 100vh; background-color: red; }

 <h2>We make scheduling for you easier than ever</h2> <div class="container"> <div> <div class="text one"> <h3>Share your Calendly availability with others</h3> <p>Grow your business with scheduling automation. Simply email, text, or add your Calendly availability to your website – and watch prospects and recruits book high-value meetings with you.</p> <a href="">Learn more</a> </div> <div class="text two"> <h3>Schedule as a team</h3> <p>Calendly adapts to both you and your team's scheduling preferences. Co-host a client call with a colleague, email reminders and follow-ups, and integrate everything with your preferred software tools.</p> <a href="">Learn more</a> </div> <div class="text three"> <h3>Hit your number</h3> <p>High-value meetings are the lifeblood of your business. Increase revenue, retain customers, and land recruits with the #1 scheduling automation platform.</p> <a href="">Learn more</a> </div> </div> <img src="https://images.ctfassets.net/k0lk9kiuza3o/7mkknkKmPsEGwaB5mdt60t/33d742a897f87e8f6f5e11df85659960/Calendly-Email-Embed.png?w=1140&h=930&q=50&fm=webp" alt=""> </div> <div class="other"></div>