How to make always different animation in the header?

Question

PHP

I have a culinary blog and I want to place an animation in the header of the site, like this site slinky.me How to make it always different after the update? What do I need to download and install from plugins for free?
.

Answer 1

That, plus jquery and styles

<div class="slideone">
<!--Robo Adviced-->
<script>
var backgrounds = [
  {  image: '//slinky.me/files/g/cat.gif',
   subtitle: '//slinky.me/?q=google',
   title: 'Например #Google'
  },
  {  image: '//slinky.me/files/g/brain.gif',
   subtitle: '//slinky.me/?q=apple',
   title: 'Например #Apple'
     },
    {  image: '//slinky.me/files/g/catrun.gif',
   subtitle: '//slinky.me/?q=скорость',
   title: 'Например #Скорость'
     },	
       {  image: '//slinky.me/files/g/heroofwinds.gif',
   subtitle: '//slinky.me/?q=Игра',
   title: 'Например #Игра'
     },
 {  image: '//slinky.me/files/g/tv.gif',
   subtitle: '//slinky.me/?q=Тв',
   title: 'Например #Тв'
     },	
   {  image: '//slinky.me/files/g/meow.gif',
   subtitle: '//slinky.me/?q=Кошки',
   title: 'Например #Кошки'
     },	
   {  image: '//slinky.me/files/g/barbell.gif',
   subtitle: '//slinky.me/?q=Спорт',
   title: 'Например #Спорт'
     },
   {  image: '//slinky.me/files/g/catmouse.gif',
   subtitle: '//slinky.me/?q=Кошки',
   title: 'Например #Кошки'
     },	
   {  image: '//slinky.me/files/g/opt.gif',
   subtitle: '//slinky.me/?q=Еда',
   title: 'Например #Еда'
     },	
      {  image: '//slinky.me/files/g/airguitarboy.gif',
   subtitle: '//slinky.me/?q=Музыка',
   title: 'Например #Музыка'
     },
   {  image: '//slinky.me/files/g/thewall_focas.gif',
   subtitle: '//slinky.me/?q=Музыка',
   title: 'Например #Музыка'
     },
   {  image: '//slinky.me/files/g/pulpito_mocoso.gif',
   subtitle: '//slinky.me/?q=Музыка',
   title: 'Например #Музыка'
     },	
      {  image: '//slinky.me/files/g/marshmark.gif',
   subtitle: '//slinky.me/?q=Еда',
   title: 'Например #Еда'
     },	
      {  image: '//slinky.me/files/g/buru-sama.gif',
   subtitle: '//slinky.me/?q=Рунет',
   title: 'Например #Рунет'
     },	
         {  image: '//slinky.me/files/g/time.gif',
   subtitle: '//slinky.me/?q=Время',
   title: 'Например #Время'
     },	
 {  image: '//slinky.me/files/g/pizza.gif',
   subtitle: '//slinky.me/?q=Еда',
   title: 'Например #Еда'
     },		 
     {  image: '//slinky.me/files/g/rudolp-jumping-rope.gif',
   subtitle: '//slinky.me/?q=Спорт',
   title: 'Например #Спорт'
     },	 
       {  image: '//slinky.me/files/g/treadmill.gif',
   subtitle: '//slinky.me/?q=Спорт',
   title: 'Например #Спорт'
     },	  
  {  image: '//slinky.me/files/g/ai-digital.gif',
   subtitle: '//slinky.me/?q=Интернет',
   title: 'Например #Интернет'
     },	   
    {  image: '//slinky.me/files/g/octo-sleep.gif',
   subtitle: '//slinky.me/?q=Сон',
   title: 'Например #Сон'
     },
  {  image: '//slinky.me/files/g/spc.gif',
   subtitle: '//slinky.me/?q=Космос',
   title: 'Например #Космос'
     },
    {  image: '//slinky.me/files/g/running-godzilla.gif',
   subtitle: '//slinky.me/?q=Прон',
   title: 'Например #Прон'
     },
  {  image: '//slinky.me/files/g/tray.gif',
   subtitle: '//slinky.me/?q=Кошки',
   title: 'Например #Кошки'
     },	 
  {  image: '//slinky.me/files/g/character-render.gif',
   subtitle: '//slinky.me/?q=Офис',
   title: 'Например #Офис'
     },	 
   {  image: '//slinky.me/files/g/catpurr.gif',
   subtitle: '//slinky.me/?q=Кошки',
   title: 'Например #Кошки'
     },	
     {  image: '//slinky.me/files/g/court-2.gif',
   subtitle: '//slinky.me/?q=Баскетбол',
   title: 'Например #Баскетбол'
     },	
 {  image: '//slinky.me/files/g/work.gif',
   subtitle: '//slinky.me/?q=Работа',
   title: 'Например #Работа'
     },	 
   	   {  image: '//slinky.me/files/g/work.gif',
   subtitle: '//slinky.me/?q=Работа',
   title: 'Например #Работа'
     },	 	 
  {  image: '//slinky.me/files/g/dancing_wom.gif',
   subtitle: '//slinky.me/?q=Музыка',
   title: 'Например #Музыка'
     },	
    {  image: '//slinky.me/files/g/paradise.gif',
   subtitle: '//slinky.me/?q=Метро',
   title: 'Например #Метро'
     },	
 {  image: '//slinky.me/files/g/geocat.gif',
   subtitle: '//slinky.me/?q=Россия',
   title: 'Например #Россия'
     },
    {  image: '//slinky.me/files/g/kneebend.gif',
   subtitle: '//slinky.me/?q=Секс',
   title: 'Например #Секс'
     },
  {  image: '//slinky.me/files/g/dubstepcat.gif',
   subtitle: '//slinky.me/?q=Украина',
   title: 'Например #Украина'
  }
]; 
</script>

<script>function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}jQuery(document).ready(function(){
         var bgNumber = getRandomInt(0, backgrounds.length-1);
         
         jQuery('.iinum').prop('src', ''+backgrounds[bgNumber].image+'');
         jQuery('.topexample a').prop('href', ''+backgrounds[bgNumber].subtitle+'');
     jQuery('.topexample a').html(backgrounds[bgNumber].title);
});
</script>
<script type="text/javascript">
  $(document).ready(function(){
    $.adaptiveBackground.run({
    })
  });
</script>
<img class="iinum" data-adaptive-background='1' ></img>
<div class="slidetxt2">Добро пожаловать в хранилище статистики!</div>
<div class="topexample"><a></a></div>

Animation is a gif, they change with these scripts, the background adaptation script is also connected.
There will be nothing ready, so you are most likely on a freelance exchange.

During the study of the code, an interesting alert was noticed)

<script type="text/javascript">
$(document).ready(function(){    
  $('#fu-desc-txt').maxlength({   
    events: [], // Array of events to be triggerd    
    maxCharacters: 140, // Characters limit   
    status: true, // True to show status indicator bewlow the element    
    statusClass: "fu-desc-c", // The class on the status div  
    statusText: "", // The status text  
    notificationClass: "notifoo",  // Will be added when maxlength is reached  
    showAlert: false, // True to show a regular alert message    
    alertText: "ебать как много символов", // Text in alert message   
    slider: true // True Use counter slider    
  }); 
});
</script>