Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 24
Tutorial para Criar Efeitos de Digitação

Nesse tutorial veremos como criar alguns efeitos de digitação usando jQuery.
Uma máquina de escrever jQuery é um plug-in simples e poderoso para um efeito legal de máquina de escrever. É um plug-in jQuery leve que permite aplicar efeitos de digitação/exclusão humana em uma matriz de texto. Neste artigo, vamos entender a máquina de escrever jQuery em detalhes.
Exemplo 1:
<!DOCTYPE html> <html> <head> <title>Exemplo de Máquina de Escrever em jQuery</title> <meta charset = "UTF-8" /> <link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet"> <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"> </script> <style> body { background: hsl(217.6,100%,80%); font-family: monospace; padding-top: 5em; display: flex; flex-flow: wrap column; justify-content: center; align-items: center; } .typewriter { background-color: red; min-width: 300px; padding: 1em 2em 1em 1.5em; border: solid 1px #e6e6e6; border-radius: 2.8em; box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.25); margin: 2em; display: flex; align-items: center; } html { margin: 0; height: 100%; text-align: center; font-family: 'Oxygen Mono', monospace; color: red; } h1 { line-height: 1em; padding-bottom: 1px; text-transform: none; font-size: 1.7em; font-weight: bold; font-family: "Lucida Console", "Courier New", monospace; color: blue; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; } p { text-align: left; margin: 0; text-transform: lowercase; font-size: 14pt; font-weight: 900; width: 50%; display: none; } #table { display: table; width: 100%; height: 100%; background-color: #e5e5e5; } #centeralign { display: table-cell; vertical-align: middle; } h2 { margin-top: 40px; text-transform: none; font-size: 1.75em; font-weight: bold; font-family: "Lucida Console", "Courier New", monospace; color: #999; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; } </style> <body> <div id = "table"> <div id = "centeralign"> <h1>Exemplo de Máquina de Escrever</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante arcu, dignissim non risus id, posuere efficitur felis. Vestibulum arcu diam, semper non ipsum quis, dictum ultricies diam. </p> </div> </div> <script> function typeEffect(element, speed) { var text = element.innerHTML; element.innerHTML = " "; var i = 0; var timer = setInterval(function() { if (i < text.length) { element.append(text.charAt(i)); i++; } else { clearInterval(timer); } }, speed); } var speed = 75; var h1 = document.querySelector('h1'); var p = document.querySelector('p'); var delay = h1.innerHTML.length * speed + speed; typeEffect(h1, speed); setTimeout(function(){ p.style.display = "inline-block"; typeEffect(p, speed); }, delay); </script> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Exemplo 2:
<! DOCTYPE html> <html> <head> <title> jQuery typewriter Example </title> <meta charset = "UTF-8" /> <link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet"> <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"> </script> <style> body { background: hsl(217.6,100%,80%); font-family: monospace; padding-top: 3em; display: flex; flex-flow: wrap column; justify-content: center; align-items: center; } h2 { margin-top: 20px; text-transform: none; font-size: 1.75em; font-weight: bold; font-family: "Lucida Console", "Courier New", monospace; color: blue; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; } h1 { line-height: 1em; padding-bottom: 1px; text-transform: none; font-size: 1.7em; font-weight: bold; font-style: italic; font-family: "Lucida Console", "Courier New", monospace; color: white; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; } .typewriter { background-color: blue; min-width: 500px; padding: 1em 2em 1em 1.5em; border: solid 1px #e6e6e6; border-radius: 2.8em; box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.25); margin: 2em; display: flex; align-items: center; } .wrapper { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .centeredBox { width: 100%; text-align: center; } #typewriter { line-height: 2em; padding-bottom: 5px; text-transform: none; font-size: 1.3em; font-family: "Lucida Console", "Courier New", monospace; color: red; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; } .cursor { border-left: 4px solid white; } </style> <body> <h2>Exemplo de Máquina de Escrever em jQuery</h2> <div class = "wrapper"> <div class = "centeredBox"> <span id = "typewriter" data-array = " "> </span> <span class = "cursor"> </span> </div> </div> <script> var typeWriterElement = document.getElementById('typewriter'); var textArray = ["Olá, eu sou programador.","Eu conheço várias linguagens.","Eu também sou escritor.", "Eu gosto dessa rotina que simula uma máquina de escrever."]; function delWriter(text, i, cb) { if (i >= 0 ) { typeWriterElement.innerHTML = text.substring(0, i--); var rndBack = 10 + Math.random() * 100; setTimeout(function() { delWriter(text, i, cb); },rndBack); } else if (typeof cb == 'function') { setTimeout(cb,1000); } }; function typeWriter(text, i, cb) { if ( i < text.length+1 ) { typeWriterElement.innerHTML = text.substring(0, i++); var rndTyping = 250 - Math.random() * 100; setTimeout( function () { typeWriter(text, i++, cb) },rndTyping); } else if (i === text.length+1) { setTimeout( function () { delWriter(text, i, cb) },1000); } }; function StartWriter(i) { if (typeof textArray[i] == "undefined") { setTimeout( function () { StartWriter(0) },1000); } else if(i < textArray[i].length+1) { typeWriter(textArray[i], 0, function () { StartWriter(i+1); }); } }; setTimeout( function () { StartWriter(0); },1000); </script> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

<< Tutorial para Criar um Relógio Digital
Tutorial para Criar Efeitos 3D em Textos >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino