Можно ли анимировать это изображение по диагонали по экрану при прокрутке и медленнее, чем в окне? - PullRequest
Новая
       23

Можно ли анимировать это изображение по диагонали по экрану при прокрутке и медленнее, чем в окне?

1 голос
/ 19 сентября 2019

Я пытаюсь сделать это изображение анимированным по экрану от верхнего левого до нижнего правого, когда я прокручиваю страницу вниз.Мне бы очень хотелось, чтобы изображение прокручивалось медленнее, чем страница, чтобы оно постоянно отображалось на экране.Я смотрел в паралакс, но не уверен, что это лучшее решение.Бонусные баллы, если был способ заставить его начинать с меньшего, а затем увеличиваться по мере прокрутки вниз, создавая впечатление приближения издалека.

Здесь - это ссылка на страницу, так как она работает сейчас для справки:

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' });
});

Ответы [ 2 ]

0 голосов
/ 20 сентября 2019

Использование CSS-преобразования выглядит проще и будет отображать плавную анимацию того, что вы пытаетесь достичь.Это идея для начала, просто примените некоторые проценты для масштабирования и перевода, чтобы сделать его согласованным 

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, поскольку вы прокручиваете только y на своей странице.

Обновленная скрипка:https://jsfiddle.net/m2uewboh/1/

0 голосов
/ 20 сентября 2019

Чтобы расположить движущийся элемент на заднем плане, не прокручивая его, я бы использовал элемент position: fixed в качестве рамки (называемой background ниже), а затем расположил астронавта (называемого rocket ниже) относительно него.

Осталось только настроить свойства margin при прокрутке пользователя.Вы также можете добавить transition, чтобы сделать его более плавным.
Чтобы увеличить его, вы можете сделать то же самое с помощью либо свойств width / height, либо transform: scale(...). * 1012.* 

#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.
...