HTML5一款带Slider功能的动画卡片模板

卡片入场时带微微的晃动效果。

html5, template, card

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3538
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function nextSlide() {
    var active = $(".sliderItem.active"),
        activeIndex = $(active).index(),
        totalIndex = $(".sliderItem").length,
        next_item = 0

if (activeIndex + 1 > totalIndex - 1) {
        next_item = 0
    } else {
        next_item = activeIndex + 1
    }

$(active).removeClass("active")
    $(".sliderItem").eq(next_item).addClass("active");

var activeNow = $(".sliderItem.active"),
        offsetContent = $(activeNow).parents(".content").offset().left,
        offsetActive = $(activeNow).offset().left,
        totalOffset = offsetActive - offsetContent

$(activeNow).parents(".content").css({
        "transform": "translate( -" + totalOffset + "px, 0px)"
    })
    $(activeNow).parents(".slider").find(".dot.active").removeClass("active");
    $(activeNow).parents(".slider").find(".dot").eq($(activeNow).index()).addClass("active");

}

function prevSlide() {
    var active = $(".sliderItem.active"),
        activeIndex = $(active).index(),
        totalIndex = $(".sliderItem").length,
        next_item = 0

if (activeIndex - 1 < 0) {
        next_item = totalIndex - 1
    } else {
        next_item = activeIndex - 1
    }

$(active).removeClass("active")
    $(".sliderItem").eq(next_item).addClass("active");

}

$(".slider").each(function() {
    var totalWidth = 0,
        $this = $(this)

$(this).find(".content").children().each(function() {
        totalWidth += $(this).outerWidth();
    });

var firstSlider = $(this).find(".content").find(".sliderItem").first();

if (!$(firstSlider).hasClass("active")) {
        $(firstSlider).addClass("active");
    }

$(this).find(".content").width(totalWidth);

var totalSliderItems = $(this).find(".content").find(".sliderItem").length

for (i = 0; i < totalSliderItems; i++) {
        $($this).find(".buttons").find(".pagination").append('<div class="dot"></div>')
    }

var activeIndex = $($this).find(".content").find(".sliderItem.active").index()

$($this).find(".dot").eq(activeIndex).addClass("active")

});

$(".nextButton").on('click', function(e) {
    e.preventDefault();
    nextSlide();
});

$(".prevButton").on('click', function(e) {
    e.preventDefault();
    prevSlide();
});

$(".dot").on('click', function() {
    var setEqIndex = $(this).index();

$(this).parents(".slider").find(".content").find(".sliderItem.active").removeClass("active");
    $(this).parents(".slider").find(".content").find(".sliderItem").eq(setEqIndex).addClass("active");
    $(this).parents(".pagination").find(".dot.active").removeClass("active");
    Path2D
    $(this).addClass("active");

var activeNow = $(this).parents(".slider").find(".content").find(".sliderItem").eq(setEqIndex),
        offsetContent = $(activeNow).parents(".content").offset().left,
        offsetActive = $(activeNow).offset().left,
        totalOffset = offsetActive - offsetContent

$(activeNow).parents(".content").css({
        "transform": "translate( -" + totalOffset + "px, 0px)"
    })

});

编译

CSS

* {
    box-sizing: border-box;
}
body {
    background: linear-gradient(45deg, #4ea1d3, #256b96);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Raleway", sans-serif;
}
.card {
    width: 320px;
    background: white;
    border-radius: 7.5px;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5);
}
.card .slider {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card .slider .buttons {
    padding: 40px;
    padding-top: 0;
    padding-bottom: 20px;
}
.card .slider .buttons .controls {
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.card .slider .buttons .controls .prevButton,
.card .slider .buttons .controls .nextButton {
    color: #444;
    font-size: 50px;
    transition: 0.15s ease-in-out;
    cursor: pointer;
}
.card .slider .buttons .controls .prevButton:hover,
.card .slider .buttons .controls .nextButton:hover {
    color: #E53A40;
}
.card .slider .buttons .pagination {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
.card .slider .buttons .pagination .dot {
    width: 8px;
    height: 8px;
    background: #444;
    border-radius: 8px;
    margin: 0 10px;
    transition: 0.15s ease-in-out;
    cursor: pointer;
}
.card .slider .buttons .pagination .dot.active {
    background: #E53A40;
}
.card .slider .content {
    display: flex;
    flex-wrap: wrap;
    transition: 0.15s ease-in-out;
}
.card .slider .content .sliderItem {
    width: 320px;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 20px;
    pointer-events: none;
}
.card .slider .content .sliderItem.active {
    pointer-events: inherit;
}
.card .slider .content .sliderItem.active .title {
    animation: untranslate 0.5s ease-in-out forwards;
}
.card .slider .content .sliderItem.active .icon {
    animation: untranslateLeft 0.5s ease-in-out forwards;
    animation-delay: 650ms;
}
.card .slider .content .sliderItem.active .contentText {
    animation: untranslate 0.5s ease-in-out forwards;
    animation-delay: 1300ms;
}
.card .slider .content .sliderItem .title {
    font-size: 35px;
    font-weight: bold;
    transform: translate(-100%, 0px) rotate(-6deg);
    transition: 0.5s ease-in-out;
    opacity: 0;
}
.card .slider .content .sliderItem .icon {
    font-size: 125px;
    opacity: 0;
    transition: 0.5s ease-in-out;
    color: #E53A40;
    transform: translate(100%, 0px) rotate(6deg);
}
.card .slider .content .sliderItem .contentText {
    transform: translate(-100%, 0px) rotate(-6deg);
    transition: 0.5s ease-in-out;
    opacity: 0;
}
@keyframes untranslate {
    0% {
        opacity: 0;
        transform: translate(-100%, 0px) rotate(-6deg);
    }
    60% {
        transform: translate(0%, 0px) rotate(0deg);
    }
    75% {
        transform: translate(10px, 0px) rotate(4deg);
        opacity: 1;
    }
    100% {
        transform: translate(0%, 0px) rotate(0deg);
        opacity: 1;
    }
}
@keyframes untranslateLeft {
    0% {
        opacity: 0;
        transform: translate(100%, 0px) rotate(6deg);
    }
    60% {
        transform: translate(0%, 0px) rotate(0deg);
    }
    75% {
        transform: translate(-10px, 0px) rotate(-4deg);
        opacity: 1;
    }
    100% {
        transform: translate(0%, 0px) rotate(0deg);
        opacity: 1;
    }
}

HTML

</div>
        </div>
    </div>
</div>

卡片入场时带微微的晃动效果。

html5, template, card

编辑器支持Emmet

快捷键

卡片入场时带微微的晃动效果。

html5, template, card

HTML5 SwiperJS很棒的响应式水杯 | 瓶子商品展示卡片模板

HTML5 GSAP一款很棒的竖向动画广告条模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：