Ама това блурва вече заредено съдържание. Мисля, че идеята на Тикета е това да се показва още докато се зарежда съдържанието, както например става във FB.teroristd каза:Ако те разбирам правилно, това можеш да го постигнеш и само с css.
Код:filter: blur(8px); -webkit-filter: blur(8px);
anonimen каза:Ама това блурва вече заредено съдържание. Мисля, че идеята на Тикета е това да се показва още докато се зарежда съдържанието, както например става във FB.teroristd каза:Ако те разбирам правилно, това можеш да го постигнеш и само с css.
Код:filter: blur(8px); -webkit-filter: blur(8px);
Тези ефекти според мен ще са по-полезни по местата, където се случва отложено зареждане (с ajax, примерно).
<style>.timeline-item {
background: #fff;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: 3px;
padding: 12px;
margin: 0 auto;
}
@keyframes placeHolderShimmer {
0% {
background-position: -468px 0
}
100% {
background-position: 468px 0
}
}
.animated-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
height: 117px;
position: relative;
}
.timeline-item {
background: #fff;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: 3px;
padding: 12px;
margin: 0 auto;
}
.animated-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
height: 117px;
position: relative;
}
</style>
// using timeout to illustrate a delay
setTimeout(function () {
$('.timeline-wrapper').hide();
$('.shower-data').show();
}, 3000);
// get your data from server here
// $.post('getdata.php', function (data) {
// // process your data here
// hide placeholder
// $('.timeline-wrapper').hide();
// })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-5ths col-xs-6 timeline-wrapper">
<div class="timeline-wrapper" style="width: 152px; height: 117px">
<div class="timeline-item">
<div class="animated-background">
<div class="background-masker header-top"></div>
<div class="background-masker header-left"></div>
<div class="background-masker header-right"></div>
<div class="background-masker header-bottom"></div>
<div class="background-masker subheader-left"></div>
<div class="background-masker subheader-right"></div>
<div class="background-masker subheader-bottom"></div>
<div class="background-masker content-top"></div>
<div class="background-masker content-first-end"></div>
<div class="background-masker content-second-line"></div>
<div class="background-masker content-second-end"></div>
<div class="background-masker content-third-line"></div>
<div class="background-masker content-third-end"></div>
</div>
</div>
</div>
</div>
<div class="shower-data" style="display: none">
<div class="col-md-5ths col-xs-6 okopacity">
<a href="адрес"><img src="https://web-tourist.net/forum/styles/prosilver/theme/images/wt_logo.png" style="width: 152px; height: 117px;" alt="снимка" title=""/></a>
<h5><a href="адрес">заглавие</a></h5>
цена
</div>
</div>