Entradas com Etiqueta ‘jQuery’

Desenvolvimento de jogos em Javascript com gameQuery

Quinta-feira, 13 de Maio, 2010

gameQuery é um plugin jQuery que pretende facilitar o desenvolvimento de jogos em javascript através da utilização de simples classes que são geralmente utilizadas em jogos. Alguns exemplos: animação multi layer-sprite, hierarquias de sprites, detecção de colisões, suporte alternado de som, chamadas periódicas de estados do teclado, etc.

Os jogos em javascript ainda estão numa fase embrionária, mas existe muitas razões que levam estes jogos a crescerem exponencialmente. Os browsers modernos disponibizliam um bom motor de javascript e tendem a evoluir para melhorar ainda mais. Com isto, o desenvolvimento de jogos em javascript parece cada vez mais estar ao alcance de todos os programadores que queiram iniciar-se nesta forma de entretenimento web.

Livre de encargos, GameQuery é uma das novas formas de desenvolver produtos interactivos sem necessidade de plataformas ou softwares de autoria.

Desenvolvimento de jogos em Javascript com gameQuery

Download: http://gamequery.onaluf.org/download.php
Demonstração: http://gamequery.onaluf.org/demos.php
Documentação: http://gamequery.onaluf.org/documentation.php
Licença: MIT

Recursos Relacionados:

Etiquetas:, , ,
Na categoria Sem categoria | Os comentários estão fechados

Tutorial de Menu Accordion em jQuery e CSS3

Terça-feira, 11 de Maio, 2010

Codrops recriou um efeito bastante interessante para animação com recurso à livraria jQuery e CSS3, vulgarmente conhecido como efeito de Accordion ou Acordeão. Neste tutorial que hoje lhe apresentamos, poderá aprender como aplicar o efeito de hover para animar as listas no interior de um div no que respeita à sua largura, bem como adicionar efeito de fade in/out e slide up/down.

Menu Accordion em jQuery e CSS3

Demonstração: http://tympanus.net/Tutorials/ElegantAccordion/
Tutorial: http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/
Licença: Gratuito

Recursos Relacionados:

Etiquetas:, ,
Na categoria Sem categoria | Os comentários estão fechados

10 Novos Recursos para UI Designers & Developers

Sábado, 13 de Março, 2010

Têm sido disponibilizados diversos tutoriais e recursos gratuitos para desenho e desenvolvimento de interfaces os quais são muito úteis para todos nós. Aqui fica uma lista de novos recursos para animações, galerias de imagens, efeitos de interacção em botões, pop-ups para notificação, preloading de imagens, substituição de fontes, entre outros.

1 – Panning Slideshow com jQuery

jquery-panning-slideshow

Animação: http://gsgd.co.uk/sandbox/jquery/easing/
Delay e tempo: http://www.evanbot.com/article/jquery-timer-plugin/23
Demo: http://s3.amazonaws.com/buildinternet/live-tutorials/panning-slideshow/panning-slideshow.htm
Tutorial: http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/

2 – Menu de Navegação com Sprites e jQuery estilo Dragon Interactive

Menu de Navegação com Sprites e jQuery estilo Dragon Interactive

Animação: http://gsgd.co.uk/sandbox/jquery/easing/
Demo: http://nettuts.s3.cdn.plus.org/512_dragon/demo/index.html
Tutorial: http://net.tutsplus.com/tutorials/html-css-techniques/use-sprites-to-create-an-awesomeness-filled-navigation-menu/

3 – Slideshow 3D em Flash e XML

Slideshow 3D em Flash e XML
Embeber Flash: http://code.google.com/p/swfobject/
Demo: http://www.progressivered.com/cu3er/
Download: http://www.progressivered.com/cu3er/download/

4 – Popup jQuery com Tempo e efeito Fade

Popup com Tempo e efeito Fade
Demo: http://boedesign.com/demos/gritter
Tutorial: http://boedesign.com/2009/07/11/growl-for-jquery-gritter/
Download: http://github.com/jboesch/Gritter/archives/master

5 – Preloading de Imagens com jQuery

Preloading de Imagens com jQuery
Website: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

6 – Templates e Recursos para Design de Interfaces

Templates e Recursos para Design de Interfaces
Website: http://webdesignledger.com/freebies/a-ui-design-and-prototyping-treasure-chest

7 – Efeito de Animação com jQuery

Efeito de Animação com jQuery
Website: http://www.gayadesign.com/diy/text-with-moving-backgrounds-with-jquery/

8 – Efeito de Fade para Slideshows ou Texto

Efeito de Fade para Slideshows ou Texto
Website: http://medienfreunde.com/lab/innerfade/

9 – Clone Lightbox para Galerias de Imagens, Vídeos, Flash ou HTML

Clone Lightbox para Galerias de Imagens, Vídeos, Flash ou HTML
Website: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone

10 – Cufón – Gerador e Substituição de Fontes

http://cufon.shoqolate.com/generate/
Website: http://cufon.shoqolate.com/generate/

Recursos Relacionados:

