Бегущая строка для картинок. Движущиеся без остановки картинки.

Будущая бегущая строка будет адаптивной. До ширины 800 пикселей изображения будут адаптироваться, менять размер и строка будет двигаться. Если ширина экрана устройства будет меньше 800 пикселей, то бишь на мобильных, то анимации уже не будет и картинки будут просто размещаться в столбец. То что получится в итоге можно увидеть в примере ниже

Наша будущая лента с картинками будет работать благодаря jQuery, поэтому нам для начала нужно убедится, что к сайту подключена библиотека jQuery. Если подключена, то пропускаете этот шаг, если нет, то нужно воспользоваться статей Как и где подключить скрипт? и подключить библиотеку:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Далее подключаем сам скрипт, что будет совершать анимацию и прокручивать картинки.

<script>
$(function() {
var marquee = $("#slide_line"); 
marquee.wrapInner("<span>");
marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" }); 
marquee.append(marquee.find("span").clone());
marquee.wrapInner("<div>");
marquee.find("div").css("width", "200%");
var reset = function() {
if ($(window).width() <= '800'){
$(this).stop();
} else {
$(this).css("margin-left", "0%");
$(this).animate({ "margin-left": "-100%" }, 13000, 'linear', reset);
}
};
reset.call(marquee.find("div"));
});
</script>

Давайте немного разберем этот скрипт, чтобы вы смогли его настроить под себя.

var marquee = $("#slide_line"); - в первой строке создаем переменную, для чего указываем айди нашего будущего блока с картинками. В данном случаи это - #slide_line.

Далее наш скрипт создает внутри блока с картинками элемент span, которому задаются стили. Данный элемент как раз и является контейнером для будущих картинок. После этого, все это дублируется. то бишь у нас создается копия SPAN с картинками внутри. Именно по этому в 4 строке кода, мы в стилях задаем ширину в 50%, и устанавливаем параметр display:inline-block.

После этого, оба наши span, мы с заключаем в контейнер, родительский div. Ему задаем ширину в 200%.

if ($(window).width() <= '800') - этой строкой мы задаем минимальную ширину страницы в пикселях, при какой анимация остановится и картинки начнут располагаться в столбец.

Если ширина больше, то запускаем анимацию. Там есть значение 13000 что задает время анимации в миллисекундах и оно равно 13 секундам. Именно за это время будут проходить по странице картинки. Можете поменять значение на свое.

Вот в принципе и весь скрипт. теперь нужно добавить HTML разметку для того чтобы вывести изображения.

<div id="slide_line">
<img class="img_s" src="1.png" alt="Картинка1">
<img class="img_s" src="2.png" alt="Картинка2">
<img class="img_s" src="3.png" alt="Картинка3">
<img class="img_s" src="4.png" alt="Картинка4">
<img class="img_s" src="5.png" alt="Картинка5">
<img class="img_s" src="6.png" alt="Картинка6">
<img class="img_s" src="7.png" alt="Картинка7">
<img class="img_s" src="8.png" alt="Картинка8">
<img class="img_s" src="9.png" alt="Картинка9">
<img class="img_s" src="10.png" alt="Картинка10">
</div>

По коду видно, что в родительский див с айди slide_line подключены изображения. Название айди важно, потому как оно указано и в скрипте выше. В данном примере 10 изображений. Их количество очень важно. Немного ниже, я объясню почему.

Так же нужно задать стили, для корректной работы ленты. Выглядеть они будут примерно так:

#slide_line{width:100%;margin:0 auto;text-align:center;overflow:hidden;}
#slide_line img{width:9.4%;height:auto;}
.string:hover{cursor:pointer;}

@media (max-width:800px){
#slide_line img{width:28%;max-width:160px;margin-right:1%;}
}
@media (max-width:450px){
#slide_line img{width:99%;}
}

Тут важны несколько параметров.

• overflow:hidden; - в первой строке задан это параметр для #slide_line. он обрежет все что выйдет за пределы блока.
• #slide_line img{width:9.4%;height:auto;} - в этой строке мы задаем размеры для картинок. Ширина в 9.4% выбрана не спроста. Если 100% разделить на 10 картинок, то на каждую останется по 10%. Картинка строчный элемент после которого есть маленький отступ, кто знаком с версткой, поймет о чем я. та же ситуация и с SPAN из скрипта, поэтому ширину указываем не 10%, а 9,4%, чтобы все изображения поместились в одну строку и при изменении размера страницы, ничего не поменялось. Вот поэтому, выше я писал. что количество картинок важно. Если вы хотите изменить их количество, то нужно будет правильно вычислить правильную ширину в процентах.
• @media (max-width:800px) - После этой строки задаем стили для устройств, ширина страницы на которых будет меньше 800 пикселей. Скрипт остановит анимацию, а мы устанавливаем для картинок ширину в 28% но не больше 160px и отступ в 1%.
• @media (max-width:450px) - Так же как и в предыдущем пункте, задаем стили для устройств с шириной страницы меньше 450 пикселей. Тут изображениям задаем ширину в 99%.

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

На этом все, спасибо за внимание. 🙂