
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.
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:
data-toshow
– zawiera ukryte cyfry numeru telefonu w formacie CSV (np.3,9,7,8,6,5,3
).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
- Pierwsze kliknięcie:
- Cyfry ukryte pod
X
są ujawniane w kolejności z atrybutudata-toshow
. - Odsłanianie następuje stopniowo dzięki animacji.
- Cyfry ukryte pod
- Kolejne kliknięcie:
- Numer wraca do stanu zamaskowanego.
Zalety podejścia
- Czysty JavaScript: Brak zależności od zewnętrznych bibliotek.
- Atrakcyjny efekt wizualny: Stopniowe odkrywanie cyfr przyciąga uwagę użytkownika.
- 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.