Зареждане на страница й "замазване" на текст/бутон

Ticketa

Registered
Привет, направи ми впечатление че при зареждане на Shopify в админ.частта бутоните й текстовете излизат като "замазани" този ефект ми харесва , но не намирам как е постигнато - виждал съм го й в други платформи й ми се струва че е JS+CSS


Прилагам снимка
6915.jpg
 
Ако те разбирам правилно, това можеш да го постигнеш и само с css.
Код:
filter: blur(8px);
  -webkit-filter: blur(8px);
 
teroristd каза:
Ако те разбирам правилно, това можеш да го постигнеш и само с css.
Код:
filter: blur(8px);
  -webkit-filter: blur(8px);
Ама това блурва вече заредено съдържание. Мисля, че идеята на Тикета е това да се показва още докато се зарежда съдържанието, както например става във FB.
 
anonimen каза:
teroristd каза:
Ако те разбирам правилно, това можеш да го постигнеш и само с css.
Код:
filter: blur(8px);
  -webkit-filter: blur(8px);
Ама това блурва вече заредено съдържание. Мисля, че идеята на Тикета е това да се показва още докато се зарежда съдържанието, както например става във FB.

Ако е така може би един onload event, в комбинация с цсс-а ще даде желания резултат.
 
Тези ефекти според мен ще са по-полезни по местата, където се случва отложено зареждане (с ajax, примерно). За 'готови' елементи от UIто като бутони и текстове от ядрото на страницата не виждам смисъл да се прави това - защото те вече са пристигнали на страницата и могат да се покажат веднага.
 
@ anonimen правилно си ме разбрал , точно това ме интересуваше както е в туйтър, фейсбук, шопифай и т.н.

Тези ефекти според мен ще са по-полезни по местата, където се случва отложено зареждане (с ajax, примерно).

Съгласен.

@joTunkiq, получаваш възнаграждение за ползотворната помощ +1
 
Ужасно кофти е това , което ползвам:
Код:
<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>

Demo:
https://jsfiddle.net/5n8epugy/

Иска ми се да изглежда , че зарежда снимка, заглавие и цена оригинала е в <div> shower-data </div> тага.

Някой да предложи нещо , което да го доукраси ?
 
https://www.cssscript.com/skeleton-loader-placeholder/нагласи си си го, както смяташ, че съдържанието ти ще изглежда.
 

Горе