Бегущая строка при скролле

#javascript #jquery

Друзья, всем привет! как сделать вот такую бегущую строку при скролле?
То есть, строка должна полностью прокрутиться до конца сайта.
Смотреть фото и сайт (пример):
https://liginc.co.jp/works/detail/ateam/

Заранее огромное спасибо.

    

Ответы

Ответ 1

Вот примерная реализация того что вы хотите.

Делаем вот что. Взяли длину фиксированного элемента, и высоту страницы. Делим длину
на высоту, для того что бы понять при скролле на 1px сколько процентов должен двигаться
наш элемент на лева. Ну и уже нам осталось обработать событие scroll.

Там уже вычисляем сколько пикселей должен продвигаться наш элемент. Для этого умножаем
текущий scrollTop к ранее вычисленному slide_left и берем отрицательное значение (отрицательное
для того что бы дать стилю left нашего элемента и продвигать его на лево).



$(document).ready(function(){
  var w_height= $(this).height();
  var slide_width = $('.fixed_bottom').width();
  var slide_left = slide_width/w_height;
  $(window).scroll(function(e){
    var f_left = slide_left*$(this).scrollTop()*-1;
    $('.fixed_bottom').css({left: f_left});
    
  });
});
body{
  height:800px;
}
.fixed_bottom{
  position: fixed;
  color: red;
  font-size: 40px;
  width: auto;
  white-space: nowrap;
  bottom: 0;
  left: 0;
}

Здесь наш очень длинный текст. Совсем длинный.))))))))))))))




Ну а это второй вариант. Все те же вычисления, но это уже с анимацией перехода.



$(document).ready(function(){
  var w_height= $(this).height();
  var slide_width = $('.fixed_bottom').width();
  var slide_left = slide_width/w_height;

  $(window).scroll(function(e){
    var f_left = slide_left*$(this).scrollTop()*-1;

    $('.fixed_bottom').animate({
        left: f_left
    }, 90);
  });
});
body{
  height:800px;
}
.fixed_bottom{
  position: fixed;
  color: red;
  font-size: 40px;
  width: auto;
  white-space: nowrap;
  bottom: 0;
  left: 0;
}


  Здесь наш очень длинный текст. Совсем длинный.))))))))))))))