Странное поведение бесконечной карусели при движении быстрее
Я хочу сделать что-то вроде бесконечной карусели с «движущимся кругом». Это работает, но я хочу, чтобы круги двигались быстрее, когда я навожу курсор на левое поле. Это тоже работает, но у него странное поведение: похоже, есть еще одна линия кругов, которые все время движутся быстрее, и та, которая движется нормально, и когда я навожу курсор на поле, «нормальные» круги невидимы, а более быстрые -движущиеся видны, а когда выдвигаюсь - наоборот. (Надеюсь, вы, ребята, понимаете, о чем я.)
Мне бы хотелось, чтобы при наведении курсора на поле круги двигались быстрее, но без этого странного поведения.
var left = document.querySelector(".left");
var one = document.querySelector("#one");
var two = document.querySelector("#two");
left.addEventListener("mouseover", () => {
one.style.animationDuration = "10s";
two.style.animationDuration = "10s";
})
left.addEventListener("mouseout", () => {
one.style.animationDuration = "30s";
two.style.animationDuration = "30s";
})@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 100%;
background: linear-gradient(to left, rgba(255, 255, 255, 0), #f80606);
z-index: 10;
}
.moving-circles {
overflow: hidden;
margin: 24px -128px;
padding: 24px 0;
white-space: nowrap;
background: #fff;
position: relative;
}
.first-row {
display: inline-block;
animation: 30s slide infinite linear;
}
.first-row a {
margin: 0 4px;
text-decoration: none;
}
.first-row span {
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 40px;
height: 120px;
width: 120px;
border-radius: 1000px;
border: 1px solid #000;
margin: 0 40px;
}<nav class = "moving-circles">
<div class = "left"></div>
<div class = "first-row" id = "one">
<a href = "#">
<span>0</span>
</a>
<a href = "#">
<span>1</span>
</a>
<a href = "#">
<span>2</span>
</a>
<a href = "#">
<span>3</span>
</a>
<a href = "#">
<span>4</span>
</a>
<a href = "#">
<span>5</span>
</a>
<a href = "#">
<span>6</span>
</a>
<a href = "#">
<span>7</span>
</a>
<a href = "#">
<span>8</span>
</a>
<a href = "#">
<span>9</span>
</a>
</div>
<div class = "first-row" id = "two">
<a href = "#">
<span>0</span>
</a>
<a href = "#">
<span>1</span>
</a>
<a href = "#">
<span>2</span>
</a>
<a href = "#">
<span>3</span>
</a>
<a href = "#">
<span>4</span>
</a>
<a href = "#">
<span>5</span>
</a>
<a href = "#">
<span>6</span>
</a>
<a href = "#">
<span>7</span>
</a>
<a href = "#">
<span>8</span>
</a>
<a href = "#">
<span>9</span>
</a>
</div>
</nav>
<script src = "move-faster.js"></script>Нет, я так не думаю. Наведение/отключение мыши срабатывает, как я и ожидал: когда моя мышь находится в левом поле, круги движутся быстрее, а когда я выхожу из поля, они движутся медленнее, но поведение очень странное. Можете ли вы запустить код и посмотреть, как он себя ведет?
Вместо этого вам следует использовать mouseenter и mouseleave...
Я предполагаю, что такое поведение связано с тем, что обе анимации (продолжительностью 30 и 10 с) фактически запускаются одновременно. Поэтому при переключении с одного на другой он просто пересчитывает текущую позицию переводаX на основе прошедшего времени. Таким образом, каждые 10 секунд анимация «длительность 10 секунд» всегда кратна -100%, но «длительность 30 секунд» всегда кратна -33,33%, независимо от того, когда вы переключаетесь на одну из них.
Спасибо, Мартин Шнайдер! Это имеет смысл. Есть ли у вас идеи, как избежать этого или сделать «обходной путь»?
Вам стоит посмотреть -> stackoverflow.com/questions/73764110/…
Ответы 1
Если вы хотите сделать это только с помощью CSS, вам нужно использовать еще один <div>, который будет иметь ускоренную анимацию, но на паузе. И при наведении вы его запустите. Вам также может понадобиться больше дубликатов .row.
Что-то вроде этого:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left {
position: absolute;
inset: 0 auto 0 -128px;
width: 250px;
background: linear-gradient(to left, rgba(255, 255, 255, 0), #f80606);
z-index: 10;
}
.moving-circles {
overflow: hidden;
margin: 24px 0;
padding: 24px 0;
white-space: nowrap;
position: relative;
display: flex;
&:has(.left:hover) {
.rows-wrapp {
animation-play-state: running;
}
.rows {
animation-play-state: paused;
}
}
}
.rows-wrapp {
animation: 5s slide infinite linear paused;
display: flex;
}
.rows {
display: flex;
animation: 10s slide infinite linear;
}
.row {
display: flex;
flex: none;
a {
margin: 0 44px;
text-decoration: none;
display: grid;
place-items: center;
font-size: 40px;
height: 120px;
width: 120px;
border-radius: 50%;
color: inherit;
border: 1px solid;
}
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-33.333%);
}
}<nav class = "moving-circles">
<div class = "left"></div>
<div class = "rows-wrapp">
<div class = "rows">
<div class = "row">
<a href = "#">0</a>
<a href = "#">1</a>
<a href = "#">2</a>
<a href = "#">3</a>
<a href = "#">4</a>
<a href = "#">5</a>
<a href = "#">6</a>
<a href = "#">7</a>
<a href = "#">8</a>
<a href = "#">9</a>
</div>
<div class = "row">
<a href = "#">0</a>
<a href = "#">1</a>
<a href = "#">2</a>
<a href = "#">3</a>
<a href = "#">4</a>
<a href = "#">5</a>
<a href = "#">6</a>
<a href = "#">7</a>
<a href = "#">8</a>
<a href = "#">9</a>
</div>
<div class = "row">
<a href = "#">0</a>
<a href = "#">1</a>
<a href = "#">2</a>
<a href = "#">3</a>
<a href = "#">4</a>
<a href = "#">5</a>
<a href = "#">6</a>
<a href = "#">7</a>
<a href = "#">8</a>
<a href = "#">9</a>
</div>
</div>
</div>
</nav>Большое спасибо! Это именно то, что я хотел! Похоже, вы настоящий эксперт CSS! Могу ли я попросить вас связаться с вами, чтобы пообщаться и задать еще несколько вопросов по CSS (возможно, вашего пользователя Discord, если вы используете Discord)?
Вероятно, наведение/выключение курсора мыши не срабатывает так, как вы ожидаете.