搜索

首页 >web前端 >css教程 >滑块动画帮助

滑块动画帮助

WBOY
WBOY原创
2024-07-19 20:10:471369浏览

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".

`

8b05045a5be5764f313ed5b9168a17e6









Image Slider

0c6dc11e160d3b678d68754cc175188a
body {0c6dc11e160d3b678d68754cc175188a
font-family: Arial, sans-serif;0c6dc11e160d3b678d68754cc175188a
background-color: #f0f0f0;0c6dc11e160d3b678d68754cc175188a
display: flex;0c6dc11e160d3b678d68754cc175188a
justify-content: center;0c6dc11e160d3b678d68754cc175188a
align-items: center;0c6dc11e160d3b678d68754cc175188a
height: 100vh;0c6dc11e160d3b678d68754cc175188a
margin: 0;0c6dc11e160d3b678d68754cc175188a
}94b3e26ee717c64999d7867364b1b4a3
14e50fb5b5ef9eb68646454a317495402d27ea46073e115c6f7c93ace2cf5f0cffbe95d20f3893062224282accb13e8f .slider-container {
width: 80%;
overflow: hidden;
position: relative;
height: 400px;
} 
.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;
}

</style>
1cd55414ff5abdfea5dd958e7e547fddbc5574f69a0cba105bc93bd3dc13c4ec16b28748ea4df4d9c2150843fecfba68
e388a4556c0f65e1904146cc1a846bee9c3bca370b5104690d9ef395f2c5f8d10c6dc11e160d3b678d68754cc175188a
6c04bd5ca3fcae76e30b72ad730ca86d0c6dc11e160d3b678d68754cc175188a
3a52bdfa5a319f9d28eb2a25858a044f0c6dc11e160d3b678d68754cc175188a
1251f7855b5d17ed2131bc6626bc3bb10c6dc11e160d3b678d68754cc175188a
e2f64bb12820c6a3fe360bc68473d1220c6dc11e160d3b678d68754cc175188a
c1a436a314ed609750bd7c7d319db4daSERVICES2e9b454fa8428549ca2e64dfac4625cd0c6dc11e160d3b678d68754cc175188a
5aa13e25cca19aa365c2ff076a761f070c6dc11e160d3b678d68754cc175188a
e388a4556c0f65e1904146cc1a846beeCreate an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.94b3e26ee717c64999d7867364b1b4a30c6dc11e160d3b678d68754cc175188a
16b28748ea4df4d9c2150843fecfba680c6dc11e160d3b678d68754cc175188a
e2f64bb12820c6a3fe360bc68473d1220c6dc11e160d3b678d68754cc175188a
c1a436a314ed609750bd7c7d319db4daSERVICES2e9b454fa8428549ca2e64dfac4625cd0c6dc11e160d3b678d68754cc175188a
f687af6d1d0c35db57e1f5dee6fa6f730c6dc11e160d3b678d68754cc175188a
e388a4556c0f65e1904146cc1a846beeCreate an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.94b3e26ee717c64999d7867364b1b4a30c6dc11e160d3b678d68754cc175188a
16b28748ea4df4d9c2150843fecfba680c6dc11e160d3b678d68754cc175188a
e2f64bb12820c6a3fe360bc68473d1220c6dc11e160d3b678d68754cc175188a
c1a436a314ed609750bd7c7d319db4daSERVICES2e9b454fa8428549ca2e64dfac4625cd0c6dc11e160d3b678d68754cc175188a
6488869014b245e8ba78466ac7fdf13b0c6dc11e160d3b678d68754cc175188a
e388a4556c0f65e1904146cc1a846beeCreate an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.94b3e26ee717c64999d7867364b1b4a30c6dc11e160d3b678d68754cc175188a
16b28748ea4df4d9c2150843fecfba680c6dc11e160d3b678d68754cc175188a
e2f64bb12820c6a3fe360bc68473d1220c6dc11e160d3b678d68754cc175188a
c1a436a314ed609750bd7c7d319db4daSERVICES2e9b454fa8428549ca2e64dfac4625cd0c6dc11e160d3b678d68754cc175188a
b712c72a742e604184bfbc80c984d4cf0c6dc11e160d3b678d68754cc175188a
e388a4556c0f65e1904146cc1a846beeCreate an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.94b3e26ee717c64999d7867364b1b4a30c6dc11e160d3b678d68754cc175188a
16b28748ea4df4d9c2150843fecfba680c6dc11e160d3b678d68754cc175188a
e2f64bb12820c6a3fe360bc68473d1220c6dc11e160d3b678d68754cc175188a
c1a436a314ed609750bd7c7d319db4daSERVICES2e9b454fa8428549ca2e64dfac4625cd0c6dc11e160d3b678d68754cc175188a
ddc7e23c127e45b2fefc8dd3a776db7d0c6dc11e160d3b678d68754cc175188a
e388a4556c0f65e1904146cc1a846beeCreate an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.94b3e26ee717c64999d7867364b1b4a30c6dc11e160d3b678d68754cc175188a
16b28748ea4df4d9c2150843fecfba680c6dc11e160d3b678d68754cc175188a
e2f64bb12820c6a3fe360bc68473d1220c6dc11e160d3b678d68754cc175188a
c1a436a314ed609750bd7c7d319db4daSERVICES2e9b454fa8428549ca2e64dfac4625cd0c6dc11e160d3b678d68754cc175188a
3b01645faef0b88efff176fb0ac745e80c6dc11e160d3b678d68754cc175188a
e388a4556c0f65e1904146cc1a846beeCreate an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.94b3e26ee717c64999d7867364b1b4a30c6dc11e160d3b678d68754cc175188a
16b28748ea4df4d9c2150843fecfba680c6dc11e160d3b678d68754cc175188a
e2f64bb12820c6a3fe360bc68473d1220c6dc11e160d3b678d68754cc175188a
c1a436a314ed609750bd7c7d319db4daSERVICES2e9b454fa8428549ca2e64dfac4625cd0c6dc11e160d3b678d68754cc175188a
05f71ab26d5b0683df3fbf118da443f60c6dc11e160d3b678d68754cc175188a
e388a4556c0f65e1904146cc1a846beeCreate an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.94b3e26ee717c64999d7867364b1b4a30c6dc11e160d3b678d68754cc175188a
16b28748ea4df4d9c2150843fecfba680c6dc11e160d3b678d68754cc175188a
e2f64bb12820c6a3fe360bc68473d1220c6dc11e160d3b678d68754cc175188a
c1a436a314ed609750bd7c7d319db4daSERVICES2e9b454fa8428549ca2e64dfac4625cd0c6dc11e160d3b678d68754cc175188a
8daae30796b14ae3add493a7aefad8790c6dc11e160d3b678d68754cc175188a
e388a4556c0f65e1904146cc1a846beeCreate an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.94b3e26ee717c64999d7867364b1b4a30c6dc11e160d3b678d68754cc175188a
16b28748ea4df4d9c2150843fecfba680c6dc11e160d3b678d68754cc175188a
e2f64bb12820c6a3fe360bc68473d1220c6dc11e160d3b678d68754cc175188a
c1a436a314ed609750bd7c7d319db4daTITLE2e9b454fa8428549ca2e64dfac4625cd0c6dc11e160d3b678d68754cc175188a
686c1925469de537481ac9e2ee79a33f0c6dc11e160d3b678d68754cc175188a
e388a4556c0f65e1904146cc1a846beeCreate an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.94b3e26ee717c64999d7867364b1b4a30c6dc11e160d3b678d68754cc175188a
16b28748ea4df4d9c2150843fecfba680c6dc11e160d3b678d68754cc175188a
e2f64bb12820c6a3fe360bc68473d1220c6dc11e160d3b678d68754cc175188a
c1a436a314ed609750bd7c7d319db4daTITLE2e9b454fa8428549ca2e64dfac4625cd0c6dc11e160d3b678d68754cc175188a
8c8054984fee37ebc98d74f3ad8e98a30c6dc11e160d3b678d68754cc175188a
e388a4556c0f65e1904146cc1a846beeCreate an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.94b3e26ee717c64999d7867364b1b4a30c6dc11e160d3b678d68754cc175188a
16b28748ea4df4d9c2150843fecfba680c6dc11e160d3b678d68754cc175188a
44f9630a3d507ae7532760da37622b0f0c6dc11e160d3b678d68754cc175188a
83ee86ded4c3a68f2e2b66bcf4b4b5610c6dc11e160d3b678d68754cc175188a
618e3d2f0d8629b0a4d82da82a2f6e0e❮65281c5ac262bf6d81768915a4a77ac00c6dc11e160d3b678d68754cc175188a
b0d12e3bfaf97ca5c6d008e012d8f89b❯65281c5ac262bf6d81768915a4a77ac00c6dc11e160d3b678d68754cc175188a
44f9630a3d507ae7532760da37622b0f0c6dc11e160d3b678d68754cc175188a
4d7ab0de9a42de71c682b0860bad141094b3e26ee717c64999d7867364b1b4a3
14e50fb5b5ef9eb68646454a317495402d27ea46073e115c6f7c93ace2cf5f0cffbe95d20f3893062224282accb13e8f<script>
1cd55414ff5abdfea5dd958e7e547fddbc5574f69a0cba105bc93bd3dc13c4ec16b28748ea4df4d9c2150843fecfba68
e388a4556c0f65e1904146cc1a846beelet slideIndex = 0;0c6dc11e160d3b678d68754cc175188a
const slides = document.getElementsByClassName("slide");0c6dc11e160d3b678d68754cc175188a
const slider = document.querySelector(".slider");0c6dc11e160d3b678d68754cc175188a
const slidesToShow = 5;0c6dc11e160d3b678d68754cc175188a
const slideWidth = 100 / slidesToShow;94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beefunction plusSlides(n) {0c6dc11e160d3b678d68754cc175188a
slideIndex += n;0c6dc11e160d3b678d68754cc175188a
if (slideIndex > slides.length - slidesToShow) {0c6dc11e160d3b678d68754cc175188a
slideIndex = 0;0c6dc11e160d3b678d68754cc175188a
} else if (slideIndex < 0) {0c6dc11e160d3b678d68754cc175188a
slideIndex = slides.length - slidesToShow;0c6dc11e160d3b678d68754cc175188a
}0c6dc11e160d3b678d68754cc175188a
showSlides();0c6dc11e160d3b678d68754cc175188a
}94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beefunction showSlides() {0c6dc11e160d3b678d68754cc175188a
slider.style.transform = 'translateX(' + (-slideIndex * slideWidth) + '%)';94b3e26ee717c64999d7867364b1b4a3
14e50fb5b5ef9eb68646454a317495402d27ea46073e115c6f7c93ace2cf5f0cffbe95d20f3893062224282accb13e8ffor (let i = 0; i < slides.length; i++) {
slides[i].classList.remove("small", "medium", "large", "hide-text", "show-text");

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

}
1cd55414ff5abdfea5dd958e7e547fddbc5574f69a0cba105bc93bd3dc13c4ec16b28748ea4df4d9c2150843fecfba68
e388a4556c0f65e1904146cc1a846bee}94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeshowSlides();0c6dc11e160d3b678d68754cc175188a
2cacc6d41bbb37262a98f745aa00fbf00c6dc11e160d3b678d68754cc175188a
36cc49f0c466276486e50c850b7e49560c6dc11e160d3b678d68754cc175188a
73a6ac4ed44ffec12cee46588e518a5e0c6dc11e160d3b678d68754cc175188a
`94b3e26ee717c64999d7867364b1b4a3

以上是滑块动画帮助的详细内容。更多信息请关注PHP中文网其他相关文章！

html if for const continue class Length function this location display position overflow margin background transform animation flex
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Creating a Stylish Blog Card with Dynamic Background Animations下一篇：CSS Variables : The Key to Empowering Your Stylesheets

相关文章

查看更多