Друзья, всем привет! как сделать вот такую бегущую строку при скролле? То есть, строка должна полностью прокрутиться до конца сайта. Смотреть фото и сайт (пример): https://liginc.co.jp/works/detail/ateam/
2 ответа
Вот примерная реализация того что вы хотите.
Делаем вот что. Взяли длину фиксированного элемента, и высоту страницы. Делим длину на высоту, для того что бы понять при скролле на 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>
-
-
-
У меня в хром не выполнялся код. Проблема была во включенных расширениях)– trydex25 дек 2017 в 15:55
-
@maxwell Удивили меня, я использую
chrome
, и в нем всегда это работало. 25 дек 2017 в 15:56 -
@StackOverflow, вопрос такой, что происходит в первом примере, понятно, будь другом, скажи такую вещь. Если второй пример реализовать на чистом JS, то как реализовать аналог animate-JQ... Прошу без кода, хочу сам поковыряться, просто логику намекни...– Air25 дек 2017 в 20:24
Спасибо! Просто и интересно! Мне надо было встроить такое в модуль Joomla. И так, чтобы тект перемещался со скролингом вверх-вниз вместе со страницей и одновременно лево-право. Поменял fixed на relative и все.