Блог

У меня есть несколько текстовых элементов, которые должны перемещаться по оси x в зависимости от положения прокрутки. Пожалуйста, посмотрите на это перо для справки:

https://codepen.io/magglomag/pen/GRZwRNB

HTML

 <h1 class="moving-text-wrapper">
  <div class="moving-text moving-text-1" data-scroll-speed="-4">Lorem</div>
  <div class="moving-text moving-text-2" data-scroll-speed="2">ipsum</div>
  <div class="moving-text moving-text-3" data-scroll-speed="9">sonsetetur</div>
  <div class="moving-text moving-text-4" data-scroll-speed="-6">sit</div>
  <div class="moving-text moving-text-5" data-scroll-speed="3">amet</div>
</h1>
  

CSS

 html {
  height: 300vh;
}

.moving-text-wrapper {
  margin-top: 100vh;
  text-align: center;
}
  

jQuery

 $.fn.moveIt = function(){
  var $window = $(window);
  var instances = [];
  
  $(this).each(function(){
    instances.push(new moveItItem($(this)));
  });
  
  window.addEventListener('scroll', function(){
    var scrollTop = $window.scrollTop();
    var elemOffsetTop = $( '.moving-text-wrapper' ).offset().top;
    var translateX = elemOffsetTop - scrollTop - $( window ).height()/2;

    instances.forEach(function(inst){
      inst.update(translateX);
    });
  }, {passive: true});
}

var moveItItem = function(el){
  this.el = $(el);
  this.speed = parseInt(this.el.attr('data-scroll-speed'));
};

moveItItem.prototype.update = function(translateX){
  this.el.css('transform', 'translateX('   -(translateX / this.speed)   'px)');
};

$(function(){
  $('[data-scroll-speed]').moveIt();
});
  

Что я хотел бы добавить, так это небольшое ослабление переменной translateX , поэтому, когда прокрутка останавливается, текст перемещается немного дольше и не останавливается напрямую, как в текущем pen.

Есть какие-либо подсказки, как это решить? Большое спасибо!

На самом деле это было довольно легко решить с помощью CSS-переходов:

Я только что добавил переход к элементам, подобным этому:

 .moving-text {
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
  

См. Обновленный Codepen для справки:
https://codepen.io/magglomag/pen/YzqRPoX