10.03.2018, 10:01
|
 |
Новичок на форуме
|
|
Регистрация: 10.03.2018
Сообщений: 4
|
|
|
Остановка анимации по клику
Добрый день!
Пишу диплом по граф дизайну и пришлось столкнуться в программированием, хотя полный ноль в этом.
Нужно сделать анимацию - зацикленная смена нескольких картинок (по сути gif). По клику на определенную картинку анимация останавливается на этой картинке и раскрывается дополнительная текстовая информация. По повторному клику запускается заново. И так для каждой из картинок.
Господа разработчики, помогите плииииз!
|
|
10.03.2018, 10:11
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от Annaboka
|
|
по сути gif
|
Если gif, то никак, а если показываются картинки из массива, то можно. |
|
10.03.2018, 11:06
|
|
Новичок на форуме
|
|
Регистрация: 10.03.2018
Сообщений: 4
|
|
|
Да, понятно, что gif не дает такой возможности. Я теперь в поисках алгоритма, как это все реализовать. С какой стороны подступиться
|
|
10.03.2018, 11:32
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от Annaboka
|
|
в поисках алгоритма
|
алгоритм обычного слайдера, заведите переменную для индекса активной картинки и меняйте только его.
основные функции, одна изменить индекс, вторая показать картинку с этим индексом +- инфо. |
|
10.03.2018, 12:13
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
рони,
видимо не это нужно коли речь об "остановить анимацию". Щелчок по анимации - остановили таймер, второй щелчок - запустили вновь.
|
|
10.03.2018, 12:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от laimas
|
|
Щелчок по анимации - остановили таймер
|
правильно, но это ничего не меняет из сказанного выше, но можно и без остановки таймера (не изменять индекс на паузе) |
|
10.03.2018, 12:51
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от рони
|
|
но это ничего не меняет из сказанного выше
|
Ну а зачем индекс, если анимация, а не слайдер, а значит таймер с частотой сек/кадров, щелкнули, остановилось, это и будет кадр выбранный. Я так понял. |
|
10.03.2018, 12:56
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от laimas
|
|
Я так понял.
|
всё верно, но решения могут быть разные. |
|
10.03.2018, 12:57
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от рони
|
|
решения могут быть разные.
|
ну да, если не дергать таймер, а сверху добавлять слой.
PS. Но тогда при удалении слоя, анимация не обязательно будет после выбранного кадра, значит код усложнится. |
|
10.03.2018, 13:50
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
автосмена картинок и стоп/старт по клику
laimas,
Annaboka,
вариант без остановки таймеров.(надобы прелоад добавить)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.carousel{
width: 350px;
height: 170px;
position: relative;
opacity: 0;
border-radius: 8px;
box-sizing: border-box;
border: #8B4513 2px solid;
transition: opacity .8s ease-in;
background-size: 350px 170px;
}
.carousel.show{
opacity: 1;
}
.carousel.vertical{
width: 170px;
height: 350px;
background-size: 170px 350px;
}
.carousel h1{
color: #FFFFFF;
opacity: 0;
transition: .3s ease-in;
text-align: center;
bottom: 5px;
margin: auto 0;
transform: scale(0);
}
.carousel.pause h1{
opacity: 1;
transform: scale(1);
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".carousel"), function(el) {
var img = JSON.parse(el.dataset.src),
text = JSON.parse(el.dataset.text);
len = img.length,
i = 0,
p = el.dataset.pause || 5E3,
h = document.createElement("h1");
el.appendChild(h);
function g() {
el.style.backgroundImage = "url(" + img[i] + ")";
h.textContent = text[i];
el.classList.add("show");
window.setTimeout(k, p);
}
g();
function k() {
el.classList.contains("pause") || (i = ++i % len, el.classList.remove("show"));
window.setTimeout(g, 800);
}
el.addEventListener("click", function() {
el.classList.toggle("pause");
});
});
});
</script>
</head>
<body>
<div class="carousel" data-pause="3000"
data-src='["http://sunnytravel.by/upload/image/Tours/Nicca-karnaval.jpg",
"http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg",
"http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg",
"http://turj.ru/images/e/3/9/7/1/b641b8a77c.jpg"]' data-text='["карнавал", "Ницца", "маска", "праздник"]'>
</div>
</body>
</html>
|
|
|
|
