Tutorial: Nota Virtual de 1 Real

Neste tutorial, vamos criar uma Nota Virtual de 1 Real com HTML, CSS e JavaScript. Este projeto utiliza estilização avançada, efeitos interativos e uma interface educativa. Vamos explorar cada etapa detalhadamente.

Veja o projeto em funcionamento neste link. Nota Virtual de 1 Real.

1. Introdução

O projeto simula uma cédula virtual de 1 real com elementos como o número de série, rosto, e frase tradicional. Ele inclui:

Efeitos visuais ao passar o mouse.

Modal para exibir informações interativas.

2. Estrutura HTML

A estrutura HTML define os elementos principais da nota e do modal.

Arquivo: index.html



<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Nota Virtual de Um Real</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="nota">

        <p class="banco-central">BANCO CENTRAL DO BRASIL</p>

        <div class="numero-grande-esquerdo">1</div>

        <div class="numero-grande-direito">1</div>

        <div class="padrao-lateral"></div>

        <div class="rosto"></div>

        <p class="valor">REAL</p>

        <div class="detalhes">

            <p class="serie">B2172069768B</p>

            <p class="texto-adicional">Deus Seja Louvado</p>

        </div>

        <p class="educacional">Para Fins Educacionais</p>

    </div>

<div class="modal hidden">

    <div class="modal-content">

        <span class="close-btn">&times;</span>

        <p class="modal-message"></p>

    </div>

</div>

    <script src="script.js"></script>

</body>

</html>

3. Estilização com CSS

A seguir, configuramos o estilo visual da nota e do modal.

Arquivo: style.css



body {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin: 0;

    background-color: #e0e0e0;

    font-family: Arial, sans-serif;

}

.nota {

    width: 350px;

    height: 180px;

    background: linear-gradient(135deg, #8fbca2, #6d987e);

    border: 2px solid #333;

    border-radius: 8px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;

    padding: 10px;

    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);

    overflow: hidden;

}

.banco-central {

    font-size: 14px;

    font-weight: bold;

    color: #333;

    position: absolute;

    top: 1px;

    left: 15px;

}

.numero-grande-esquerdo {

    font-size: 60px;

    font-weight: bold;

    color: #2e2e2e;

    position: absolute;

    top: 50px;

    left: 20px;

}

.numero-grande-direito {

    font-size: 40px;

    font-weight: bold;

    color: #2e2e2e;

    position: absolute;

    top: 40px;

    right: 15px;

}

.padrao-lateral {

    position: absolute;

    top: 0;

    left: 0;

    width: 40px;

    height: 100%;

    background: repeating-linear-gradient(

        45deg,

        rgba(255, 255, 255, 0.2),

        rgba(255, 255, 255, 0.2) 10px,

        transparent 10px,

        transparent 20px

    );

    opacity: 0.5;

}

.rosto {

    width: 100px;

    height: 100px;

    position: absolute;

    top: 40px;

    left: 125px;

    background-image: url('https://i.ibb.co/RQnrqzp/Marianne.png');

    background-size: cover;

    background-position: center;

    border-radius: 50%;

    box-shadow: inset -5px -5px 10px rgba(255, 255, 255, 0.3),

                inset 5px 5px 10px rgba(0, 0, 0, 0.2);

}

.valor {

    font-size: 24px;

    font-weight: bold;

    color: #333;

    position: absolute;

    bottom: 30px;

    left: 20px;

}

.detalhes {

    position: absolute;

    bottom: 10px;

    right: 10px;

    text-align: right;

}

.serie {

    font-size: 12px;

    color: #333;

}

.texto-adicional {

    font-size: 10px;

    color: #333;

    margin-top: 5px;

}

.nota::before {

    content: "";

    position: absolute;

    top: 20px;

    right: 20px;

    width: 80px;

    height: 80px;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);

    opacity: 0.4;

    transform: rotate(45deg);

}

