Есть 4 текста и 8 картинок. По одному тексту на 2 картинки. Текст должен менять цвет на красный как только поменялась картинка и оставаться таким на протяжении 2-х картинок и потом менять цвет снова на черный. Как только появляется 3 картинка снова красный до тех пор пока не пройдет 4 картинка и тд. У меня проблема с таймингом. Как ее исправить?
.div-wrap {
display: flex;
align-items: center;
flex-flow: column nowrap;
justify-content: space-between;
}
/* Текст */
.div-txt p {
color: black;
font: bold 16px 'Arial';
text-align: center;
animation-duration: 24s;
animation-iteration-count: infinite;
animation-name: color-change;
}
.div-txt:nth-child(1) p:nth-child(1) { animation-delay: 0s; }
.div-txt:nth-child(1) p:nth-child(2) { animation-delay: 6s; }
.div-txt:nth-child(3) p:nth-child(1) { animation-delay: 12s; }
.div-txt:nth-child(3) p:nth-child(2) { animation-delay: 18s; }
/* Картинки */
.div-img { position: relative; height: 240px; width: 300px; }
.div-img img {
position: absolute;
top: 0;
left: 50%;
display: block;
transform: translateX(-50%);
opacity: 0;
animation-duration: 24s;
animation-iteration-count: infinite;
animation-name: fade;
}
.div-img img:nth-child(1) { animation-delay: 0s; }
.div-img img:nth-child(2) { animation-delay: 3s; }
.div-img img:nth-child(3) { animation-delay: 6s; }
.div-img img:nth-child(4) { animation-delay: 9s; }
.div-img img:nth-child(5) { animation-delay: 12s; }
.div-img img:nth-child(6) { animation-delay: 15s; }
.div-img img:nth-child(7) { animation-delay: 18s; }
.div-img img:nth-child(8) { animation-delay: 21s; }
/* Анимации */
@keyframes color-change {
0%, 25%, 100% { color: black; }
1%, 24% { color: red; }
}
@keyframes fade {
0%, 13%, 100% { opacity: 0; }
1%, 12% { opacity: 1; }
}
/* Адаптивность */
@media all and (min-width: 740px) {
.div-wrap {
flex-flow: row nowrap;
justify-content: space-around;
}
}
<div class="div-wrap">
<div class="div-txt">
<img src="img/connect.svg" style="width: 36px; height: 36px;">
<p>Connect</p>
Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text
<img src="img/connect.svg" style="width: 36px; height: 36px;">
<p>Calibrate</p>
Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text
</div>
<div class="div-img">
<img src="img/mockups/1.png" title="Image 1" style="width: 600px; height: 600px;">
<img src="img/mockups/2.png" title="Image 2" style="width: 600px; height: 600px;">
<img src="img/mockups/3.png" title="Image 3" style="width: 600px; height: 600px;">
<img src="img/mockups/4.png" title="Image 4" style="width: 600px; height: 600px;">
<img src="img/mockups/5.png" title="Image 5" style="width: 600px; height: 600px;">
<img src="img/mockups/6.png" title="Image 6" style="width: 600px; height: 600px;">
<img src="img/mockups/7.png" title="Image 7" style="width: 600px; height: 600px;">
<img src="img/mockups/8.png" title="Image 8" style="width: 600px; height: 600px;">
</div>
<div class="div-txt">
<img src="img/connect.svg" style="width: 36px; height: 36px;">
<p>Train</p>
Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text
<img src="img/connect.svg" style="width: 36px; height: 36px;">
<p>Analyze</p>
Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text
</div>
</div>
Я вижу решение так:
.div-wrap {
display: flex;
align-items: center;
flex-flow: column nowrap;
justify-content: space-between;
}
/* Текст */
.div-txt p {
color: black;
font: bold 16px 'Arial';
text-align: center;
animation-duration: 24s;
animation-iteration-count: infinite;
animation-name: color-change;
}
.div-txt:nth-child(1) p:nth-child(1) { animation-delay: 0s; }
.div-txt:nth-child(1) p:nth-child(2) { animation-delay: 6s; }
.div-txt:nth-child(3) p:nth-child(1) { animation-delay: 12s; }
.div-txt:nth-child(3) p:nth-child(2) { animation-delay: 18s; }
/* Картинки */
.div-img { position: relative; height: 240px; width: 300px; }
.div-img img {
position: absolute;
top: 0;
left: 50%;
display: block;
transform: translateX(-50%);
opacity: 0;
border: 2px solid #ccc;
animation-duration: 24s;
animation-iteration-count: infinite;
animation-name: fade;
}
.div-img img:nth-child(1) { animation-delay: 0s; }
.div-img img:nth-child(2) { animation-delay: 3s; }
.div-img img:nth-child(3) { animation-delay: 6s; }
.div-img img:nth-child(4) { animation-delay: 9s; }
.div-img img:nth-child(5) { animation-delay: 12s; }
.div-img img:nth-child(6) { animation-delay: 15s; }
.div-img img:nth-child(7) { animation-delay: 18s; }
.div-img img:nth-child(8) { animation-delay: 21s; }
/* Анимации */
@keyframes color-change {
0%, 25%, 100% { color: black; }
1%, 24% { color: red; }
}
@keyframes fade {
0%, 13%, 100% { opacity: 0; }
1%, 12% { opacity: 1; }
}
/* Адаптивность */
@media all and (min-width: 740px) {
.div-wrap {
flex-flow: row nowrap;
justify-content: space-around;
}
}
<div class="div-wrap">
<div class="div-txt">
<p>business</p>
<p>cats</p>
</div>
<div class="div-img">
<img src="//picsum.photos/300/240?image=998" title="Image 1">
<img src="//picsum.photos/300/240?image=535" title="Image 2">
<img src="//picsum.photos/300/240?image=593" title="Image 3">
<img src="//picsum.photos/300/240?image=219" title="Image 4">
<img src="//picsum.photos/300/240?image=841" title="Image 5">
<img src="//picsum.photos/300/240?image=1011" title="Image 6">
<img src="//picsum.photos/300/240?image=1016" title="Image 7">
<img src="//picsum.photos/300/240?image=976" title="Image 8">
</div>
<div class="div-txt">
<p>sports</p>
<p>nature</p>
</div>
</div>
UPD:1 После изменения разметки
.div-wrap {
display: flex;
align-items: center;
flex-flow: column nowrap;
justify-content: space-between;
text-align: center;
}
/* Текст */
.div-txt p.label {
color: black;
font: bold 16px 'Arial';
animation-duration: 24s;
animation-iteration-count: infinite;
animation-name: color-change;
}
.div-txt:nth-child(1) p.label:nth-child(2) { animation-delay: 0s; }
.div-txt:nth-child(1) p.label:nth-child(5) { animation-delay: 6s; }
.div-txt:nth-child(3) p.label:nth-child(2) { animation-delay: 12s; }
.div-txt:nth-child(3) p.label:nth-child(5) { animation-delay: 18s; }
/* Картинки */
.div-img { position: relative; height: 600px; width: 600px; border: 2px solid #ccc; }
.div-img img {
position: absolute;
top: 0;
left: 50%;
display: block;
transform: translateX(-50%);
opacity: 0;
animation-duration: 24s;
animation-iteration-count: infinite;
animation-name: fade;
}
.div-img img:nth-child(1) { animation-delay: 0s; }
.div-img img:nth-child(2) { animation-delay: 3s; }
.div-img img:nth-child(3) { animation-delay: 6s; }
.div-img img:nth-child(4) { animation-delay: 9s; }
.div-img img:nth-child(5) { animation-delay: 12s; }
.div-img img:nth-child(6) { animation-delay: 15s; }
.div-img img:nth-child(7) { animation-delay: 18s; }
.div-img img:nth-child(8) { animation-delay: 21s; }
/* Анимации */
@keyframes color-change {
0%, 25%, 100% { color: black; }
1%, 24% { color: red; }
}
@keyframes fade {
0%, 13%, 100% { opacity: 0; }
1%, 12% { opacity: 1; }
}
/* Адаптивность */
@media all and (min-width: 1170px) {
.div-wrap {
flex-flow: row nowrap;
justify-content: space-around;
}
}
<div class="div-wrap">
<div class="div-txt">
<img src="img/connect.svg" style="width: 36px; height: 36px;">
<p class="label">Connect</p>
<p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p>
<img src="img/connect.svg" style="width: 36px; height: 36px;">
<p class="label">Calibrate</p>
<p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p>
</div>
<div class="div-img">
<img src="img/mockups/1.png" title="Image 1" style="width: 600px; height: 600px;">
<img src="img/mockups/2.png" title="Image 2" style="width: 600px; height: 600px;">
<img src="img/mockups/3.png" title="Image 3" style="width: 600px; height: 600px;">
<img src="img/mockups/4.png" title="Image 4" style="width: 600px; height: 600px;">
<img src="img/mockups/5.png" title="Image 5" style="width: 600px; height: 600px;">
<img src="img/mockups/6.png" title="Image 6" style="width: 600px; height: 600px;">
<img src="img/mockups/7.png" title="Image 7" style="width: 600px; height: 600px;">
<img src="img/mockups/8.png" title="Image 8" style="width: 600px; height: 600px;">
</div>
<div class="div-txt">
<img src="img/connect.svg" style="width: 36px; height: 36px;">
<p class="label">Train</p>
<p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p>
<img src="img/connect.svg" style="width: 36px; height: 36px;">
<p class="label">Analyze</p>
<p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p>
</div>
</div>
UPD:2 Переменная для скорости
.div-wrap {
display: flex;
align-items: center;
flex-flow: column nowrap;
justify-content: space-between;
text-align: center;
}
:root{
--time: 24; /* Скорость переключения */
}
/* Текст */
.div-txt p.label {
color: black;
font: bold 16px 'Arial';
animation-duration: calc(var(--time) * 1s);
animation-iteration-count: infinite;
animation-name: color-change;
}
.div-txt:nth-child(1) p.label:nth-child(2) { animation-delay: 0s; }
.div-txt:nth-child(1) p.label:nth-child(5) { animation-delay: calc(var(--time) / 4 * 1s); }
.div-txt:nth-child(3) p.label:nth-child(2) { animation-delay: calc(var(--time) / 2 * 1s); }
.div-txt:nth-child(3) p.label:nth-child(5) { animation-delay: calc(var(--time) / 1.33 * 1s); }
/* Картинки */
.div-img {
position: relative;
height: 600px;
width: 600px;
border: 2px solid #ccc;
background: radial-gradient(ellipse at center, rgba(153,153,153,1) 0%,rgba(0,0,0,1) 100%);
}
.div-img img {
position: absolute;
top: 0;
left: 50%;
display: block;
transform: translateX(-50%);
opacity: 0;
animation-duration: calc(var(--time) * 1s);
animation-iteration-count: infinite;
animation-name: fade;
}
.div-img img:nth-child(1) { animation-delay: 0s; }
.div-img img:nth-child(2) { animation-delay: calc(var(--time) / 8 * 1s); }
.div-img img:nth-child(3) { animation-delay: calc(var(--time) / 4 * 1s); }
.div-img img:nth-child(4) { animation-delay: calc(var(--time) / 2.66 * 1s); }
.div-img img:nth-child(5) { animation-delay: calc(var(--time) / 2 * 1s); }
.div-img img:nth-child(6) { animation-delay: calc(var(--time) / 1.6 * 1s); }
.div-img img:nth-child(7) { animation-delay: calc(var(--time) / 1.33 * 1s); }
.div-img img:nth-child(8) { animation-delay: calc(var(--time) / 1.14 * 1s); }
/* Анимации */
@keyframes color-change {
0%, 25%, 100% { color: black; }
1%, 24% { color: red; }
}
@keyframes fade {
0%, 20%, 100% { opacity: 0; z-index: auto; }
1%, 99% { z-index: 1; }
8%, 12% { opacity: 1; }
}
/* Адаптивность */
@media all and (min-width: 1170px) {
.div-wrap {
flex-flow: row nowrap;
justify-content: space-around;
}
}
<div class="div-wrap">
<div class="div-txt">
<img src="img/connect.svg" style="width: 36px; height: 36px;">
<p class="label">Connect</p>
<p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p>
<img src="img/connect.svg" style="width: 36px; height: 36px;">
<p class="label">Calibrate</p>
<p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p>
</div>
<div class="div-img">
<img src="//picsum.photos/600/600?image=998" title="Image 1">
<img src="//picsum.photos/600/600?image=535" title="Image 2">
<img src="//picsum.photos/600/600?image=593" title="Image 3">
<img src="//picsum.photos/600/600?image=219" title="Image 4">
<img src="//picsum.photos/600/600?image=841" title="Image 5">
<img src="//picsum.photos/600/600?image=1011" title="Image 6">
<img src="//picsum.photos/600/600?image=1016" title="Image 7">
<img src="//picsum.photos/600/600?image=976" title="Image 8">
</div>
<div class="div-txt">
<img src="img/connect.svg" style="width: 36px; height: 36px;">
<p class="label">Train</p>
<p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p>
<img src="img/connect.svg" style="width: 36px; height: 36px;">
<p class="label">Analyze</p>
<p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p>
</div>
</div>
@keyframes fadeIm-1
{
0%{
transform: scale(0.5);
opacity: 0,5;
}
6.25% {
transform: scale(1);
opacity: 1;
}
18.75% {
transform: scale(0);
opacity: 0;
}
}
@keyframes fadeIm-2
{
0% {
transform: scale(0);
opacity: 0;
}
6.25% {
transform: scale(0);
opacity: 0;
}
18.75%{
transform: scale(1);
opacity: 1;
}
31.25% {
transform: scale(0);
opacity: 0;
}
}
@keyframes fadeIm-3
{
0% {
transform: scale(0);
opacity: 0;
}
18.75% {
transform: scale(0);
opacity: 0;
}
31.25%{
transform: scale(1);
opacity: 1;
}
43.75% {
transform: scale(0);
opacity: 0;
}
}
@keyframes fadeIm-4
{
0% {
transform: scale(0);
opacity: 0;
}
31.25% {
transform: scale(0);
opacity: 0;
}
43.75%{
transform: scale(1);
opacity: 1;
}
56.25% {
transform: scale(0);
opacity: 0;
}
}
@keyframes fadeIm-5
{
0% {
transform: scale(0);
opacity: 0;
}
43.75% {
transform: scale(0);
opacity: 0;
}
56.25%{
transform: scale(1);
opacity: 1;
}
68.75% {
transform: scale(0);
opacity: 0;
}
}
@keyframes fadeIm-6
{
0% {
transform: scale(0);
opacity: 0;
}
56.25% {
transform: scale(0);
opacity: 0;
}
68.75%{
transform: scale(1);
opacity: 1;
}
81.25% {
transform: scale(0);
opacity: 0;
}
}
@keyframes fadeIm-7
{
0% {
transform: scale(0);
opacity: 0;
}
68.75% {
transform: scale(0);
opacity: 0;
}
81.25%{
transform: scale(1);
opacity: 1;
}
93.75% {
transform: scale(0);
opacity: 0;
}
}
@keyframes fadeIm-8
{
0% {
transform: scale(0);
opacity: 0;
}
81.25% {
transform: scale(0);
opacity: 0;
}
93.75%{
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.5);
opacity: 0.5;
}
}
.div-style
{
position: relative;
text-align: center;
width: 99%;
}
.img-style
{ position: absolute;
width: 33.3%;
margin-top: 8px;
border: 1px solid #0000ff;
animation-duration: 20s;
animation-iteration-count: infinite;
}
/*.img-style.next
{
position: absolute;
left: 33.3%;
opacity: 0;
}*/
.img-style.im-1
{
animation-name: fadeIm-1;
animation-timing-function: linear;
transform: scale(0);
}
.img-style.next.im-2
{
animation-name: fadeIm-2;
animation-timing-function: linear;
transform: scale(0);
}
.img-style.next.im-3
{
animation-name: fadeIm-3;
animation-timing-function: linear;
transform: scale(0);
}
.img-style.next.im-4
{
animation-name: fadeIm-4;
animation-timing-function: linear;
transform: scale(0);
}
.img-style.next.im-5
{
animation-name: fadeIm-5;
animation-timing-function: linear;
transform: scale(0);
}
.img-style.next.im-6
{
animation-name: fadeIm-6;
animation-timing-function: linear;
transform: scale(0);
}
.img-style.next.im-7
{
animation-name: fadeIm-7;
animation-timing-function: linear;
transform: scale(0);
}
.img-style.next.im-8
{
animation-name: fadeIm-8;
animation-timing-function: linear;
transform: scale(0);
}
@keyframes color-change {
0% { color: red; }
49% {color:red;}
50% { color: black; }
99% {color: black;}
100% { color: red; }
}
p{
-webkit-animation: color-change 10s infinite;
-moz-animation: color-change 10s infinite;
-o-animation: color-change 10s infinite;
-ms-animation: color-change 10s infinite;
animation: color-change 10s infinite;
}
@-webkit-keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
@-moz-keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
@-ms-keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
@-o-keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
<p>Text1</p>
<p>Text2</p>
<p>Text3</p>
<p>Text4</p>
<div class="div-style">
<img alt="1" title="Image 1" class="img-style im-1">
<img alt="2" title="Image 2" class="img-style next im-2">
<img alt="3" title="Image 3" class="img-style next im-3">
<img alt="4" title="Image 4" class="img-style next im-4">
<img alt="5" title="Image 4" class="img-style next im-5">
<img alt="6" title="Image 4" class="img-style next im-6">
<img alt="7" title="Image 4" class="img-style next im-7">
<img alt="8" title="Image 4" class="img-style next im-8">
</div>
На 1 цвет текста приходят 2 картинки.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Можно ли вставить в поле input file картинку с этой же html стр не скачивая ее?
Изначально у всех элементов с классом "Place" цвет черный, кроме первого (у первого красный)
Допустим есть где-то блок с классом "asd" и рядом с ним нужно добавить DOM, что-то наподобиеappend\