×
Игры с Бессознательным. Театр (03 сен 2019)

Из цикла Новые Материалы Блога.

Решено Про Liffect - jQuery effects for lists, php и scandir

Больше
2 года 11 мес. назад #1 от Aleksej
Анонс статьи Про Liffect - jQuery effects for lists, php и scandir , также обещанные рабочие скрипты:


index.php
<!DOCTYPE HTML>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="liffect.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul data-liffect="pageBottom">
<?php
$dir    = '../images/partnery';
$files = array_diff( scandir( $dir), array('..', '.'));
foreach ($files as $a) {
$i++;
echo "<li><img src=\"../images/partnery/" . $a . "\"" . "/></li>";
}
?>
</ul>
</body>
</html>


liffect.js
$(document).ready(function () {
    $("ul[data-liffect] li").each(function (i) {
        $(this).attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"
                + "-moz-animation-delay:" + i * 300 + "ms;"
                + "-o-animation-delay:" + i * 300 + "ms;"
                + "animation-delay:" + i * 300 + "ms;");
        if (i == $("ul[data-liffect] li").size() -1) {
            $("ul[data-liffect]").addClass("play")
        }
    });
});

style.css
ul[data-liffect="pageBottom"] li {
    opacity: 0;
    position: relative;
    -webkit-animation: pageBottom 600ms ease both;
    -webkit-animation-play-state: paused;
    -webkit-transform-origin: 50% 100%;
    -moz-animation: pageBottom 600ms ease both;
    -moz-animation-play-state: paused;
    -moz-transform-origin: 50% 100%;
    -o-animation: pageBottom 600ms ease both;
    -o-animation-play-state: paused;
    -o-transform-origin: 50% 100%;
    animation: pageBottom 600ms ease both;
    animation-play-state: paused;
    transform-origin: 50% 100%;
    display: inline-table;
}

ul[data-liffect="pageBottom"].play li {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes pageBottom {
    0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(-90deg); }
    100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); }
}

@-moz-keyframes pageBottom {
    0% { opacity: 0; -moz-transform: perspective(400px) rotateX(-90deg); }
    100% { opacity: 1; -moz-transform: perspective(400px) rotateX(0deg); }
}

@-o-keyframes pageBottom {
    0% { opacity: 0; -o-transform: perspective(400px) rotateX(-90deg); }
    100% { opacity: 1; -o-transform: perspective(400px) rotateX(0deg); }
}

