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

Post Reply
User avatar
Ticketa
Турист
Турист
Posts: 520
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

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

Post by Ticketa » Sun Mar 31, 2019 9:16 am

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


Прилагам снимка
Image

joTunkiq
Потребител
Потребител
Posts: 827
Joined: Tue Dec 25, 2012 10:03 am
Answers: 142
Contact:

Post by joTunkiq » Sun Mar 31, 2019 6:40 pm


User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Sun Mar 31, 2019 7:41 pm

Ако те разбирам правилно, това можеш да го постигнеш и само с css.

Code: Select all

filter: blur(8px);
  -webkit-filter: blur(8px);

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1589
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Mon Apr 01, 2019 9:15 am

teroristd wrote:Ако те разбирам правилно, това можеш да го постигнеш и само с css.

Code: Select all

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

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Mon Apr 01, 2019 9:50 am

anonimen wrote:
teroristd wrote:Ако те разбирам правилно, това можеш да го постигнеш и само с css.

Code: Select all

filter: blur(8px);
  -webkit-filter: blur(8px);
Ама това блурва вече заредено съдържание. Мисля, че идеята на Тикета е това да се показва още докато се зарежда съдържанието, както например става във FB.
Ако е така може би един onload event, в комбинация с цсс-а ще даде желания резултат.

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1589
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Mon Apr 01, 2019 11:02 am

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

User avatar
Ticketa
Турист
Турист
Posts: 520
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

Post by Ticketa » Sun Apr 07, 2019 12:11 pm

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

@joTunkiq, получаваш възнаграждение за ползотворната помощ +1

User avatar
Ticketa
Турист
Турист
Posts: 520
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

Re:

Post by Ticketa » Sun Apr 12, 2020 9:34 pm

Ужасно кофти е това , което ползвам:

Code: Select all

<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>

Code: Select all

	// 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();
//    })

Code: Select all


<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> тага.

Някой да предложи нещо , което да го доукраси ?

User avatar
Revelation
Web-tourist
Web-tourist
Posts: 891
Joined: Sun Mar 24, 2013 1:23 pm
Answers: 63

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

Post by Revelation » Mon Apr 13, 2020 10:31 am

https://www.cssscript.com/skeleton-load ... er/нагласи си си го, както смяташ, че съдържанието ти ще изглежда.

Post Reply