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 - 17
Tutorial para Aplicar Efeitos en Textos

Nesse tutorial vamos mostrar como aplicar alguns efeitos interessantes em textos.
Exemplo 1:
Nesse exemplo você poderá selecionar um efeito de uma lista disponível em um combo box. Você escolhe o efeito e clica no botão 'Executar':
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Componente UI Effects - Demonstração de Efeitos</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 170px; padding: 0.4em; position: relative; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } .ui-effects-transfer { border: 2px dotted gray; } </style> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { // Executa o efeito selecionado. function runEffect() { // Pega o efeito selecionad. var selectedEffect = $( "#effectTypes" ).val(); // A maioria dos tipos de efeito não precisa de opções passadas por padrão. var options = {}; // Alguns efeitos requerem parâmetros. if ( selectedEffect === "scale" ) { options = { percent: 50 }; } else if ( selectedEffect === "transfer" ) { options = { to: "#button", className: "ui-effects-transfer" }; } else if ( selectedEffect === "size" ) { options = { to: { width: 200, height: 60 } }; } // Executa o efeito. $( "#effect" ).effect( selectedEffect, options, 500, callback ); }; // Função de retorno de chamada para trazer de volta uma caixa oculta. function callback() { setTimeout(function() { $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; // Define o efeito a partir do valor do menu selecionado. $( "#button" ).on( "click", function() { runEffect(); return false; }); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">Efeito</h3> <p> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p> </div> </div> <select name="effects" id="effectTypes"> <option value="blind">Blind</option> <option value="bounce">Bounce</option> <option value="clip">Clip</option> <option value="drop">Drop</option> <option value="explode">Explode</option> <option value="fade">Fade</option> <option value="fold">Fold</option> <option value="highlight">Highlight</option> <option value="puff">Puff</option> <option value="pulsate">Pulsate</option> <option value="scale">Scale</option> <option value="shake">Shake</option> <option value="size">Size</option> <option value="slide">Slide</option> <option value="transfer">Transfer</option> </select> <button id="button" class="ui-state-default ui-corner-all">Executar</button> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Exemplo 2:
Esse exemplo vamos adicionar uma classe que anima um texto qualquer com os seguintes efeitos: recuo de texto, espaçamento entre letras, largura, altura, preenchimento, margem e tamanho da fonte.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Componente UI Effects - Adiciona uma classe</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; padding: 1em; border: 1px solid #000; background: #eee; color: #333; } .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 120px; padding: 30px; margin: 10px; font-size: 1.1em; } </style> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( "#button" ).on( "click", function() { $( "#effect" ).addClass( "newClass", 1000, callback ); }); function callback() { setTimeout(function() { $( "#effect" ).removeClass( "newClass" ); }, 1500 ); } } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <div class="toggler"> <div id="effect" class="ui-corner-all"> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. </div> </div> <button id="button" class="ui-state-default ui-corner-all">Executar</button> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Exemplo 3:
Nesse exemplo o fundo do texto vai mudaar de cor e o conteúdo vai aumentar horizontalmente após o botão 'Executar' for pressionado. O effeito só voltará ao normal se o botão 'Executar' for pressionado de novo.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Componente UI Effects - Animação com alteração de cor</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } </style> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { var state = true; $( "#button" ).on( "click", function() { if ( state ) { $( "#effect" ).animate({ backgroundColor: "#aa0000", color: "#fff", width: 500 }, 1000 ); } else { $( "#effect" ).animate({ backgroundColor: "#fff", color: "#000", width: 240 }, 1000 ); } state = !state; }); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">Animação</h3> <p> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p> </div> </div> <button id="button" class="ui-state-default ui-corner-all">Executar</button> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

<< Tutorial para Criar Tooltips
Tutorial para Validar Checkbox >>

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