Home / Cupons / Publicacoes

Componente você sabia

Veja como criar um lindo #componente você sabia com #javascript e CSS.

Este componente exibe curiosidades programadas que aparecem com efeito de máquina de escrever, proporcionando uma experiência dinâmica ao usuário. Ele é ideal para destacar informações técnicas, novidades ou fatos interessantes em portais educacionais ou #sistemas voltados para programadores. Além disso, oferece controles interativos para iniciar, parar e ajustar a velocidade da exibição, permitindo testes e personalização fácil.

Código completo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Efeito Máquina de Escrever</title>
    <style>
        body {
            font-family: 'Courier New', monospace;
            background: #0a0a0a;
            color: #fff;
            margin: 20px;
            padding: 0;
        }
        
        .demo-controls {
            margin-top: 20px;
            padding: 15px;
            background: #2a2a2a;
            border-radius: 4px;
        }
        
        .demo-controls button {
            background: #00bfff;
            color: white;
            border: none;
            padding: 8px 16px;
            margin: 5px;
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
        }
        
        .demo-controls button:hover {
            background: #0099cc;
        }
        
        .speed-control {
            margin: 10px 0;
        }
        
        .speed-control label {
            color: #ccc;
            margin-right: 10px;
        }
        
        .speed-control input {
            margin: 0 10px;
        }
        
        #voce-sabia {
            background: #1e1e1e;
            color: #ccc;
            padding: 12px 20px;
            border-left: 4px solid #00bfff;
            font-size: 14px;
            margin-bottom: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        
        .titulo {
            color: #00bfff;
            font-weight: bold;
        }
        
        #curiosidade {
            margin-left: 8px;
            position: relative;
        }
        
        /* Cursor piscante */
        #curiosidade::after {
            content: '|';
            color: #00bfff;
            animation: blink 1s infinite;
            font-weight: bold;
        }
        
        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }
        

    </style>
