Показать сначала гиф, а затем число

166
06 октября 2018, 18:10

Нужно сделать так, чтобы при переходе на страницу сначала в течение 10 - 15 секунд вопроизводилась гиф анимация, а затем на её месте появилось число. К сожалению, я профан в создании сайтов, поэтому даже не представляю чем это реализуется css или js или ещё что.

Answer 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>

READ ALSO
Транслит в MySQL
MySQL

Транслит в MySQL

При переносе сайта с одного хостинга на другой перестала работать функция транслита, на старом работает, на новом нетПомогите пожалуйста...

 185
Аномальное поведение nodej и MySQL, потеря связи
MySQL

Аномальное поведение nodej и MySQL, потеря связи

Встретился с аномальным поведением NodeJS и MySQLВопрос очень специфический, буду рад любым догадкам

 191
Не пишет в базу (Python)
MySQL

Не пишет в базу (Python)

Подскажите, почему не получается записать(на python) в базу(mysql) В чем ошибка ?

 170
Как в MySQL правильно искать фразу целиком
MySQL

Как в MySQL правильно искать фразу целиком

Есть таблица с текстовым полем, содержащим ссылкиВ разных строках таблицы эти ссылки произвольной длины

 186