.educacional {

    font-size: 12px;

    color: #333;

    font-style: italic;

    position: absolute;

    bottom: 5px;

    left: 10px;

    opacity: 0.8;

}

.modal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1000;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

}

.modal-content {

    background: white;

    padding: 20px;

    border-radius: 8px;

    text-align: center;

    width: 300px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

    position: relative;

}

.modal .modal-message {

    font-size: 16px;

    margin: 15px 0;

    color: #333;

}

.modal .close-btn {

    position: absolute;

    top: 0;

    left: 92%;

    transform: translateX(50%);

    font-size: 24px;

    color: #555;

    cursor: pointer;

    background: none;

    border: none;

}

.modal.show {

    opacity: 1;

    pointer-events: auto;

}

4. Interatividade com JavaScript

Aqui adicionamos efeitos e interações ao projeto.

Arquivo: script.js



// Efeito de brilho e zoom na superfície da nota

const nota = document.querySelector('.nota');

nota.addEventListener('mousemove', (e) => {

    const { offsetX, offsetY, target } = e;

    const xPercent = (offsetX / target.offsetWidth) * 100;

    const yPercent = (offsetY / target.offsetHeight) * 100;

    nota.style.background = `linear-gradient(

        135deg,

        #13ADA2 ${xPercent}%, 

        #139DD1 100%

    )`;

});

nota.addEventListener('mouseleave', () => {

    nota.style.background = 'linear-gradient(135deg, #8fbca2, #6d987e)';

});

nota.addEventListener('mouseover', () => {

    nota.style.transform = 'scale(1.05)';

    nota.style.transition = 'transform 0.3s ease-in-out';

});

nota.addEventListener('mouseout', () => {

    nota.style.transform = 'scale(1)';

});

// Configuração do modal

const modal = document.querySelector('.modal');

const modalMessage = document.querySelector('.modal-message');

const closeModalBtn = document.querySelector('.close-btn');

closeModalBtn.addEventListener('click', () => {

    modal.classList.add('hidden');

    modal.classList.remove('show');

});

// Informações interativas ao clicar em diferentes partes da nota

const info = [

    { elemento: '.banco-central', mensagem: 'Banco Central do Brasil: A entidade emissora das cédulas.' },

    { elemento: '.numero-grande-esquerdo', mensagem: 'Número "1": Indica o valor da cédula.' },

    { elemento: '.numero-grande-direito', mensagem: 'Número "1" à direita: Reflete o valor nominal.' },

    { elemento: '.rosto', mensagem: 'Rosto clássico: Simboliza cultura e história.' },

    { elemento: '.valor', mensagem: 'Texto "REAL": Representa a moeda oficial do Brasil.' },

    { elemento: '.educacional', mensagem: 'Texto educacional: Este projeto é apenas para fins de aprendizado.' },

    { elemento: '.serie', mensagem: 'Número de Série: Identificação única de cada cédula.' },

    { elemento: '.texto-adicional', mensagem: 'Deus Seja Louvado": Frase tradicional presente nas cédulas brasileiras.' }

];

info.forEach(item => {

    const elemento = document.querySelector(item.elemento);

    if (elemento) {

        elemento.style.cursor = 'pointer';

        elemento.addEventListener('click', () => {

            modalMessage.textContent = item.mensagem;

            modal.classList.remove('hidden');

            modal.classList.add('show');

        });

    }

});

5. Conclusão

Você aprendeu a criar uma Nota Virtual de 1 Real com efeitos interativos. Esse projeto é ótimo para estudar manipulação de DOM e eventos em JavaScript.

Se preferir, os códigos estão no meu Repositório no GitHub.

Melhorias Sugeridas:

Adicionar animações no modal.

Implementar responsividade para dispositivos móveis.

Utilizar um som ao clicar nos elementos.

Espero que goste do tutorial!

Programar Tudo - Blog de Programação

Pesquisar este blog