@keyframes pageBottom {
    0% { opacity: 0; transform: perspective(400px) rotateX(-90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
3 мес. 2 нед. назад #2 от Вебмастер
Вебмастер ответил в теме Про Liffect - jQuery effects for lists, php и scandir
сайт разработчика скрипта в офлайне похоже. :(

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
3 мес. 2 нед. назад #3 от serge

Вебмастер пишет: сайт разработчика скрипта в офлайне похоже. :(


уже давно.

А я смогу! - А поглядим! - А я упрямый!

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
3 мес. 2 нед. назад #4 от Aleksej
Файл стилей Liffect из веб-архива Google (на его основе полностью доступны все эффекты, перечисленные в демке):
ul[data-liffect] li {
    opacity: 0;
    position: relative;
    animation-duration: .3s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

/* zoomIn */

ul[data-liffect="zoomIn"] li {
    animation-name: zoomIn;
}

@keyframes zoomIn {
    0% { opacity: 0; transform: scale(2); }
    100% { opacity: 1; transform: scale(1); }
}

/* zoomOut */

ul[data-liffect="zoomOut"] li {
    animation-name: zoomOut;
}

@keyframes zoomOut {
    0% { opacity: 0; transform: scale(.4); }
    100% { opacity: 1; transform: scale(1); }
}

/* fadeIn */

ul[data-liffect="fadeIn"] li {
    animation-name: fadeIn;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* slideLeft */

ul[data-liffect="slideLeft"] li {
    animation-name: slideLeft;
}

@keyframes slideLeft {
    0% { opacity: 0; left: -30px; }
    100% { opacity: 1; left: 0; }
}

/* slideRight */

ul[data-liffect="slideRight"] li {
    animation-name: slideRight;
}

@keyframes slideRight {
    0% { opacity: 0; left: 30px; }
    100% { opacity: 1; left: 0; }
}

/* slideTop */

ul[data-liffect="slideTop"] li {
    animation-name: slideTop;
}

@keyframes slideTop {
    0% { opacity: 0; top: -30px; }
    100% { opacity: 1; top: 0; }
}

/* slideBottom */

ul[data-liffect="slideBottom"] li {
    animation-name: slideBottom;
}

@keyframes slideBottom {
    0% { opacity: 0; top: 30px; }
    100% { opacity: 1; top: 0; }
}

/* flip */

ul[data-liffect="flip"] li {
    animation-name: flip;
    backface-visibility: visible !important;
}

@keyframes flip {
    0% { opacity: 0;
        transform: perspective(400px) rotateY(0);
        animation-timing-function: ease-out; }
    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg);
        animation-timing-function: ease-out; }
    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in; }
    80% {
        transform: perspective(400px) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in; }
    100% {
        opacity: 1;
        transform: perspective(400px) scale(1);
        animation-timing-function: ease-in; }
}

/* flipInX */

ul[data-liffect="flipInX"] li {
    animation-name: flipInX;
    backface-visibility: visible !important;
}

@keyframes flipInX {
    0% { opacity: 0; transform: perspective(400px) rotateX(85deg); }
    40% { transform: perspective(400px) rotateX(-20deg); }
    70% { transform: perspective(400px) rotateX(15deg); }
    90% { transform: perspective(400px) rotateX(-5deg); }
    100% { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}

/* flipInY */

ul[data-liffect="flipInY"] li {
    animation-name: flipInY;
    backface-visibility: visible !important;
}

@keyframes flipInY {
    0% { opacity: 0; transform: perspective(400px) rotateY(80deg); }
    40% { transform: perspective(400px) rotateY(-20deg); }
    70% { transform: perspective(400px) rotateY(10deg); }
    90% { transform: perspective(400px) rotateY(-5deg); }
    100% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}

/* bounceIn */

ul[data-liffect="bounceIn"] li {
    animation-name: bounceIn;
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(.3); }
    50% { transform: scale(1.05); }
    70% { transform: scale(.9); }
    100% { opacity: 1; transform: scale(1); }
}

/* bounceInUp */

ul[data-liffect="bounceInUp"] li {
    animation-name: bounceInUp;
}

@keyframes bounceInUp {
    0% { opacity: 0; transform: translateY(2000px); }
    60% { transform: translateY(-30px); }
    80% { transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* bounceInDown */

ul[data-liffect="bounceInDown"] li {
    animation-name: bounceInDown;
}

@keyframes bounceInDown {
    0% { opacity: 0; transform: translateY(-2000px); }
    60% { transform: translateY(30px); }
    80% { transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* bounceInLeft */

ul[data-liffect="bounceInLeft"] li {
    animation-name: bounceInLeft;
}

@keyframes bounceInLeft {
    0% { opacity: 0; transform: translateX(-2000px); }
    60% { transform: translateX(30px); }
    80% { transform: translateX(-10px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* bounceInRight */

ul[data-liffect="bounceInRight"] li {
    animation-name: bounceInRight;
}

@keyframes bounceInRight {
    0% { opacity: 0; transform: translateX(2000px); }
    60% { transform: translateX(-30px); }
    80% { transform: translateX(10px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* pageLeft */

ul[data-liffect="pageLeft"] li {
    animation-name: pageLeft;
    transform-origin: 0% 50%;
}

@keyframes pageLeft {
    0% { opacity: 0; transform: perspective(400px) rotateY(-90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}

/* pageLeftBack */

ul[data-liffect="pageLeftBack"] li {
    animation-name: pageLeftBack;
    transform-origin: 0% 50%;
}

@keyframes pageLeftBack {
    0% { opacity: 0; transform: perspective(400px) rotateY(90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}

/* pageRight */

ul[data-liffect="pageRight"] li {
    animation-name: pageRight;
    transform-origin: 100% 50%;
}

@keyframes pageRight {
    0% { opacity: 0; transform: perspective(400px) rotateY(90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}

/* pageRightBack */

ul[data-liffect="pageRightBack"] li {
    animation-name: pageRightBack;
    transform-origin: 100% 50%;
}

@keyframes pageRightBack {
    0% { opacity: 0; transform: perspective(400px) rotateY(-90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}

/* pageTop */

ul[data-liffect="pageTop"] li {
    animation-name: pageTop;
    transform-origin: 50% 0%;
}

@keyframes pageTop {
    0% { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}

/* pageTopBack */

ul[data-liffect="pageTopBack"] li {
    animation-name: pageTopBack;
    transform-origin: 50% 0%;
}

@keyframes pageTopBack {
    0% { opacity: 0; transform: perspective(400px) rotateX(-90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}

/* pageBottom */

ul[data-liffect="pageBottom"] li {
    animation-name: pageBottom;
    transform-origin: 50% 100%;
}

@keyframes pageBottom {
    0% { opacity: 0; transform: perspective(400px) rotateX(-90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}

/* pageBottomBack */

ul[data-liffect="pageBottomBack"] li {
    animation-name: pageBottomBack;
    transform-origin: 50% 100%;
}

@keyframes pageBottomBack {
    0% { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}

/* starwars */

ul[data-liffect="starwars"] li {
    animation-name: starwars;
    transform-origin: 50% 100%;
    animation-timing-function: ease-out;
}

@keyframes starwars {
    0% { opacity: 0; transform: perspective(200px) scale(3) translateY(180px) rotateX(80deg); }
    60% { opacity: 1; transform: perspective(200px) scale(1) rotateX(60deg) }
    100% { opacity: 1; transform: perspective(200px) scale(1) rotateX(0deg) }
}
/*
     FILE ARCHIVED ON 19:37:43 May 31, 2016 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 20:30:19 Jun 02, 2019.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  LoadShardBlock: 109.961 (3)
  esindex: 0.008
  captures_list: 130.964
  CDXLines.iter: 14.822 (3)
  PetaboxLoader3.datanode: 113.128 (5)
  exclusion.robots: 0.199
  exclusion.robots.policy: 0.185
  RedisCDXSource: 2.444
  PetaboxLoader3.resolve: 75.791 (3)
  load_resource: 146.877
*/


liffect effect for lists


, также Animated List Items in Bootstrap 3.html, весьма полезная и интересная разработка, почерпнутая здесь:
gist.github.com/JayHoltslander/ac0f6b598113f8a404f3
<!DOCTYPE html>
<html lang="en">
  <head>
    <m-eta charset="utf-8">
    <m-eta http-equiv="X-UA-Compatible" content="IE=edge">
    <m-eta name="viewport" content="width=device-width, initial-scale=1">
    <t-itle>Animated List Items in Bootstrap</title>

    <!-- Bootstrap -->
    <l-ink rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <l-ink rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <s-cript src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <s-cript src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


    <!-- Custom Reset ul and li for animated li styling in Bootstrap -->
    <s-tyle type="text/css">
      ul[data-liffect="zoomOut"] {
          -webkit-margin-before: 0;
          -webkit-margin-after: 0;
          -webkit-margin-start: 0px;
          -webkit-margin-end: 0px;
          -webkit-padding-start: 0px;
          -moz-margin-before: 0;
          -moz-margin-after: 0;
          -moz-margin-start: 0px;
          -moz-margin-end: 0px;
          -moz-padding-start: 0px;
          list-style: none;
      }
      ul[data-liffect="zoomOut"] li {
          /* Butt everything up together (Optional - Comment out if you wish) */
          margin: 0;
          padding: 0;
          border: 0;
          
          /* If not butting everything up, add some padding above and below to match the left and right padding from Bootstrap */
          /* padding-top:15px;padding-bottom:15px; */
      }
    </style>
    <!-- End of ul li reset stuff -->


    <!-- Actual Liffect generated css - http://ademilter.com/lab/liffect/ -->
    <s-tyle>
      ul[data-liffect="zoomOut"] li {
          opacity: 0;
          position: relative;
          -webkit-animation: zoomOut 300ms ease both;
          -webkit-animation-play-state: paused;
          -moz-animation: zoomOut 300ms ease both;
          -moz-animation-play-state: paused;
          -o-animation: zoomOut 300ms ease both;
          -o-animation-play-state: paused;
          animation: zoomOut 300ms ease both;
          animation-play-state: paused;
      }
      ul[data-liffect="zoomOut"].play li {
          -webkit-animation-play-state: running;
          -moz-animation-play-state: running;
          -o-animation-play-state: running;
          animation-play-state: running;
      }
      @-webkit-keyframes zoomOut {
          0% { opacity: 0; -webkit-transform: scale(.6); }
          100% { opacity: 1; -webkit-transform: scale(1); }
      }
      @-moz-keyframes zoomOut {
          0% { opacity: 0; -moz-transform: scale(.6); }
          100% { opacity: 1; -moz-transform: scale(1); }
      }
      @-o-keyframes zoomOut {
          0% { opacity: 0; -o-transform: scale(.6); }
          100% { opacity: 1; -o-transform: scale(1); }
      }
      @keyframes zoomOut {
          0% { opacity: 0; transform: scale(.6); }
          100% { opacity: 1; transform: scale(1); }
      }
    </style>


    <!-- Extra hover effect on any images in animated lists (Optional) -->
    <s-tyle>
    ul[data-liffect="zoomOut"] img:hover {
      opacity:0.6;
      filter:alpha(opacity=60); /* For IE8 and earlier */
      -webkit-transition:opacity .2s ease-in;  
    -moz-transition:opacity .2s ease-in;  
    -o-transition:opacity .2s ease-in;  
    transition:opacity .2s ease-in;   
    }
    </style>

  </head>
  <body style="background-color:#000;">


<div class="jumbotron" style="margin-bottom: 0px;">
<h1>Demo <small>Animated list items in Bootstrap 3</small></h1>
<p class="lead">A simple demo of the animated &#60;li&#62; effect built with Adem ilter's generator at: <a href="http://ademilter.com/lab/liffect/">http://ademilter.com/lab/liffect</a> but mixed with Bootstrap's grid and responsive images class.</p>
<p class="lead">Try resizing your browser window and refreshing.</p>
<a class="btn btn-lg btn-info" value="Reload Page" on-Click="document.location.reload(true)"><i class="fa fa-refresh"></i> Refresh page</a>
</div>


    <!-- <div class="container"> --> <!-- Container is optional -->


    <ul data-liffect="zoomOut">
      
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
        <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=&#60;img&#62;+in+an+&#60;li&#62;"></a></li>
      
    </ul>
    <!-- </div> --> <!-- /container that was optional -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <s-cript src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Boostrap's JavaScript -->
    <s-cript src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    
    <!-- The JavaScript generated by liffect - http://ademilter.com/lab/liffect/ -->
    <s-cript type="text/j-avascript">
      $(document).ready(function () {
          $("ul[data-liffect] li").each(function (i) {
              $(this).attr("style", "-webkit-animation-delay:" + i * 100 + "ms;"
                      + "-moz-animation-delay:" + i * 100 + "ms;"
                      + "-o-animation-delay:" + i * 100 + "ms;"
                      + "animation-delay:" + i * 100 + "ms;");
              if (i == $("ul[data-liffect] li").size() -1) {
                  $("ul[data-liffect]").addClass("play")
              }
          });
      });   
    </script>

  </body>
</html>

И, кстати, все стили Liffect по-прежнему возможно увидеть в кэше Google, демка жива:
web.archive.org/web/20171129052846/https...ter.com/lab/liffect/

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.