Рубрики
×
Masterpro Nivo Slider (06 фев 2023)
Это форк Vinaora Nivo Slider, пришлось переименовать, в силу требования JED. Даже старую версию качать можно было только с варезных сайтов, нашпигованную троянами. Зачем оно такое, согласитесь.
Решено Про Liffect - jQuery effects for lists, php и scandir
- Aleksej
-
Автор темы
- Не в сети
- Модератор
-
Меньше
Подробнее
7 года 1 мес. назад #1
от Aleksej
Aleksej создал тему: Про Liffect - jQuery effects for lists, php и scandir
Анонс статьи
Про Liffect - jQuery effects for lists, php и scandir
, также обещанные рабочие скрипты:
index.php
liffect.js
style.css
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); }
}Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- Вебмастер
-
- Не в сети
- Захожу иногда
-
Меньше
Подробнее
- Сообщений: 78
- Спасибо получено: 0
4 года 5 мес. назад #2
от Вебмастер
Вебмастер ответил в теме Про Liffect - jQuery effects for lists, php и scandir
сайт разработчика скрипта в офлайне похоже. 
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- serge
-
- Не в сети
- Модератор
-
Меньше
Подробнее
- Сообщений: 968
- Спасибо получено: 143
4 года 5 мес. назад #3
от serge
уже давно.
А я смогу! - А поглядим! - А я упрямый!
serge ответил в теме Про Liffect - jQuery effects for lists, php и scandir
Вебмастер пишет: сайт разработчика скрипта в офлайне похоже.
уже давно.
А я смогу! - А поглядим! - А я упрямый!
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- Aleksej
-
Автор темы
- Не в сети
- Модератор
-
4 года 5 мес. назад #4
от Aleksej
Aleksej ответил в теме Про Liffect - jQuery effects for lists, php и scandir
Файл стилей Liffect из веб-архива Google (на его основе полностью доступны все эффекты, перечисленные в демке):
liffect effect for lists
, также Animated List Items in Bootstrap 3.html, весьма полезная и интересная разработка, почерпнутая здесь:
gist.github.com/JayHoltslander/ac0f6b598113f8a404f3
И, кстати, все стили Liffect по-прежнему возможно увидеть в кэше Google, демка жива:
web.archive.org/web/20171129052846/https...ter.com/lab/liffect/
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 <li> 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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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=<img>+in+an+<li>"></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/
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.