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

213

26 декабря 2017, 18:47

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

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

Answer 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; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<footer class="fixed_bottom">Здесь наш очень длинный текст. Совсем длинный.))))))))))))))</footer>

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

$(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; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<footer class="fixed_bottom"> 
  Здесь наш очень длинный текст. Совсем длинный.))))))))))))))</footer>