Etiquetas:, , , , , , , , , , , ,
Na categoria Sem categoria | Os comentários estão fechados

Efeito de Câmara Fotográfica com jQuery e CSS

Terça-feira, 9 de Fevereiro, 2010

O plugin jQuery PhotoShoot oferece a possibilidade de converter qualquer div na sua página web numa área de disparo, simulando o efeito de uma câmara fotográfica. Com este plugin, dará aos visitantes do seu site a oportunidade de poderem tirar fotos à imagem de fundo da aplicação.

Cada vez que é clicado numa determinada área, um novo disparo é adicionado ao div que contem margin negativa. Depois uma nova animação é iniciada, a qual vai deslizar na viewport e puxar os outros disparos novamente para uma margin negativa, ocultando sempre o div.

Você pode usar livremente estas técnicas e construir o seu próprio código.
Existem muitas possibilidades para este plugin, por exemplo para sistemas de navegação, promoção de sites ou simplesmente para divertir os utilizadores do seu site.

Efeito de Câmara Fotográfica com jQuery e CSS

Requisitos: jQuery Framework
Demonstração: http://demo.tutorialzine.com/2010/02/photo-shoot-css-jquery/demo.html
Tutorial: http://tutorialzine.com/2010/02/photo-shoot-css-jquery/
Licença: MIT

Recursos Relacionados:

Etiquetas:, ,
Na categoria Sem categoria | Os comentários estão fechados

Pop-up jQuery para Marketing e Publicidade

Sexta-feira, 18 de Dezembro, 2009

Meerkat, o nome escolhido para este pop-up, é um plugin jQuery desenvolvido por Jarod Taylor que serve vários propósitos graças à personalização das suas funcionalidades. Pode ser usado para promoção de eventos, uma simples publicidade, ou mesmo para transição de páginas. Meerkat é compatível com todos os navegadores, incluindo o Internet Explorer 6.

Meerkat, dependendo nas opções que se tem definidas, irá deslizar ou desvanecer de cima ou de baixo, da janela do browser e, fixa a sua posição enquanto o resto da página irá deslizar normalmente.

Opções Disponíveis:

  • Encerrar o banner (retoma quando se carrega a página);
  • Desactivar o banner (até que a sessão no browser expire);
  • Desactivar o banner (por um número pré-definido de dias);

Demonstração 1:

Pop-up jQuery para Marketing e Publicidade

Demonstração 2:

Pop-up jQuery para Marketing e Publicidade

Website: http://jarodtaylor.com/meerkat
Demonstração 1: http://jarodtaylor.com/meerkat/demos/demo1.php/
Demonstração 2: http://jarodtaylor.com/meerkat/demos/demo2.php/
Demonstração 3: http://jarodtaylor.com/meerkat/demos/demo3.php/
Licença: MIT

Recursos Relacionados:

Etiquetas:, , ,
Na categoria Sem categoria | Os comentários estão fechados

Tutorial de site em jQuery com refrescamento AJAX

Segunda-feira, 26 de Outubro, 2009

James Padolsey é um freelancer web developer de Hampton, UK. Ele escreve sobre front-end web development. O seu tópico preferido: Javascript. Este tutorial ensina-lhe a criar um layout assíncrono, levando o utilizador a interagir com a informação contida em várias páginas, sem haver refrescamento pelo browser.

Instalação

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!-- index.html -->
 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type">
<title>mmm... Ajax!</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
@import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>
</meta></head>
<body>
    <div id="wrapper">
    <h1>ajax ... nettuts</h1>
    <ul id="nav">
        <li>welcome</li>
        <li>about</li>
        <li>portfolio</li>
        <li><a href="contact.html">contact</a></li>
        <li><a href="terms.html">terms</a></li>
    </ul>
    <div id="content">
        <h2>Welcome!</h2>
        <p>Text</p>
    </div>
    <div id="foot">Tutorial by James for NETTUTS</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!-- js.js -->
 
$(document).ready(function() {
 
    // Check for hash value in URL
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }
    });
 
    $('#nav li a').click(function(){
 
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
    	$('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
    	$('#content').show('normal',hideLoader());
    }
    function hideLoader() {
    	$('#load').fadeOut('normal');
    }
    return false;
 
    });
});

Demonstração: Site em jQuery com Refrescamento AJAX
Download: Download Site em jQuery
Licença: Ver no site Nettuts

Recursos Relacionados:

Etiquetas:,
Na categoria Sem categoria | Os comentários estão fechados

API em jQuery Combina Múltiplas Contas do Twitter

Sexta-feira, 16 de Outubro, 2009
Trabalhos Freelance

Tutorialzine acabou de criar um tutorial que ensina a criar uma API em CSS e jQuery para o Twitter que permite mostrar os seus últimos tweets, ou dos seus amigos. Não é necessário qualquer código do lado do servidor, ou base de dados. Como resultado, o “ticker” irá facilmente ser incluído em qualquer página web, e adaptado mediante as necessidades.

Recursos Relacionados:

Etiquetas:, , ,
Na categoria Sem categoria | Os comentários estão fechados