Animovaný zásobník fotografií CSS3

V tomto tutoriálu vytvoříme zásobník animovaných fotografií, který bude používat všechny druhy efektních efektů k přechodu mezi sadou obrázků. Efekty jsou implementovány čistě pomocí CSS3, což znamená, že běží hladce na moderních prohlížečích a mobilních zařízeních. Zásobník fotografií také automaticky posuneme, takže jej můžete použít jako prezentaci.

HTML

Jako vždy je prvním krokem představení označení příkladu. Začínáme s běžným HTML5 dokumentem, do kterého vkládáme řadu CSS/JS souborů:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <title>Animated CSS3 Photo Stack | Tutorialzine Demo</title>

    <!-- CSS Includes -->
    <link href="assets/css/style.css" rel="stylesheet" />
    <link href="assets/css/animate.css" rel="stylesheet" />

</head>
<body>

    <ul id="photos">
        <li><a href="http://www.flickr.com/photos/brockwhittaker/8500935165/"
        style="background-image:url(...)">Landscape 5</a></li>
        <!-- More photos here -->
    </ul>

    <a href="#" class="arrow previous"></a>
    <a href="#" class="arrow next"></a>

    <!-- Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="assets/js/script.js"></script>

</body>
</html>

# fotky UL drží fotografie, které budeme animovat. Pro každou fotografii jsem definoval položku LI s kotvícím prvkem uvnitř. Obrázek je nastaven jako vlastnost background-image odkazu. Jak uvidíte v části CSS, používám vlastnost background-size k tomu, aby obrázek pokryl celou šířku a výšku odkazu. Při přidávání dalších fotek mějte na paměti, že protože jsou umístěny absolutně, zobrazí se v opačném pořadí (poslední fotka bude nahoře).

V hlavičce dokumentu uvádím náš hlavní stylový list a animate.css - knihovnu, která nám poskytuje ty nádherné animace CSS3. Před závěrečnou značkou body máme knihovnu jQuery a skript script.js, o kterých budeme diskutovat dále.

JavaScript

Abychom spustili efekty, které nám poskytuje knihovna animací, musíme prvku přiřadit název třídy s názvem animace. Po dokončení animace také budeme muset přesunout animovanou fotografii ve spodní části zásobníku, abychom mohli zobrazit další obrázek. Zde je to, co musíme udělat, aby tento příklad fungoval:

  • Nejprve budeme poslouchat kliknutí na šipky;
  • Když pak dojde ke kliknutí na další šipku, spustíme náhodně vybranou animaci CSS přiřazením názvu třídy k nejvyššímu prvku zásobníku (toto je ve skutečnosti poslední položka LI kvůli umístění);
  • li>
  • Po jedné sekundě, když se animace dokončí, přesuneme animovaný prvek před ostatní LI pomocí metody prependTo jQuery (tím se přesune na konec zásobníku) a odstraníme třídy, které jsme přiřadili výše.
  • U předchozí šipky uděláme téměř totéž, jen s tím rozdílem, že vezmeme poslední obrázek a před spuštěním animace jej umístíme na vrchol zásobníku.

Kromě toho přidám také funkci automatického posunu, jako jsme to udělali v tomto článku. Tím se příklad změní na skvělou prezentaci, která zastaví automatické přechody, když kliknete na jednu ze šipek.

Kód vypadá takto:

assets/js/script.js

$(function() {

    var exits = ['fadeOut', 'fadeOutDown', 'fadeOutUpBig', 'bounceOut', 'bounceOutDown',
        'hinge', 'bounceOutUp', 'bounceOutLeft', 'rotateOut', 'rotateOutUpLeft',
        'lightSpeedOut', 'rollOut'];

    var entrances = ['fadeIn', 'fadeInDown', 'fadeInRight', 'bounceIn', 'bounceInRight',
            'rotateIn', 'rotateInDownLeft', 'lightSpeedIn', 'rollIn', 'bounceInDown']; 

    var photos = $('#photos'),
        ignoreClicks = false;

    $('.arrow').click(function(e, simulated){
        if(ignoreClicks){

            // If clicks on the arrows should be ignored,
            // stop the event from triggering the rest
            // of the handlers

            e.stopImmediatePropagation();
            return false;
        }

        // Otherwise allow this click to proceed,
        // but raise the ignoreClicks flag

        ignoreClicks = true;

        if(!simulated){
            // Once the user clicks on the arrows,
            // stop the automatic slideshow
            clearInterval(slideshow);
        }
    });

    // Listen for clicks on the next arrow
    $('.arrow.next').click(function(e){

        e.preventDefault();

        // The topmost element
        var elem = $('#photos li:last');

        // Apply a random exit animation
        elem.addClass('animated')
            .addClass( exits[Math.floor(exits.length*Math.random())] );

        setTimeout(function(){

            // Reset the classes
            elem.attr('class','').prependTo(photos);

            // The animation is complate!
            // Allow clicks again:
            ignoreClicks = false;

        },1000);
    });

    // Listen for clicks on the previous arrow
    $('.arrow.previous').click(function(e){

        e.preventDefault();

        // The bottom-most element
        var elem = $('#photos li:first');

        // Move the photo to the top, and
        // apply a random entrance animation

        elem.appendTo(photos)
            .addClass('animated')
            .addClass( entrances[Math.floor(entrances.length*Math.random())] );

        setTimeout(function(){

            // Remove the classess
            elem.attr('class','');

            // The animation is complate!
            // Allow clicks again:
            ignoreClicks = false;

        },1000);
    });

    // Start an automatic slideshow
    var slideshow = setInterval(function(){

        // Simulate a click every 1.5 seconds
        $('.arrow.next').trigger('click',[true]);

    }, 1500);

});

Nepoužil jsem všechny efekty, které animate.css poskytuje, ale úplný seznam najdete na jeho stránce github.

Vše, co musíme udělat, je napsat několik stylů CSS.

CSS

Nebudu zde ukazovat všechny styly, pouze ty, které jsou přímo zodpovědné za zásobník fotografií:

assets/css/styles.css

#photos{
    margin:0 auto;
    padding-top:120px;
    width:450px;
    position:relative;
}

#photos li{
    position:absolute;
    width:450px;
    height:450px;
    overflow:hidden;
    background-color:#fff;
    box-shadow: 1px 1px 1px #ccc;
    z-index:10;

    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

#photos li a{
    position:absolute;
    top:6px;
    left:6px;
    right:6px;
    bottom:6px;
    background-size: cover;
    text-indent:-9999px;
    overflow:hidden;
}

Chcete-li změnit dobu trvání animací, budete muset zadat vlastnost animation-duration. Ve fragmentu výše jsem to nastavil na 1 sekundu. Další vlastnosti, které můžete nastavit, jsou animation-delay pro zpoždění před spuštěním animace a animation-itation-count pro počet opakování.

Hotovo!

Tímto je náš animovaný efekt zásobníku fotografií dokončen! Tento příklad můžete použít jako lehkou prezentaci, která funguje hladce i na mobilních zařízeních.