Scroll não serve só para se fazer parallax

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

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

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

Desenhando com a tag canvas em HTML5

A maioria das pessoas (inclusivo programadores front end) vê alguma aplicação onde é possível desenhar e pensa que é algo do capeta, complexo e precisa de 1 ano pra fazer, mas provavelmente ninguém nunca tentou. É simples!

Obviamente precisa de um belo work-around pra funcionar em interfaces touch e o pior, versões antigas de IE. Mas a ideia em si é simples, basicamente no mousemove em cima do canvas você escreve uma linha com o LineTo, veja abaixo como ficou:

Bom, vamos aos códigos:

HTML

Criando a tag canvas e deixando uma mensagem caso o usuário não tenho um browser compatível com HTML5.

<canvas id="canvas" class="canvas" width="400" height="400">
    Seu browser não suporta canvas, é hora de trocar!.
</canvas>

Javascript

São só 29 linhas (bem indentadas e organizadas) de javascript

var Draw = {
	obj : document.getElementById('canvas'),
	contexto : document.getElementById('canvas').getContext("2d"),
	_init:function(){
		Draw.obj.onmousemove = Draw._over;
		Draw.obj.onmousedown = Draw._ativa;
		Draw.obj.onmouseup = Draw._inativa;
		Draw.obj.onselectstart = function () { return false; };
	},
	_over:function(e){
		if(!Draw.ativo) return;
		Draw.contexto.beginPath();
		Draw.contexto.lineTo(Draw.x,Draw.y);
		Draw.contexto.lineTo(e.layerX, e.layerY);
		Draw.contexto.stroke();
		Draw.contexto.closePath();
		Draw.x = e.layerX;
		Draw.y = e.layerY;
	},
	_ativa:function(e){
		Draw.ativo = true;
		Draw.x = e.layerX;
		Draw.y = e.layerY;
	},
	_inativa:function(){
		Draw.ativo = false;
	}	
}
Draw._init();

CSS

Basicamente, é adicionar o cursor no elemento Canvas

#canvas{ cursor: url("../img/pencil.gif"), default; }

Então, não parece tão complicado, parece?

[]s,