Autor Zpráva
Hapipo
Profil
Ahoj,
potřeboval bych pomoc. Na webu www.covid.jans.cz mám počítadlo a animace se zapne když udělám refresh stránky. Potřeboval bych, aby počítadlo spustilo, až k měnu dojedu. Prosím o radu.
mckay
Profil
Hapipo:
Pro lidi, co na Tvou stránku mají zavítat by bylo určitě pohodlné, kdyby sis opravil ten HTTPS certifikát. Momentálně to háže výjimku, protože není nakonfigurovaný pro zmíněnou subdoménu.

K detekci toho, zda je element na obrazovce viditelný se dá použít IntersectionObserver API.

Použít to jde asi takhle:
1. Na element, jehož viditelnost chceš detekovat připni nějaký ID (zde pocitadlo)
2. Vykonej obdobu následujícího kódu po plném načtení obsahu stránky:
let animaceSpustena = false;
let observer = new IntersectionObserver(function(e) {
        if(e[0].isIntersecting === true && !animaceSpustena){
            volani_funkce_ktera_zacne_animovat_pocitadlo();
            animaceSpustena = true;
            }
        }, { threshold: [1] }); 

observer.observe(document.querySelector("#pocitadlo"));

Ten threshold 1 říká, že chceme, aby celý ten objekt s ID pocitadlo byl již vidět. 1 == 100% elementu je již zobrazeno, 0 == 0% elementu je zobrazeno.

Podmínka na proměnnou animaceSpustena zajistí, že se to počítadlo spustí pouze jednou a nebude se to dít pokaždé, když uživatel odscrolluje jinam.
Hapipo
Profil
mckay:
Děkuji moc za radu. Jen jsem chtěl ještě poprosit, zkoušel jsem to včera mnohokrát do toho scriptu zasadit, ale nejde mi to - javascript neumím. Mohl by jsi mi prosím pomoc. Chtěli bychom web už spustit naplno, aby pomáhal tam, kde je potřeba. Moc děkuji!

<section id="pocet">
            <center>
                <div class="center">
                    <div class="header-pozitiv">
                        <span class="title-pozitiv">SPOLEČNÝ ÚSPĚCH</span>
                        <hr>
                    </div>
                    <div data-aos="fade-down-left"><img src="imgs/vir3.svg" class="img-vir3"></div>
                    <div class="container-pocitadlo" id="pocitadlo">
                        <div class="row-pocitadlo" id="pocitadlo">
                            <div class="pocitadlo-box">
                                <i class="fas fa-cubes" id="pocitadlo"></i>
                                <span class="pocitadlo" id="pocitadlo">111</span>
                                <p>DAROVANÝ MATERIÁL</p>
                            </div>
                            <div class="pocitadlo-box colored">
                                <i class="fas fa-shield-alt"></i>
                                <span class="pocitadlo" id="pocitadlo">931</span>
                                <p>VYROBENO ŠTÍTŮ</p>
                            </div>
                            <div class="pocitadlo-box">
                                <i class="fas fa-money-bill-alt" ></i>
                                <span class="pocitadlo" id="pocitadlo">14500</span>
                                <p>VYBRÁNO KORUN</p>
                            </div>
                        </div>
                        <script>
                            $(document).ready(function() {

                            $('.pocitadlo').each(function () {
                            $(this).prop('pocitadlo',0).animate({
                            pocitadlo: $(this).text()
                            }, {
                            duration: 4000,
                            easing: 'swing',
                            step: function (now) {
                            $(this).text(Math.ceil(now));
                            }
                            });});});
                        </script>
                        </div>
                </div>
            </center>
        </section>
mckay
Profil
Hapipo:
ale nejde mi to - javascript neumím
No, a ani nikdy umět nebudete, pokud se nebudete snažit. :) Ten markup sám o sobě mimo jiné obsahuje asi tisíc věcí s ID pocitadlo (stejné ID má být v dokumentu pouze jednou a má to svůj důvod).

V uvedeném kódu se mezi tagy <script> a </script> nachází nějaký javascript kód. Je to ten kód, který Vám to počítadlo animuje. Vezměte ho a vložte ho do funkce. Asi takhle:

function spustAnimaciPocitadla() {
$(document).ready(function() {
 
                            $('.pocitadlo').each(function () {
                            $(this).prop('pocitadlo',0).animate({
                            pocitadlo: $(this).text()
                            }, {
                            duration: 4000,
                            easing: 'swing',
                            step: function (now) {
                            $(this).text(Math.ceil(now));
                            }
                            });});});
}


Pak použijte kód, který jsem Vám nabídl výše a proveďte ho, po načtení stránky, takto:

<script type="text/javascript">
    let animaceSpustena = false;
    window.addEventListener('load', () => {
        let observer = new IntersectionObserver(function(e) {
                if(e[0].isIntersecting === true && !animaceSpustena){
                    spustAnimaciPocitadla();
                    animaceSpustena = true;
                    }
                }, { threshold: [1] }); 
        
        observer.observe(document.querySelector("#pocitadlo"));
    });
    </script>

Za předpokladu, že jsem v kódu nikde neudělal chybu, mělo by to takhle stačit (a pokud ne, tak vězte, že tady, jako všude jinde, nějaké minimální úsilí na Vaší straně je vyžadováno). Řešení je to velmi suboptimální, ale optimalizací se asi nemá smysl se příliš zabývat, vzhledem k povaze projektu a zbytku kódu tam. :-)


Hapipo:
Chtěli bychom web už spustit naplno, aby pomáhal tam, kde je potřeba.
Ještě bych se rád pozastavil nad tímto. Vaše iniciativa je super a fandím Vám. Tu překážku, že se web nemůže ale v momentálním stavu spustit si ale stavíte do cesty sám. Opravdu je animace počítadla nezbytně nutná ke spuštění webu? Dovolím si nesouhlasit. Obzvlášť v porovnání s tím, jakou překážkou je ten nefunkční HTTPS certifikát. Ze zkušenosti vím, že typický netechnický uživatel ze stránky okamžitě vycouvá, když na něj vyskočí prohlížečové upozornění, že by mohli být v nebezpečí.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0