for ($page = 1; $page < $repeat; $page++){
$timeline = file_get_contents('http://coub.com/api/v2/timeline/channel/'.$channel.'?page='.$page.'&per_page='.$per_page.'?order_by='.$order_by) ;
$regexp = '/"Coub::Simple","permalink":"(.+?)","title":"(.+?)","visibility_type":.+?"image_versions":\{"template":"(.+?)[%].+?version\}(.+?)"/';
preg_match_all($regexp, $timeline, $matches);
foreach ($matches[0] as $value) {
$span = '$2'; // "\"Вот она плять ,где заковыка ,при парсинге из json ☹..\"" ; //
$replacement = "<div class='coub' onmouseover='showName(this);'><a href='//coub.com/view/\\${1}1' onclick='return frame(this);'><img src='\$3small\$4'>\$2</a><span>$span</span></div>";
$echo = preg_replace($regexp, $replacement, $value) ;
echo preg_replace("~\\\\\"~", "\"", $echo) ;
}
}
.arrows-clip {
display: block;
position: fixed;
top: 50%;
margin-top: -25px;
height: 12px;
width: 50px;
}
.arrows-clip:after {
content: '';
position: absolute;
top: 5px;
left: 12px;
right:12px;
bottom: 5px;
background: blue;
height: 2px;
}
.arrows-clip .arrow-up-clip:after, .arrows-clip .arrow-up-clip:before {
content: '';
position: absolute;
top: 0;
height: 2px;
width: 15px;
background: green;
}
.arrows-clip .arrow-up-clip:after {
right: 0;
transform: rotate(45deg);
}
.arrows-clip .arrow-up-clip:before {
left: 0;
transform: rotate(-45deg);
}
.arrows-clip .arrow-down-clip:after, .arrows-clip .arrow-down-clip:before {
content: '';
position: absolute;
bottom: 0;
height: 2px;
width: 15px;
background: red;
}
.arrows-clip .arrow-down-clip:after {
right: 0;
transform: rotate(-45deg);
}
.arrows-clip .arrow-down-clip:before {
left: 0;
transform: rotate(45deg);
}
.arrows-clip {
-moz-animation: bounce-arrows 1s both 999999 ease-in-out, opacity-in 0.5s forwards 999999s reverse;
-webkit-animation: bounce-arrows 1s both 999999 ease-in-out, opacity-in 0.5s forwards 999999s reverse;
animation: bounce-arrows 1s both 999999 ease-in-out, opacity-in 0.5s forwards 999999s reverse;
}
@-moz-keyframes bounce-arrows {
0%, 100% {
width: 50px;
-moz-transform: translateX(0);
transform: translateX(0);
}
50% {
width: 70px;
-moz-transform: translateX(-10px);
transform: translateX(-10px);
}
}
@-webkit-keyframes bounce-arrows {
0%, 100% {
width: 50px;
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
width: 70px;
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
}
@keyframes bounce-arrows {
0%, 100% {
width: 50px;
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
width: 70px;
-moz-transform: translateX(-10px);
-ms-transform: translateX(-10px);
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
}