Scroll não serve só para se fazer parallax

Posted on by
1

Menu que fixa no topo

http://www.carterdigital.com.au/

Scrollando o menu, ao invés de sumir após a dobra, é fixado no topo.

Menu que fixa no topo

Travando a sidebar pra não ficar buraco

http://9gag.com/

Em sites de paginação infinita, não tem como popular a coluna da direita pra encher de conteúdo até o fim do mundo.

O 9gag criou uma solução interessante, travando a coluna a partir de um determinado ponto do scroll.

O Facebook também fez isso.

Travando a sidebar pra não ficar buraco

Alterando o conteúdo

http://krystalrae.com/

Ao Scrollar, a modelo vai trocando de roupa

Alterando o conteúdo

Fixando o título / share ao lado do conteúdo

Mostrando conteúdo relacionado

http://mashable.com/2012/03/26/kaggle/

Na interna do mashable, eles detectam quando você acabou de ler um post (baseado no seu scroll top) e mostram um box com algum conteúdo relacionado.

Mostrando conteúdo relacionado

Como aplicar Blur numa imagem usando html5 / canvas

Posted on by
Reply

O efeito é o seguinte, pegar uma imagem e aplicar o efeito de blur usando somente javascript, sem carregar outra imagem.

Pra isso, é manipulado, pixel a pixel, colocando um pixel alpha por cima da imagem.

Veja a imagem original:

Blur em canvas

Imagem com filtro de Blur

Como a imagem é gerada automaticamente, dá pra aplicar o efeito no mousemove, ou em qualquer outra ação. Veja o exemplo abaixo.

Imagem com filtro de Blur no mousemove

Pro processamento ficar mais rápido, eu gerei um segundo canvas, só com pro efeito de criar a imagem dentro da máscara.

Todos os exemplos estão disponíveis aqui

Gráfico de Pizza interativo em HTML5 usando JavaScript e Canvas

Posted on by
1

Codando

O código é bem pequeno, fiz com menor número de linhas possíveis pra ficar bem legível.

html:

	<canvas id="pizza" width="400" height="400">
		Seu browser não suporta canvas
	</canvas>

javascript:

var Pizza = {

	// Configuração
	canvas:document.getElementById('pizza'),
	height:400,
	width:400,
	cor:'#293F8A',
	
	// Calculando variaveis pra desenhar
	_init:function(){
		Pizza.ctx = Pizza.canvas.getContext("2d");  
		Pizza.radius = Math.min(Pizza.width, Pizza.height) / 2;
		Pizza.center_x = Pizza.width/2;
		Pizza.center_y = Pizza.height/2;	
	},

	// Desenhando -  é só colocar Pizza._draw(60) pra desenhar 
	// o gráfico com 60% de ocupação
	_draw:function(percentual){
		Pizza.ctx.clearRect(0,0,Pizza.width,Pizza.height); 			
		Pizza.ctx.beginPath();
		Pizza.ctx.moveTo(Pizza.center_x, Pizza.center_y);
		Pizza.ctx.arc( 
			Pizza.center_x, 
			Pizza.center_y, 
			Pizza.radius, 
			Math.PI * (- 0.5), // inicio da fatia
			Math.PI * (- 0.5 + 2 * percentual/100), // fim da fatia
			false
		);
		Pizza.ctx.closePath();
		Pizza.ctx.fillStyle = Pizza.cor;
		Pizza.ctx.fill();				
	}	
}
Pizza._init();

E por último, o drag, onde utilizo o jQuery UI, aí fica simples:

html:

	<div id="mascara_percentual">
		<span id="slider">drag<br/>me</span>
	</div>

javascript:

$('#slider').draggable({
	containment:'#mascara_percentual',
	drag:function() {
		var left = parseInt($(this).css('left').replace('px',''));
		var percentual = parseInt(left / 350 * 100); 
		// (350 = 400 do width da mascara - 50 do width do slider)
		Pizza._draw(percentual);
	}
});

// Iniciando em 70%
$('#slider').css('left','70%'); // drag
Pizza._draw(70); // canvas

Porque a chave no Javascript deve ser aberta na linha de cima

Posted on by
7

O Visual Studio, além de ser uma IDE mega pesada, tem um problema que gera intrigas entre equipes: ele abre por padrão uma função no JavaScript colocando a chave na linha de baixo.

Parece algo mínimo, mas irrita profundamente quem está acostumado a trabalhar da forma correta.

Porque forma correta? Simples, porque pode dar erro se colocar a chave na linha de baixo.

Pensem na função abaixo getUser que retorna um objeto em JavaScript

function getUser(){
	return {
		nome:'Danilo',
		idade:28
	}
}

getUser() // retorna um objeto

Se fosse pra deixar a chave embaixo, ficaria assim:

function getUser()
{
	return 
	{
		nome:'Danilo',
		idade:28
	}
}

getUser() // retorna undefined

Só que há um problema: pelo fato do ponto e vírgula indicando quebra de linha ser no JavaScript ser opcional, o return não entende que é pra retornar um objeto e encerra a função ali, retornando undefined.

E tem um caso pior, que simplesmente dá erro de sintaxe:

function getPosition()
{
   return 
   {
       top:32,
       left:50
   }
}
// dá erro "SyntaxError: Unexpected token :"

E se fosse feito com os braces na linha de cima, daria certo.

O incrível é que mesmo com esse argumento, tem programador que não dá o braço a torcer e insiste dizendo que JavaScript veio do java e no java se programa assim. ERRADO, JavaScript veio de Scheme e qualquer livro de Padrões em Javascript vai aconselhar abrir o bloco com a chave na linha de cima.

Dá pra configurar isso no Visual Studio 2010 (no 2008 deve dar também).

« Próximos posts — Posts Anteriores »