Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, vi algo num site e fiquei curioso em saber como faz . Toda site, ao fazer alguma busca que não existe, leva ao " 404 ". O Site da Rockstar Games tem uma pag 404 muito interessante no meu ponto de vista, por isso queria saber como faz.
Ela reproduziu a logo da rockstar em codigos e em cores.
Exemplo : http://www.rockstargames.com/asas ( "asas" é qualquer palavra após o endereço para chegar ao 404). Percebam que voc~e consegue selecionar com o mouse qualquer parte da img reproduzida e que são apenas codigos com cores diferentes.
Como faço uma igual ou semelhante com uma img qlqr ou até uma logomarca de meu desejo ?
>
Mnny,
Esse é só um conjunto de números binários gerados aleatoriamente. Você pode fazer isso de algumas formas, veja:
Veja um exemplo no Codepen do que é um blend mode: http://codepen.io/chriscoyier/pen/aBIAc
Você só precisa inserir todas as informações de texto (um loop pra não ficar essa bagaça gigante dentro do HTML) e adicionar uma imagem por cima com o blend (ou por baixo, ou como achar melhor).
Para o JS, por exemplo, você pode usar uma função com um for().
function criarBinario() {
var texto = "";
var binario = "01";
for (var i = 0; i < 255; i++) {
texto += binario.charAt(Math.floor(Math.random() * possible.length));
}
return texto;
}Bom, eu espero que você saiba o básico de JS, mas aqui é bem simples. Ele vai buscar 0 e 1 dentro da variável binario e sortear eles de diferentes formas até completarem 255 caracteres.
Abraços!
Estou um pouco confuso. Poderia mostrar algum exemplo real ?
Mnny,
Então com essa sua resposta vem minhas dúvidas:
>
Mnny,
Esse é só um conjunto de números binários gerados aleatoriamente. Você pode fazer isso de algumas formas, veja:
Veja um exemplo no Codepen do que é um blend mode: http://codepen.io/chriscoyier/pen/aBIAc
Você só precisa inserir todas as informações de texto (um loop pra não ficar essa bagaça gigante dentro do HTML) e adicionar uma imagem por cima com o blend (ou por baixo, ou como achar melhor).
Para o JS, por exemplo, você pode usar uma função com um for().
function criarBinario() {
var texto = "";
var binario = "01";
for (var i = 0; i < 255; i++) {
texto += binario.charAt(Math.floor(Math.random() * possible.length));
}
return texto;
}Bom, eu espero que você saiba o básico de JS, mas aqui é bem simples. Ele vai buscar 0 e 1 dentro da variável binario e sortear eles de diferentes formas até completarem 255 caracteres.
Abraços!
Obrigado pela explicação,
O efeito das cores é feito pelo CSS?
Por momentos pensei que tivessem adicionado uma marca de água, que seria a imagem! Imagine, o loop em js para fazer o efeito binário e a imagem em marca de água por cima, e assim daria a sensação de que o binário está pintado. Mas estive a ver no console do mozila, na aba network, e não nenhuma imagem que se pareça com a do efeito.
Mnny,
Esse é só um conjunto de números binários gerados aleatoriamente. Você pode fazer isso de algumas formas, veja:
Veja um exemplo no Codepen do que é um blend mode: http://codepen.io/chriscoyier/pen/aBIAc
Você só precisa inserir todas as informações de texto (um loop pra não ficar essa bagaça gigante dentro do HTML) e adicionar uma imagem por cima com o blend (ou por baixo, ou como achar melhor).
Para o JS, por exemplo, você pode usar uma função com um for().
Bom, eu espero que você saiba o básico de JS, mas aqui é bem simples. Ele vai buscar 0 e 1 dentro da variável binario e sortear eles de diferentes formas até completarem 255 caracteres.
Abraços!