Joomla 4. Компонент K2 и форк K2ForJ4 (18 янв 2024)

Если вас, как и меня, достало выслушивать (вычитывать) бесконечные обещания разработчика K2 опубликовать версию компонента K2 под Joomla 4 (без чего невозможно реализовать апгрейд from Joomla 3 to Joomla 4) - воспользуйтесь форком K2ForJ4. Который в данный момент установлен и без каких-либо проблем работает на этом веб-сайте.

Про Liffect - jQuery effects for lists, php и scandir

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


index.php
Code:
<!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
Code:
$(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
Code:
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); } }

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

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

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

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

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


уже давно.

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

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

Больше
4 года 9 мес. назад #4 от Aleksej
Файл стилей Liffect из веб-архива Google (на его основе полностью доступны все эффекты, перечисленные в демке):
Code:
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
Code:
<!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/

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

Работает на Kunena форум