</head>
<body>
    <div id="voce-sabia">
        <span class="titulo">Você sabia?</span>
        <span id="curiosidade"></span>
    </div>
    
    <div class="demo-controls">
        <h3 style="color: #00bfff; margin-top: 0;">Controles da Demo</h3>
        <button onclick="iniciarEfeito()">Iniciar</button>
        <button onclick="pararEfeito()">Parar</button>
        <button onclick="proximaCuriosidade()">Próxima</button>
        
        <div class="speed-control">
            <label>Velocidade:</label>
            <input type="range" id="velocidade" min="10" max="200" value="80" onchange="ajustarVelocidade()">
            <span id="velocidade-valor">80ms</span>
        </div>
    </div>
    


    <script>
        const curiosidades = [
            "No JavaScript, `NaN !== NaN` é verdadeiro!",
            "Em PHP, `empty([])` retorna true — arrays vazios são considerados vazios!",
            "`let` no JavaScript tem escopo de bloco, `var` não.",
            "O CodeIgniter 4 é totalmente orientado a objetos.",
            "`localStorage` salva dados mesmo após fechar o navegador.",
            "Você pode usar `nth-child(odd)` no CSS para estilizar linhas alternadas!",
            "JavaScript foi criado em apenas 10 dias por Brendan Eich!",
            "CSS Grid pode criar layouts complexos com apenas algumas linhas!",
            "O `console.table()` exibe arrays e objetos em formato de tabela!",
            "PHP significa 'PHP: Hypertext Preprocessor' (acrônimo recursivo)!",
            "O `===` no JavaScript compara valor E tipo, `==` apenas valor.",
            "CSS flexbox resolve 90% dos problemas de alinhamento!",
            "O `async/await` torna código assíncrono mais legível que Promises.",
            "Em PHP, você pode usar `??` para verificar se uma variável existe.",
            "O `document.querySelector()` é mais poderoso que `getElementById()`.",
            "CSS custom properties (variáveis) funcionam em tempo real!",
            "JavaScript possui 'hoisting' - declarações são movidas para o topo.",
            "O CodeIgniter usa o padrão MVC (Model-View-Controller).",
            "O `console.time()` e `console.timeEnd()` medem performance!",
            "PHP 8 introduziu Union Types e Named Arguments.",
            "O `Array.from()` pode converter qualquer coisa em array!",
            "CSS `:has()` é como um 'parent selector' que sempre quisemos!",
            "O `fetch()` API substituiu o antigo XMLHttpRequest.",
            "Em PHP, `null coalescing assignment` (??=) atribui se for null.",
            "JavaScript Map e Set são mais eficientes que Object e Array para certas tarefas.",
            "CSS Container Queries permitem responsividade baseada no container!",
            "O `structuredClone()` faz deep copy de objetos nativamente!",
            "PHP Fibers permitem programação assíncrona sem callbacks.",
            "O `AbortController` pode cancelar fetch requests em JavaScript!",
            "CSS `:is()` e `:where()` simplificam seletores complexos!",
            "O `BigInt` em JavaScript trabalha com números maiores que 2^53!",
            "PHP 8.1 trouxe Enums nativos para o language!",
            "CSS `aspect-ratio` mantém proporções sem JavaScript!",
            "O `?.` (optional chaining) evita erros em propriedades undefined!",
            "Em PHP, `match` é mais poderoso que `switch`!",
            "JavaScript `WeakMap` e `WeakSet` permitem garbage collection automático!",
            "CSS `clamp()` cria valores responsivos com min, max e preferido!",
            "O `Intl` API formata datas, números e strings por localização!",
            "PHP attributes (# annotations) substituem docblocks!",
            "CSS `@layer` controla a cascata e especificidade!",
            "O `queueMicrotask()` agenda tarefas na microtask queue!",
            "CodeIgniter 4 usa Composer para gerenciamento de dependências!",
            "CSS `@supports` testa suporte a propriedades antes de aplicar!",
            "JavaScript Proxy pode interceptar e customizar operações em objetos!",
            "PHP 8.2 introduziu readonly classes!",
            "CSS `scroll-behavior: smooth` cria rolagem suave sem JS!",
            "O `Reflect` API fornece métodos para operações interceptáveis!",
            "Em PHP, você pode usar `yield` para criar generators!",
            "CSS `:focus-visible` aplica estilos apenas no foco via teclado!",
            "JavaScript `Temporal` API vai substituir o problemático Date!",
            "PHP JIT (Just-In-Time) compilation pode acelerar código em até 3x!",
            "CSS `gap` funciona tanto em Grid quanto em Flexbox!",
            "O `ResizeObserver` detecta mudanças de tamanho em elementos!",
            "CodeIgniter 4 tem hot reloading em desenvolvimento!",
            "CSS `color-mix()` mistura cores como um photoshop!",
            "JavaScript `top-level await` permite await fora de funções async!",
            "PHP 8.3 trouxe readonly properties em classes!",
            "CSS `@starting-style` define estilos iniciais para animações!",
            "O `scheduler.postTask()` controla prioridade de tarefas!",
            "Em PHP, `array_is_list()` verifica se é um array sequencial!",
            "CSS View Transitions API anima entre páginas como SPA!"
        ];
        
        let letraIndex = 0;
        let curiosidadeAtual = "";
        let delayEntreLetras = 80;
        let delayEntreFrases = 3000;
        let timeoutId = null;
        let intervalId = null;
        let rodando = false;
        
        function escreverCuriosidade() {
            const span = document.getElementById("curiosidade");
            
            if (letraIndex < curiosidadeAtual.length) {
                span.textContent += curiosidadeAtual.charAt(letraIndex);
                letraIndex++;
                timeoutId = setTimeout(escreverCuriosidade, delayEntreLetras);
            } else {
                // Aguarda antes de mostrar a próxima curiosidade
                timeoutId = setTimeout(proximaCuriosidade, delayEntreFrases);
            }
        }
        
        function proximaCuriosidade() {
            if (!rodando) return;
            
            const span = document.getElementById("curiosidade");
            curiosidadeAtual = curiosidades[Math.floor(Math.random() * curiosidades.length)];
            span.textContent = "";
            letraIndex = 0;
            escreverCuriosidade();
        }
        
        function iniciarEfeito() {
            if (rodando) return;
            
            rodando = true;
            proximaCuriosidade();
        }
        
        function pararEfeito() {
            rodando = false;
            if (timeoutId) {
                clearTimeout(timeoutId);
                timeoutId = null;
            }
        }
        
        function ajustarVelocidade() {
            const slider = document.getElementById("velocidade");
            const valorSpan = document.getElementById("velocidade-valor");
            delayEntreLetras = parseInt(slider.value);
            valorSpan.textContent = delayEntreLetras + "ms";
        }
        
        // Iniciar automaticamente quando a página carregar
        document.addEventListener("DOMContentLoaded", function() {
            console.log("DOM carregado, iniciando efeito...");
            iniciarEfeito();
        });
        
        // Cleanup quando a página for fechada
        window.addEventListener("beforeunload", pararEfeito);
    </script>
</body>
</html>

 

Adapte e use.