
Dynamic user interfaces are essential for creating engaging web experiences. One interesting effect you can implement on websites is the gradual reveal of a hidden phone number. In this article, we’ll dive into the ‘Show Up Phone’ mechanism – a pure JavaScript implementation that allows you to smoothly animate the appearance of a hidden phone number.
I’ll explain step-by-step how the code works below.
Purpose of implementation
The main idea is to slowly show the hidden parts of a phone number. At first, you only see some of the numbers, like 33X-XXX-XXX, but when you click on the right place, the hidden numbers appear with a cool animation.
HTML Structure
The HTML contains a container with the class .displayP
, that serves as a ‘card’ displaying a masked phone number:
<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>
Attributes:
data-toshow
– contains hidden digits of the phone number in CSV format (e.g.3,9,7,8,6,5,3
).block-heading
– an element displaying the phone number with masked digits.
JavaScript Logic
The JavaScript code handles the animation for revealing hidden digits. Below, I will discuss the key implementation elements.
1. Event Registration
We listen for a click
event on .displayP
elements:
document.querySelectorAll('.displayP').forEach(card => {
card.addEventListener('click', displayP);
});
2. Click Handling (displayP
)
The displayP
function:
- Checks if the element is already animating (
isAnimating
). - Verifies if the element has hidden digits in the
data-toshow
attribute. - Reveals or resets the number depending on the current state.
3. Digit Animation
We use the animateNumber
function to smoothly transition the value from 0 to the hidden digit:
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. Revealing Digits (revealNextDigit
)
We reveal hidden digits step by step:
- Masked digits (X) are replaced with animated digits.
- For revealed digits, they are copied without changes.
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);
}
}
Operating Principle
- First Click:
- Digits hidden under X are revealed in the order from the
data-toshow
attribute. - The revealing happens gradually thanks to the animation.
- Digits hidden under X are revealed in the order from the
- Subsequent Clicks:
- The number returns to its masked state.
Advantages of this approach
- Pure JavaScript: No dependencies on external libraries.
- Attractive Visual Effect: Gradual revealing of digits draws the user’s attention.
- Flexibility: Ability to customize the animation speed and styles.
Summary
The “Show Up Phone” mechanism is an excellent solution for websites that want to keep a phone number hidden until user interaction. Thanks to pure JavaScript, the implementation is lightweight, fast, and easy to customize.