我可以在滾動屏幕上沿對角線動畫此圖像並且比 window 慢嗎？

Question

當我向下滾動頁面時，我試圖讓這個圖像在屏幕上從左上角到右下角動畫。 我真的很想讓圖像滾動得比頁面慢，這樣它就會一直在屏幕上。 我研究了視差，但不確定這是否是最好的解決方案。 如果有辦法讓它開始變小，然后在向下滾動時變大，讓它看起來像是從遠處越來越近。

這是該頁面的鏈接，因為它現在正在工作以供參考：

HTML

<section class="astronaut">
    <img src="assets/Images/astronaut_PNG69.png" alt="astronaut" 
    class="astronautImage">
</section>`

JavaScript

let current = $(window).scrollTop();
const total = $(window).height() - current;
const ele = $(".astronautImage");
const currPosition = ele.position().left;
const trackLength = 250;
$(window).scroll(function (event) {
    current = $(window).scrollTop();
    console.log({ total: total, current: current });
    console.log(current / total * 100);
    const newPosition = trackLength * (current / total)
    ele.css({ left: currPosition + newPosition * (8) + 'px' });
});

Answer 1

對於 position 背景中的移動元素而不讓它滾動，我會使用position: fixed元素作為框架（下面稱為background ），然后是 position 宇航員（下面稱為rocket ）。

剩下要做的就是在用戶滾動時調整margin屬性。 您可能還想添加一個transition以使其更平滑。
為了讓它變得更大，您可以使用width / height屬性或使用transform: scale(...)來做同樣的事情。

 #background { position: fixed; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid red; } #rocket { height: 50px; width: 50px; background: rgb(150, 200, 210); margin-top: 10%; margin-left: 10%; }

 <div id="background"> <div id="rocket"></div> </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget mi proin sed libero enim sed. Faucibus purus in massa tempor nec feugiat nisl. Amet tellus cras adipiscing enim. Nulla pellentesque dignissim enim sit. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Sit amet purus gravida quis blandit turpis cursus in. Aliquam etiam erat velit scelerisque in dictum non consectetur a. Vitae auctor eu augue ut. Dignissim convallis aenean et tortor at risus. Nec sagittis aliquam malesuada bibendum arcu vitae. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Tempor orci dapibus ultrices in iaculis nunc sed. Donec et odio pellentesque diam volutpat commodo sed. Dui accumsan sit amet nulla facilisi morbi tempus iaculis. Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Eget nunc lobortis mattis aliquam faucibus purus in massa. Faucibus nisl tincidunt eget nullam. Nunc sed velit dignissim sodales ut eu sem. Turpis tincidunt id aliquet risus feugiat in ante. Purus sit amet luctus venenatis lectus magna fringilla urna. A cras semper auctor neque. Duis at tellus at urna condimentum mattis pellentesque. Ut sem viverra aliquet eget sit amet tellus. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Tempor id eu nisl nunc. Pulvinar proin gravida hendrerit lectus. Integer eget aliquet nibh praesent tristique. Tincidunt vitae semper quis lectus. Massa massa ultricies mi quis hendrerit dolor magna eget. Nunc vel risus commodo viverra maecenas accumsan lacus. Elementum eu facilisis sed odio morbi quis commodo. Viverra tellus in hac habitasse platea.<br> Nunc sed velit dignissim sodales ut eu sem. Turpis tincidunt id aliquet risus feugiat in ante. Purus sit amet luctus venenatis lectus magna fringilla urna. A cras semper auctor neque. Duis at tellus at urna condimentum mattis pellentesque. Ut sem viverra aliquet eget sit amet tellus. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Tempor id eu nisl nunc. Pulvinar proin gravida hendrerit lectus. Integer eget aliquet nibh praesent tristique. Tincidunt vitae semper quis lectus. Massa massa ultricies mi quis hendrerit dolor magna eget. Nunc vel risus commodo viverra maecenas accumsan lacus. Elementum eu facilisis sed odio morbi quis commodo. Viverra tellus in hac habitasse platea.<br> Nunc sed velit dignissim sodales ut eu sem. Turpis tincidunt id aliquet risus feugiat in ante. Purus sit amet luctus venenatis lectus magna fringilla urna. A cras semper auctor neque. Duis at tellus at urna condimentum mattis pellentesque. Ut sem viverra aliquet eget sit amet tellus. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Tempor id eu nisl nunc. Pulvinar proin gravida hendrerit lectus. Integer eget aliquet nibh praesent tristique. Tincidunt vitae semper quis lectus. Massa massa ultricies mi quis hendrerit dolor magna eget. Nunc vel risus commodo viverra maecenas accumsan lacus. Elementum eu facilisis sed odio morbi quis commodo. Viverra tellus in hac habitasse platea.<br> Nunc sed velit dignissim sodales ut eu sem. Turpis tincidunt id aliquet risus feugiat in ante. Purus sit amet luctus venenatis lectus magna fringilla urna. A cras semper auctor neque. Duis at tellus at urna condimentum mattis pellentesque. Ut sem viverra aliquet eget sit amet tellus. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Tempor id eu nisl nunc. Pulvinar proin gravida hendrerit lectus. Integer eget aliquet nibh praesent tristique. Tincidunt vitae semper quis lectus. Massa massa ultricies mi quis hendrerit dolor magna eget. Nunc vel risus commodo viverra maecenas accumsan lacus. Elementum eu facilisis sed odio morbi quis commodo. Viverra tellus in hac habitasse platea.

Answer 2

使用 css 變換看起來更容易，並且會呈現您想要完成的平滑 animation。 這是一個讓您入門的想法，只需應用一些百分比來縮放和轉換以使其一致

 var measure = { totalY: document.body.scrollHeight, totalX: document.body.scrollWidth, screenY: screen.height, screenX: screen.width, } $(document).on('scroll', function() { const posY = $(this).scrollTop(); const pos = { x: measure.screenX / measure.totalY * posY + 'px', y: posY + (measure.screenY / measure.totalY * posY) + 'px', }; $('img').css('transform', `translate(${pos.x},${pos.y}) scale(${(1 + posY / measure.screenY)})`) });

 <div style="margin-bottom: 5000px;"> <img src="https://jonalden.github.io/JonAldenPortfolio/assets/Images/astronaut_PNG69.png" style="transform: translate(0, 0) scale(1);width: 100px;" /> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

要對角移動圖像，您需要依賴 y position，因為您只在頁面中滾動 y。

更新小提琴： https://jsfiddle.net/m2uewboh/1/