×
Ruby on Rails: постинг твитов через Twitter API (04 нояб 2017)

Практикуемся в Ruby on Rails.

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

Больше
1 год 1 мес. назад #1 от Aleksej
Aleksej создал эту тему: Про Liffect - jQuery effects for lists, php и scandir
Анонс статьи Про 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); }
}

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