Плавная смена фона дива

@pixel · Регистрация: 19.05.2009

Author24 — интернет-сервис помощи студентам

Приветствую.
Надо мне в шапке сайта тупо менять картинки - штук 8 по кругу. Использовать плагины и т.п. желания нет. Нашел статью, вроде то что надо, но у меня никак не хочет работать. В ИЕ видно быстрое промелькивание картинок до последней и все, а в хроме и лисе вообще только последняя картинка видна. Подскажите, как сделать, что бы работало?

@Qwerty_Wasd · 05.11.2018, 01:47

pixel, IE 10/11, EDGE, Firefox, Opera, Chrome, Safari - https://codepen.io/qwerty_wasd/pen/RqNapJ

HTML5

<div class="module-slider-background"><img src="https://dummyimage.com/600x400/cf8792/000000.png" alt=""/><img src="https://dummyimage.com/600x400/88a1cf/000000.png" alt=""/><img src="https://dummyimage.com/600x400/deb385/000000.png" alt=""/><img src="https://dummyimage.com/600x400/ded185/000000.png" alt=""/><img src="https://dummyimage.com/600x400/9785de/000000.png" alt=""/><img src="https://dummyimage.com/600x400/578c4a/000000.png" alt=""/></div>

CSS

@-webkit-keyframes anim1 {
  0% {
    opacity: 1;
  }
  11.1% {
    opacity: 1;
  }
  16.6% {
    opacity: 0;
  }
  94.4% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes anim1 {
  0% {
    opacity: 1;
  }
  11.1% {
    opacity: 1;
  }
  16.6% {
    opacity: 0;
  }
  94.4% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes anim2 {
  0% {
    opacity: 0;
  }
  11.1% {
    opacity: 0;
  }
  16.6% {
    opacity: 1;
  }
  27.7% {
    opacity: 1;
  }
  33.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim2 {
  0% {
    opacity: 0;
  }
  11.1% {
    opacity: 0;
  }
  16.6% {
    opacity: 1;
  }
  27.7% {
    opacity: 1;
  }
  33.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes anim3 {
  0% {
    opacity: 0;
  }
  27.7% {
    opacity: 0;
  }
  33.3% {
    opacity: 1;
  }
  44.4% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim3 {
  0% {
    opacity: 0;
  }
  27.7% {
    opacity: 0;
  }
  33.3% {
    opacity: 1;
  }
  44.4% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes anim4 {
  0% {
    opacity: 0;
  }
  44.4% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  61.1% {
    opacity: 1;
  }
  66.6% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim4 {
  0% {
    opacity: 0;
  }
  44.4% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  61.1% {
    opacity: 1;
  }
  66.6% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes anim5 {
  0% {
    opacity: 0;
  }
  61.1% {
    opacity: 0;
  }
  66.6% {
    opacity: 1;
  }
  77.7% {
    opacity: 1;
  }
  83.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim5 {
  0% {
    opacity: 0;
  }
  61.1% {
    opacity: 0;
  }
  66.6% {
    opacity: 1;
  }
  77.7% {
    opacity: 1;
  }
  83.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes anim6 {
  0% {
    opacity: 0;
  }
  77.7% {
    opacity: 0;
  }
  83.3% {
    opacity: 1;
  }
  94.4% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim6 {
  0% {
    opacity: 0;
  }
  77.7% {
    opacity: 0;
  }
  83.3% {
    opacity: 1;
  }
  94.4% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
.module-slider-background {
  border: 2px solid #000000;
  /*если нужен как фон, добавить родителю position: relative*/
  position: absolute;
  z-index: -99;
  /*размер можно менять. Если родитель relative, то по 100% сделают фон*/
  height: 200px;
  width: 250px;
}
.module-slider-background > img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  -webkit-animation: anim 36s linear infinite;
          animation: anim 36s linear infinite;
}
.module-slider-background > img:first-child {
  -webkit-animation-name: anim1;
          animation-name: anim1;
}
.module-slider-background > img:nth-child(2) {
  -webkit-animation-name: anim2;
          animation-name: anim2;
}
.module-slider-background > img:nth-child(3) {
  -webkit-animation-name: anim3;
          animation-name: anim3;
}
.module-slider-background > img:nth-child(4) {
  -webkit-animation-name: anim4;
          animation-name: anim4;
}
.module-slider-background > img:nth-child(5) {
  -webkit-animation-name: anim5;
          animation-name: anim5;
}
.module-slider-background > img:nth-child(6) {
  -webkit-animation-name: anim6;
          animation-name: anim6;
}

Копипастни меня полностью

PHP/HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style>
    @-webkit-keyframes anim1 {
        0% {
            opacity: 1;
        }
        11.1% {
            opacity: 1;
        }
        16.6% {
            opacity: 0;
        }
        94.4% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    
    @keyframes anim1 {
        0% {
            opacity: 1;
        }
        11.1% {
            opacity: 1;
        }
        16.6% {
            opacity: 0;
        }
        94.4% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    
    @-webkit-keyframes anim2 {
        0% {
            opacity: 0;
        }
        11.1% {
            opacity: 0;
        }
        16.6% {
            opacity: 1;
        }
        27.7% {
            opacity: 1;
        }
        33.3% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    
    @keyframes anim2 {
        0% {
            opacity: 0;
        }
        11.1% {
            opacity: 0;
        }
        16.6% {
            opacity: 1;
        }
        27.7% {
            opacity: 1;
        }
        33.3% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    
    @-webkit-keyframes anim3 {
        0% {
            opacity: 0;
        }
        27.7% {
            opacity: 0;
        }
        33.3% {
            opacity: 1;
        }
        44.4% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    
    @keyframes anim3 {
        0% {
            opacity: 0;
        }
        27.7% {
            opacity: 0;
        }
        33.3% {
            opacity: 1;
        }
        44.4% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    
    @-webkit-keyframes anim4 {
        0% {
            opacity: 0;
        }
        44.4% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        61.1% {
            opacity: 1;
        }
        66.6% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    
    @keyframes anim4 {
        0% {
            opacity: 0;
        }
        44.4% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        61.1% {
            opacity: 1;
        }
        66.6% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    
    @-webkit-keyframes anim5 {
        0% {
            opacity: 0;
        }
        61.1% {
            opacity: 0;
        }
        66.6% {
            opacity: 1;
        }
        77.7% {
            opacity: 1;
        }
        83.3% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    
    @keyframes anim5 {
        0% {
            opacity: 0;
        }
        61.1% {
            opacity: 0;
        }
        66.6% {
            opacity: 1;
        }
        77.7% {
            opacity: 1;
        }
        83.3% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    
    @-webkit-keyframes anim6 {
        0% {
            opacity: 0;
        }
        77.7% {
            opacity: 0;
        }
        83.3% {
            opacity: 1;
        }
        94.4% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    
    @keyframes anim6 {
        0% {
            opacity: 0;
        }
        77.7% {
            opacity: 0;
        }
        83.3% {
            opacity: 1;
        }
        94.4% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    
    *,
    *:after,
    *:before {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        outline: 0;
    }
    /*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
    
    .module-slider-background {
        border: 2px solid #000000;
        /*если нужен как фон, добавить родителю position: relative*/
        position: absolute;
        z-index: -99;
        /*размер можно менять. Если родитель relative, то по 100% сделают фон*/
        height: 200px;
        width: 250px;
    }
    
    .module-slider-background > img {
        position: absolute;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        opacity: 0;
        -webkit-animation: anim 36s linear infinite;
        animation: anim 36s linear infinite;
    }
    
    .module-slider-background > img:first-child {
        -webkit-animation-name: anim1;
        animation-name: anim1;
    }
    
    .module-slider-background > img:nth-child(2) {
        -webkit-animation-name: anim2;
        animation-name: anim2;
    }
    
    .module-slider-background > img:nth-child(3) {
        -webkit-animation-name: anim3;
        animation-name: anim3;
    }
    
    .module-slider-background > img:nth-child(4) {
        -webkit-animation-name: anim4;
        animation-name: anim4;
    }
    
    .module-slider-background > img:nth-child(5) {
        -webkit-animation-name: anim5;
        animation-name: anim5;
    }
    
    .module-slider-background > img:nth-child(6) {
        -webkit-animation-name: anim6;
        animation-name: anim6;
    }
    </style>
</head>
<body>
    <div class="module-slider-background"><img src="https://dummyimage.com/600x400/cf8792/000000.png" alt="" /><img src="https://dummyimage.com/600x400/88a1cf/000000.png" alt="" /><img src="https://dummyimage.com/600x400/9785de/000000.png" alt="" /><img src="https://dummyimage.com/600x400/ded185/000000.png" alt="" /><img src="https://dummyimage.com/600x400/deb385/000000.png" alt="" /><img src="https://dummyimage.com/600x400/578c4a/000000.png" alt="" /></div>
</body>
</html>

@pixel · 05.11.2018, 17:37 **[ТС]**

Qwerty_Wasd, спасибо, работает, но подскажите, почему img? в том примере менялся бэкграунд дива. И почему в первых кейфреймах 0, 11.1, 16.6, 94.4, 100, а в последних 0, 77.7, 83.3, 94.4, 100? Хотя вроде смена происходит в один и тот же момент.

@Qwerty_Wasd · 05.11.2018, 17:57

pixel,

Сообщение от pixel

в том примере менялся бэкграунд дива

да нет разницы, как сделать. Смысл в просчете времени анимации.

Сообщение от pixel

И почему в первых кейфреймах 0, 11.1, 16.6, 94.4, 100, а в последних 0, 77.7, 83.3, 94.4, 100?

анимация зациклена, если последний начнет "затухать" (ну и слово) в 34 секунду(34 / 36 *100 = 94,444%), то первый в это время начнет появлятся.

@pixel · 05.11.2018, 18:15 **[ТС]**

блин, нифига не понял. Ну так если мне надо 8 снимков крутить а в вашем примере 6 - какие же мне параметры указывать?

@Qwerty_Wasd · 05.11.2018, 18:40

pixel,

Сообщение от pixel

какие же мне параметры указывать?

по аналогии высчитывайте. Но уже для 8. Я делал для 6 потому, что мне длины листка просто не хватило

В той статье, что Вы читали, там примеры даже со скринами как это делать.

pixel, пару шпаргалок Вам в помощь

@Qwerty_Wasd · 05.11.2018, 20:35

Исходя из них для слайда 1 анимация будет такой

CSS

@keyframes anim1{
  0% {
    opacity: 1;
  }
  9.4% {
    opacity: 1;
  }
  12.5% {
    opacity: 0;
  }
  96.7% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

для слайда 2

CSS

@keyframes anim2{
  0% {
    opacity: 0;
  }
  9.4% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  }
  21.9% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

Дальше сами

@Fedor92 · 06.11.2018, 10:09

Сообщение от Qwerty_Wasd

pixel, пару шпаргалок Вам в помощь

Ничёсе... Вот это конспекты...

Это где такие выдают?

@Qwerty_Wasd · 06.11.2018, 17:06

Fedor92, Привет

Ну от нефиг делать же

@Fedor92 · 06.11.2018, 17:11

Сообщение от Qwerty_Wasd

Fedor92, Привет Ну от нефиг делать же

Привет! Блог, что ли заведи...

Тема то вниз упадёт, а этот шедевр увековечить надо...

@Qwerty_Wasd · 06.11.2018, 17:12

Не по теме:

Fedor92, ахахахаха))))

@pixel · 06.11.2018, 21:29 **[ТС]**

Qwerty_Wasd, наверное это слишком, но можно ли как то автоматизировать процесс смены временных интервалов смены снимков? Например, есть на сайте плеер. У каждого трека разный темп и вот от этого менять параметры смены картинок.

@Qwerty_Wasd · 06.11.2018, 21:44

pixel,

Сообщение от pixel

У каждого трека разный темп и вот от этого менять параметры смены картинок.

то есть если музыка будет в стиле престо, то слайды должны будут меняться со скоростью пулемета? Это просто мысль. К Вам она не приходила?

@pixel · 06.11.2018, 21:59 **[ТС]**

Qwerty_Wasd, нет. если темп в 150 бпм - это не значит что слайды меняться должны с той же скоростью. В музыке есть такты. Они группируются в квадраты и т.п. Т.е. всегда можно найти к чему зацепиться. Главное как?

@Qwerty_Wasd · 06.11.2018, 22:12

pixel, изучить АПИ плеера, который Вы используете. В нем описание событий. По событию окончания проигрывания трека, сверять путь следующего с каким-нибудь массивом \ объектом на наличие индекса\ключа. По этому индексу\ключу в объекте\массиве выбирать сеттинг(стили) и добалять элементам слайдам. и запускать событие play новому треку. Вот как-то так навскидку.

@pixel · 06.11.2018, 22:25 **[ТС]**

Qwerty_Wasd, какое апи плеера??? только тег <audio>. Не хочу я обвешивать элементарную вещь кучей "нахлебников"

@Qwerty_Wasd · 07.11.2018, 03:16

pixel,

Сообщение от pixel

какое апи плеера???

если не используете сторонние АПИ, то нативное хотя бы- https://developer.mozilla.org/... _Audio_API.

pixel,Весь плеер и его логику я за Вас писать конечно не буду. Вот простой пример как можно было бы сделать

Сообщение от Qwerty_Wasd

По событию окончания проигрывания трека, сверять путь следующего с каким-нибудь массивом \ объектом на наличие индекса\ключа. По этому индексу\ключу в объекте\массиве выбирать сеттинг(стили) и добалять элементам слайдам. и запускать событие play новому треку. Вот как-то так навскидку.

Итак - https://codepen.io/qwerty_wasd/pen/KrdXvb

HTML5

1
2

<audio id="aud" src="https://ms00.spac.me/m/082233006225248160254129082159042149015151113117151033/1541536274/67492385/0/88d5b2dd98765f70236a15beaf12c7cd/track67492385.mp3" autoplay="autoplay" controls="controls"></audio>
<div id="some-element"></div>

CSS

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
#some-element {
  height: 100px;
  width: 100px;
  background-color: rgb(255,0,0);
}

Javascript

// сформируем плейлист
const listTrack = [
  "https://ms00.spac.me/m/082233006225248160254129082159042149015151113117151033/1541536274/67492385/0/88d5b2dd98765f70236a15beaf12c7cd/track67492385.mp3",
  "https://ms21.spac.me/m/082233006225248160254129082159042149015151113117151033/1541546622/87265135/0/c5952450096e07f074d8ee2249e1e1a6/track87265135.mp3",
  "https://ms23.spac.me/m/082233006225248160254129082159042149015151113117151033/1541536274/16730890/0/31c552ad77558978d112e9e3a1969d70/track16730890.mp3",
  "https://msxd.spac.me/m/082233006225248160254129082159042149015151113117151033/1541546622/86777428/0/53cf8a52b7fc606fbdeaf1d1e6ab6061/track86777428.mp3",
  "https://ms20.spac.me/m/082233006225248160254129082159042149015151113117151033/1541546622/86634811/0/ecc019cb16a420121a59a0235e898a82/track86634811.mp3",
  "https://ms02.spac.me/m/082233006225248160254129082159042149015151113117151033/1541546863/86298707/0/5c6059ea872410511fc6313df5580c8a/track86298707.mp3"
],
      // а теперь список цветов фона, что будут меняться в соответствии с плейлистом
      settings = [
        "rgb(255, 0, 0)",
        "rgb(0, 128, 0)",
        "rgb(0, 0, 255)",
        "rgb(255, 255, 0)",
        "rgb(128, 128, 128)",
        "rgb(0, 0, 0)"
      ];
 
// получим ссылки на искомые объекты
let aud = document.getElementById('aud'),
    elem = document.getElementById('some-element');
 
// приклеим событие к HTMLAudioElement, по которому
// будет происходить следующее -
// 
aud.addEventListener('ended', e => {
  // мы проверяем значение цвета фона у #some-element на наличие в списке
  // и если оно присутствует и имеет не конечный индекс
  // то мы пропишем инлайново стиль элементу #some-element,
  // поменяв фон на следующий в списке;
  // в противном случае выставить первый
  elem.style.backgroundColor = (settings.indexOf(getComputedStyle(elem).backgroundColor) !== settings.length - 1) ?
    settings[settings.indexOf(getComputedStyle(elem).backgroundColor) + 1] : settings[0];
  
  // с каждым следующим треком проверяем результат
  console.log(getComputedStyle(elem).backgroundColor);
  
  // мы проверяем путь до трека на наличие в списке
  // и если он присутствует и имеет не конечный индекс
  // то мы помеяем его на следующий,
  // в противном случае выставить первый
  // так мы зациклим плейлист
  // и смену фона у #some-element
  e.target.src = (listTrack.indexOf(e.target.src) !== listTrack.length - 1) ?
    listTrack[listTrack.indexOf(e.target.src) + 1] : listTrack[0];
  
  // с каждым следующим треком проверяем результат
  console.log(e.target.src);
  
  // и пускаем плеер дальше
  e.target.play();
});

@pixel · 07.11.2018, 17:14 **[ТС]**

Qwerty_Wasd, в вашем примере после второго трека все останавливается, цвет синий а трека нет.

@Qwerty_Wasd · 07.11.2018, 19:03

pixel, пример рабочий, но забивать ради примеров свой хостинг лишними файлами не хочется. Поэтому я использую ссылки со сторонних ресурсов. А там не всегда грузит, или ссылки генерятся на контент(дабы не скачивали). Плюс я использовал только mp3, а этот формат не во всех браузерах может проигрываться. Но пример точно рабочий. Я ж сам проверял.

@pixel · 07.11.2018, 19:12 **[ТС]**

ясно. тем не менее я решил делать иначе. мне нет резона от цветного квадрата. решил использовать data- атрибуты. штука классная, но не ясно, можно ли пользоваться ими не только для хранения но и для поиска? Т.е. при нажатии на ссылку я получаю и урл и индекс, а вот можно ли в процессе программно находить урл по индексу?

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,269
		1
	Плавная смена фона дива 04.11.2018, 21:27. Показов 2616. Ответов 29 Метки нет (Все метки) Приветствую. Надо мне в шапке сайта тупо менять картинки - штук 8 по кругу. Использовать плагины и т.п. желания нет. Нашел статью, вроде то что надо, но у меня никак не хочет работать. В ИЕ видно быстрое промелькивание картинок до последней и все, а в хроме и лисе вообще только последняя картинка видна. Подскажите, как сделать, что бы работало? 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,269
	05.11.2018, 17:37 [ТС]	3
	Qwerty_Wasd, спасибо, работает, но подскажите, почему img? в том примере менялся бэкграунд дива. И почему в первых кейфреймах 0, 11.1, 16.6, 94.4, 100, а в последних 0, 77.7, 83.3, 94.4, 100? Хотя вроде смена происходит в один и тот же момент. 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	05.11.2018, 17:57	4
	pixel, Сообщение от pixel в том примере менялся бэкграунд дива да нет разницы, как сделать. Смысл в просчете времени анимации. Сообщение от pixel И почему в первых кейфреймах 0, 11.1, 16.6, 94.4, 100, а в последних 0, 77.7, 83.3, 94.4, 100? анимация зациклена, если последний начнет "затухать" (ну и слово) в 34 секунду(34 / 36 *100 = 94,444%), то первый в это время начнет появлятся. 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,269
	05.11.2018, 18:15 [ТС]	5
	блин, нифига не понял. Ну так если мне надо 8 снимков крутить а в вашем примере 6 - какие же мне параметры указывать? 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	05.11.2018, 18:40	6
	pixel, Сообщение от pixel какие же мне параметры указывать? по аналогии высчитывайте. Но уже для 8. Я делал для 6 потому, что мне длины листка просто не хватило В той статье, что Вы читали, там примеры даже со скринами как это делать. pixel, пару шпаргалок Вам в помощь Миниатюры 2

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	06.11.2018, 10:09	8
	Сообщение от Qwerty_Wasd pixel, пару шпаргалок Вам в помощь Ничёсе... Вот это конспекты... Это где такие выдают? 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	06.11.2018, 17:06	9
	Fedor92, Привет Ну от нефиг делать же 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	06.11.2018, 17:11	10
	Сообщение от Qwerty_Wasd Fedor92, Привет Ну от нефиг делать же Привет! Блог, что ли заведи... Тема то вниз упадёт, а этот шедевр увековечить надо... 1

@Qwerty_Wasd
	06.11.2018, 17:12 #11
	Не по теме: Fedor92, ахахахаха)))) 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,269
	06.11.2018, 21:29 [ТС]	12
	Qwerty_Wasd, наверное это слишком, но можно ли как то автоматизировать процесс смены временных интервалов смены снимков? Например, есть на сайте плеер. У каждого трека разный темп и вот от этого менять параметры смены картинок. 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	06.11.2018, 21:44	13
	pixel, Сообщение от pixel У каждого трека разный темп и вот от этого менять параметры смены картинок. то есть если музыка будет в стиле престо, то слайды должны будут меняться со скоростью пулемета? Это просто мысль. К Вам она не приходила? 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,269
	06.11.2018, 21:59 [ТС]	14
	Qwerty_Wasd, нет. если темп в 150 бпм - это не значит что слайды меняться должны с той же скоростью. В музыке есть такты. Они группируются в квадраты и т.п. Т.е. всегда можно найти к чему зацепиться. Главное как? 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	06.11.2018, 22:12	15
	pixel, изучить АПИ плеера, который Вы используете. В нем описание событий. По событию окончания проигрывания трека, сверять путь следующего с каким-нибудь массивом \ объектом на наличие индекса\ключа. По этому индексу\ключу в объекте\массиве выбирать сеттинг(стили) и добалять элементам слайдам. и запускать событие play новому треку. Вот как-то так навскидку. 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,269
	06.11.2018, 22:25 [ТС]	16
	Qwerty_Wasd, какое апи плеера??? только тег <audio>. Не хочу я обвешивать элементарную вещь кучей "нахлебников" 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,269
	07.11.2018, 17:14 [ТС]	18
	Qwerty_Wasd, в вашем примере после второго трека все останавливается, цвет синий а трека нет. 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	07.11.2018, 19:03	19
	pixel, пример рабочий, но забивать ради примеров свой хостинг лишними файлами не хочется. Поэтому я использую ссылки со сторонних ресурсов. А там не всегда грузит, или ссылки генерятся на контент(дабы не скачивали). Плюс я использовал только mp3, а этот формат не во всех браузерах может проигрываться. Но пример точно рабочий. Я ж сам проверял. 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,269
	07.11.2018, 19:12 [ТС]	20
	ясно. тем не менее я решил делать иначе. мне нет резона от цветного квадрата. решил использовать data- атрибуты. штука классная, но не ясно, можно ли пользоваться ими не только для хранения но и для поиска? Т.е. при нажатии на ссылку я получаю и урл и индекс, а вот можно ли в процессе программно находить урл по индексу? 0