AIDE À L'ANIMATION DU CURSEUR-tutoriel CSS-php.cn

AIDE À L'ANIMATION DU CURSEUR

WBOY

Libérer： 2024-07-19 20:10:47

original

1367 Les gens l'ont consulté

SLIDER ANIMATION HELP

I have a slider with 5 images and the images have different sizes, I am trying to make the resizing animations between them work well

In this code I have animations placed on each image, the one I am interested in correcting is particularly the one for the "medium" images, the animation is prepared to go from "small" to "medium".
You can do that if I move it to the left, that is, if we have this order

1 | 2 | 3 | 4 | 5
it would look like this moving it to the left:
2 | 3 | 4 | 5 | 6.

Given this example situation, the image that has the correct animation is 5, since it goes from "small" to "medium", but the one that looks bad is 3, it would have to go from "large" to " medium".

Copier après la connexion

Image Slider

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

<code>    .slider-container {<br>
        width: 80%;<br>
        overflow: hidden;<br>
        position: relative;<br>
        height: 400px;<br>
    }
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    flex: 0 0 20%;
    box-sizing: border-box;
    transition: transform 0.5s ease;
}

.slide h2, .slide p {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.slide.hide-text h2,
.slide.hide-text p {
    display: none;
}

.show-text h2, .show-text p {
    animation: fadeIn .9s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

img {
    width: 100%;
    display: block;
    margin: 5px 0;
}

.small {
    margin-top: 48px;
    animation: fadeOn .5s ease forwards;
}

@keyframes fadeOn {
    from {
        scale: 0.8;
    }
    to {
        scale: .7;
    }
}

.medium {
    margin-top: 67px;
    animation: fadeOn-2 .5s ease forwards;
}

@keyframes fadeOn-2 {
    from {
        scale: 0.7;
    }
    to {
        scale: .9;
    }
}

.large {
    margin: 0 4px;
    animation: fadeOn-3 .5s ease forwards;
}

@keyframes fadeOn-3 {
    from {
        scale: 0.85;
    }
    to {
        scale: 1;
    }
}



.nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.prev, .next {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
}

div {
    display: flex;
    flex-direction: column;
}

h2,p {
    text-align: center;
}

p {
    font-size: 10px;
    margin-top: -20px;
}

Copier après la connexion

</style>

let slideIndex = 0;

const slides = document.getElementsByClassName("slide");

const slider = document.querySelector(".slider");

const slidesToShow = 5;

const slideWidth = 100 / slidesToShow;

function showSlides() {

slider.style.transform = 'translateX(' + (-slideIndex * slideWidth) + '%)';

<code>for (let i = 0; i < slides.length; i++) {<br> slides[i].classList.remove("small", "medium", "large", "hide-text", "show-text");</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">if (i === (slideIndex + 2) % slides.length) { slides[i].classList.add("large"); slides[i].classList.add("show-text"); } else if (i === (slideIndex + 1) % slides.length || i === (slideIndex + 3) % slides.length) { slides[i].classList.add("medium", "hide-text"); } else if (i === slideIndex || i === (slideIndex + 4) % slides.length) { slides[i].classList.add("small", "hide-text"); } else { slides[i].classList.add("small", "hide-text"); }