Модификация слайд-шоу Кена Бернса - PullRequest
Новая
       66

Модификация слайд-шоу Кена Бернса

0 голосов
/ 11 июля 2020

Я нашел на Codepen слайд-шоу, которое выглядит примерно так: https://codepen.io/wh1zk1d/pen/WRJjLd

Мне нравится этот, но я просто хотел изображение с эффектом Кена Бернса, поэтому я упростил код :

Прелесть этого кода в том, что он очень прост: -) 

    #slides {
        background: #000;
        height: 450px;
        overflow: hidden;
        width: 100%;
    }

    #slides div {
        animation: ken-burns 3s ease-out;
        animation-fill-mode: both;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        width: 100%;
    }

    @keyframes ken-burns {
        from {
            transform: scale(1.2);
        } to {
            transform: scale(1);
        }
    }
    <div id="slides">
        <div style="background-image: url('https://images.unsplash.com/photo-1491609154219-ffd3ffafd992?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80')"></div>
    </div>

У меня это работает на всех моих внутренних страницах веб-сайта, который я создаю, но то, что я хотел бы сделать на домашней странице, - это использовать то же самое концепция, с небольшими изменениями, для создания слайд-шоу с несколькими изображениями (4) ...

Прямо сейчас это работает: загружается одно изображение, а затем, когда анимация завершается, она останавливается. Это отлично работает с внутренними страницами, но на домашней странице было бы неплохо, если бы это повторялось в бесконечном непрерывном l oop.

Я попытался добавить еще один div с другим фоновым изображением, но код по-прежнему работает так же. Загружает изображение в первый div, затем останавливается.

Я почти уверен, что это простая настройка, но может ли кто-нибудь помочь мне настроить то, что я уже использую, чтобы заставить работать несколько изображений (4), вместе с бесконечным непрерывным l oop этих изображений?

Спасибо, Джо sh

1 Ответ

0 голосов
/ 14 июля 2020

Итак, я нашел несколько JS, которые помогли мне заставить это работать: -)

CSS имеет некоторые незначительные изменения ... 

#slides {
    background: #000;
    height: 450px;
    overflow: hidden;
    width: 100%;
}

#slides div.current {
    animation: ken-burns 3s forwards;
    animation-fill-mode: both;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

@keyframes ken-burns {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

HTML тоже выглядит немного иначе ... 

<div id="slides">
    <div class="ini" data-imagenum="1" style="background-image: url('https://images.unsplash.com/photo-1497752531616-c3afd9760a11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80'); z-index: -1"></div>
    <div class="" data-imagenum="2" style="background-image: url('https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=80'); z-index: -2"></div>
     <div class="" data-imagenum="3" style="background-image: url('https://images.unsplash.com/photo-1486365227551-f3f90034a57c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80'); z-index: -3"></div>
    <div class="" data-imagenum="4" style="background-image: url('https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2710&q=80'); z-index: -4"></div>
</div>

Затем я добавил JS ... 

$(document).ready(function () {
    if ($('#slides div').length){
        $('.ini').addClass('current');
        var numImages = $('#slides div').length;
        var i = 1;
                
        $('body').on('webkitAnimationEnd oanimationend msAnimationEnd animationend', '.current', function() {
            i ++;
            $('.current').removeClass('current');
            if ( i <= numImages ) {
                $('*[data-imagenum="' + i +'"]').addClass('current');
            } else {
                i = 1;
                $('*[data-imagenum="' + i +'"]').addClass('current');
            }
        });
    }
});

Это было настолько близко к моему исходному коду, насколько я мог получить!

Вот Codepen: https://codepen.io/joshrodgers/pen/ZEQjZNr

...