Нужно сделать так, чтобы при переходе на страницу сначала в течение 10 - 15 секунд вопроизводилась гиф анимация, а затем на её месте появилось число. К сожалению, я профан в создании сайтов, поэтому даже не представляю чем это реализуется css или js или ещё что.
2
-
А это число откуда будет браться? – Deonis 31 июл '18 в 21:40
-
Число постоянное. – Brutalizer 1337 31 июл '18 в 21:45
добавить комментарий
|
1 ответ
const sec = 3; // секунд ожидания (3сек для примера)
const number = 100500; // число для вывода
setTimeout(() => {
document.querySelector('div').textContent = number;
}, sec * 1000);
<div>
<img src="https://i.gifer.com/6i30.gif" alt="">
</div>
JS код расположите в конце страницы, перед закрывающим тегом </body>
или , если это проблематично, оберните в такую конструкцию:
document.addEventListener( "DOMContentLoaded", () => {
});
Если родительский элемент изображения неизвестен, то можно отталкиваться от самого изображения:
setTimeout(() => {
document.querySelector('img').parentNode.textContent = number;
}, sec * 1000);
Как вариант, можно попробовать организовать всё это дело только с помощью CSS, но тут нужно определиться с тем, каким образом скрывать изображение и в каком виде должно появляться число. Схематический пример:
img {
-webkit-animation: hide-image 0s linear 3s forwards;
animation: hide-image 0s linear 3s forwards;
}
span {
visibility: hidden;
-webkit-animation: show-number 0s linear 3s forwards;
animation: show-number 0s linear 3s forwards;
}
@-webkit-keyframes hide-image {
100% {
visibility: hidden;
position: absolute;
}
}
@keyframes hide-image {
100% {
visibility: hidden;
position: absolute;
}
}
@-webkit-keyframes show-number {
100% {
visibility: visible;
}
}
@keyframes show-number {
100% {
visibility: visible;
}
}
<div>
<img src="https://i.gifer.com/6i30.gif" alt="">
<span>100500</span>
</div>