Show Up Phone – czysty JavaScript do wyświetlania ukrytego numeru telefonu

Dynamiczne interfejsy użytkownika odgrywa kluczową rolę w budowaniu interakcji na stronach internetowych. Jednym z interesujących efektów, który można zastosować w witrynach, jest dynamiczne odsłanianie ukrytego numeru telefonu. W tym artykule omówię mechanizm „Show Up Phone” – implementację w czystym JavaScript, która pozwala stopniowo wyświetlać ukryty numer telefonu w atrakcyjny i animowany sposób.

Poniżej szczegółowo opisuję działanie kodu.

Show Up Phone


Cel implementacji

Głównym założeniem tej funkcji jest stopniowe odkrywanie ukrytych cyfr numeru telefonu. Początkowo widoczny jest numer z zamaskowanymi cyframi, np. 33X-XXX-XXX, a po kliknięciu na odpowiedni element, ukryte cyfry są odsłaniane w animowany sposób.


Struktura HTML

HTML zawiera kontener .displayP, który pełni rolę „karty” wyświetlającej zamaskowany numer telefonu:

<div class="displayP card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" 
     style="background-image: url('https://img.freepik.com/free-photo/side-view-man-using-smartphone_23-2148793481.jpg');" 
     data-toshow="3,9,7,8,6,5,3">
    <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
        <h2 class="display-5">Orders:</h2>
        <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold block-heading">33X-XXX-XXX</h3>
        <ul class="d-flex list-unstyled mt-auto">
            <li class="me-auto">
                <i class="bi bi-phone-vibrate display-5"></i>
            </li>
            <li class="d-flex align-items-center">
                <i class="bi me-2 bi-calendar3"></i>
                <small>9AM - 7PM</small>
            </li>
        </ul>
    </div>
</div>

Atrybuty:

  1. data-toshow – zawiera ukryte cyfry numeru telefonu w formacie CSV (np. 3,9,7,8,6,5,3).
  2. block-heading – element wyświetlający numer telefonu z zamaskowanymi cyframi.

Logika JavaScript

Kod JavaScript obsługuje animację odkrywania ukrytych cyfr. Poniżej omówię najważniejsze elementy implementacji.

1. Rejestracja zdarzenia

Nasłuchujemy zdarzenia click na elementach .displayP:

document.querySelectorAll('.displayP').forEach(card => {
    card.addEventListener('click', displayP);
});

2. Obsługa kliknięcia (displayP)

Funkcja displayP:

  • Sprawdza, czy element już animuje (isAnimating).
  • Weryfikuje, czy element ma ukryte cyfry w atrybucie data-toshow.
  • Odsłania lub resetuje numer w zależności od aktualnego stanu.

3. Animacja cyfr

Wykorzystujemy funkcję animateNumber do płynnego przejścia wartości od 0 do ukrytej cyfry:

function animateNumber(element, targetNumber, callback) {
    let currentNumber = 0;
    let interval = setInterval(() => {
        element.textContent = currentNumber;
        if (currentNumber === targetNumber) {
            clearInterval(interval);
            callback();
        } else {
            currentNumber++;
        }
    }, 50); // Szybkość animacji
}

4. Odsłanianie cyfr (revealNextDigit)

Krok po kroku ujawniamy ukryte cyfry:

  • Zamaskowane cyfry (X) są zastępowane animowanymi cyframi.
  • W przypadku odsłoniętych cyfr, są one kopiowane bez zmian.
function revealNextDigit(index) {
    if (index >= defaultP.length) {
        phoneElement.setAttribute("data-revealed", "true");
        isAnimating = false;
        return;
    }

    if (defaultP[index] === 'X' && hiddenIndex < hiddenPhone.length) {
        let targetDigit = parseInt(hiddenPhone[hiddenIndex]);
        let span = document.createElement('span');
        span.textContent = "0";

        animateNumber(span, targetDigit, () => {
            span.textContent = targetDigit;
            hiddenIndex++;
            revealNextDigit(index + 1);
        });

        phoneElement.appendChild(span);
    } else {
        phoneElement.appendChild(document.createTextNode(defaultP[index]));
        revealNextDigit(index + 1);
    }
}

Działanie

  1. Pierwsze kliknięcie:
    • Cyfry ukryte pod X są ujawniane w kolejności z atrybutu data-toshow.
    • Odsłanianie następuje stopniowo dzięki animacji.
  2. Kolejne kliknięcie:
    • Numer wraca do stanu zamaskowanego.

Zalety podejścia

  1. Czysty JavaScript: Brak zależności od zewnętrznych bibliotek.
  2. Atrakcyjny efekt wizualny: Stopniowe odkrywanie cyfr przyciąga uwagę użytkownika.
  3. Elastyczność: Możliwość dostosowania szybkości animacji i stylów.

Podsumowanie

Mechanizm „Show Up Phone” to doskonałe rozwiązanie dla stron, które chcą zachować numer telefonu w ukryciu do momentu interakcji użytkownika. Dzięki czystemu JavaScript, implementacja jest lekka, szybka i łatwa do dostosowania.

Scroll to Top