X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2019-11-13
  • 5091 просмотр

    0 комментарий

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

В этой статье покажу вам способ как организовать на своем сайте бегущую строку, но вместо текста в ней будут картинки. Такой прием можно применить на своем сайте или лендинге для вывода, например, логотипов партнеров. спонсоров и тд. Суть идеи в том, чтобы картинки, беспрерывно двигались справа налево, по принципу бегущей строки.

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

Будущая бегущая строка будет адаптивной. До ширины 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%.

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

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

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 2, в среднем: 5 из 5
Читайте также
Комментариев нет. Оставьте первый

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.