Как сделать всегда разную анимацию в шапке ?

Question

[NataliaEdaBlog]

У меня есть кулинарный блог и я хочу разместить анимацию в шапку сайта, как у этого сайта slinky.me Как сделать, чтобы она была всегда разная после обновления ? Что мне нужно скачать и установить из плагинов бесплатно ?
.

Answer 1

[Юрий Лобанов]

Это, плюс jquery и стили

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

Анимация - это gif, меняются этими скриптами, еще подключен скрипт адаптации бэкграунда.
Ничего готового не будет, так что Вам скорее всего на фриланс-биржу.

В ходе исследования кода был замечен интересный алерт )

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

Comments

[NataliaEdaBlog]

Спасибо огромное. Я нашла исполнителя на вашей фриланс-бирже, спасибо вам за сайт.