Thiết kế website giá rẻ

Question

I wanna make something like a infinite carousel with “moving circle”. It does work but I wanna that the circles move faster when I hover over the left field. That does work also but it have a weird behavior: it looks like there is another line of circles that move faster the whole time and one that moves normal, and when I hover over the field, the “normal” circles are invisible and the faster-moving ones are visible and when I move out it’s vice versa.
(I hope you guys understand what I mean.)

I would like that the circles move faster when I hover over the field, but without this strange behavior.

Can Anyone help me with this?

Thanks everyone in advance!

HTML:

<head>

<title>Infinite carousel</title>

</head>

<body>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</div>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</div>

</nav>

</body>

</html>

</code>

<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Infinite carousel</title> <link rel="stylesheet" href="style.css"> </head> <body> <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> </body> </html> </code>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite carousel</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <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>
</body>
</html>

CSS:

<code>

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

}

</code>

<code> @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; } </code>


@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;
}

JS:

<code>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";

})

</code>

<code>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"; }) </code>

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";
})

When hover over the left field the circles move faster but in a different way then expected

Thiết kế website giá rẻ

Danh mục

Infinite carousel weird behavior when moving faster