Будущая бегущая строка будет адаптивной. До ширины 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%.
Добавив весь этот код себе на сайт и подправив его под свои нужды, вы получите бегущую ленту с картинками. Данная лента не идеальна, ее можно дорабатывать и видоизменять, но это уже все в ваших руках. Я дал заготовку, которой иногда пользуюсь сам.
На этом все, спасибо за внимание. 🙂
