Neve no site usando canvas
Fala galera! Beleza?
Estão estranhando o post de hoje começar sem foto? rsrs
Pois é, é porque hoje o post vai ser diferente...rsrs
Vocês devem estar percebendo que tem alguma coisa diferente rolando nessa página né?rsrs
Pois é, está "nevando" ! xD (E o fundo do site está escuro pra vocês conseguirem ver isso...rsrsrs)
Esse efeito é bem antigo, alguns podem achar até meio cafona...rsrs Mas tive a ideia de usar isso em um site meu e fui pesquisar como fazer, já que eu até saberia fazer em javascript, porém sei que consumiria muito da cpu...
Hoje em dia tem um negócio chamado canvas, que é especialmente desenvolvido pra você criar animações na web sem precisar colocar um gif ou coisa do gênero... Seria a melhor opção pra quando o css não dá conta de te atender... ^^
Apesar de ser melhor do que javascript puro, esse blog deve estar travando pra você já...rsrs Isso acontece porque esse tema de visualizações dinâmicas usa ajax entre outras coisas que já fazem o pc trabalhar constantemente, aío adicionei esse efeito agora, complicou ainda mais...rsrs
Mas em um site normal, provavelmente você poderá colocar um efeito mais forte(mais bolinhas, caindo mais rápido) e mesmo assim não terá problemas...
O código à seguir foi retirado do link abaixo:
https://codepen.io/Motorheff/pen/zyYGxL
No codepen o autor esqueceu de avisar isso, pra usar esse código você vai precisar colocar entre as tag <head></head> da sua página o seguinte script:
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
Não costumo acessar muito esse site, talvez no codepen todo mundo use esse createjs, por isso ele não avisou sobre isso...rsrs Mas enfim... Fazendo isso, vocês podem copiar o código dele por esse link que passei que funcionará... Ou então vocês podem continuar lendo o meu post aqui se não souberem muito bem como colocar isso no site de vocês...
Depois disso, ainda dentro das tags head, coloque o css:
<style>
canvas {
background: transparent;
bottom: 0;
left: 0;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
}
</style>
Agora falta colocar o código javascript... Antes de </body> (fechamento da tag body), coloque esse código:
<script>
var amount = 150; // quantidade de neve caindo ao mesmo tempo
var speed = 1; // velocidade de queda
var canvas = document.createElement("canvas");
canvas.setAttribute("id", "snowCanvas");
document.body.appendChild(canvas);
var canvas = document.getElementById("snowCanvas");
var stage = new createjs.Stage("snowCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
stage.update();
});
createjs.Ticker.setFPS(27); // FPS da animação, quanto mais, melhor, porém consome mais CPU
createjs.Ticker.addEventListener("tick", stage);
function Particle(x, y, dx, dy, rad, alpha) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.rad = rad;
this.alpha = alpha;
var circle = new createjs.Shape();
stage.addChild(circle);
circle.graphics
.beginFill("rgba(255,255,255,"+this.alpha+")")
.drawCircle(0, 0, this.rad);
circle.x = this.x;
circle.y = this.y;
createjs.Ticker.addEventListener("tick", function() {
if (circle.y - rad > innerHeight || circle.x + rad > innerWidth || circle.x - rad < 0) {
circle.y = 0 - rad
circle.x = x
}
circle.x += dx;
circle.y += dy;
})
}
var circleArray = [];
for (var i = 0; i < amount; i++){
var rad = Math.random() * 3;
var alpha = (70+(Math.random()*0.5))/100;
var x = Math.random() * (innerWidth - rad * 2) + rad;
var y = Math.random() * (innerHeight - rad * 2) + rad;
var dx = (Math.random() - 0.5);
var dy = (Math.random() + 0.5) * speed;
circleArray.push(new Particle(x, y, dx, dy, rad, alpha));
}
</script>
Bom, eu fiz algumas alterações nesse código, além de mudar quantidade de particulas, velocidade e FPS, adicionei o efeito de alpha nas partículas... Porque tinha visto em um outro código e achei interessante... Se você for um usuário ainda mais avançado talvez consiga fazer as partículas irem sumindo aos poucos diminuindo o alpha...rs Mas enfim, eu não tive paciência/tempo pra descobrir como fazer isso...rsrsrs
Vale lembrar que a posição de todo esse código pode ser diferente das que eu acabei de falar, por exemplo, eu não coloquei o código css e o código javascript nas tags head, muito menos no final da página(</body>), eu coloquei o código dentro dessa postagem...rsrs Ou seja, se você não tem conhecimento pra mexer na estrutura do seu site/blog, você pode simplesmente criar um artigo, ou editar algum elemento que permita inserir código HTML e colar tudo isso junto...
O problema de fazer isso fora dos "padrões" é que pode ocasionar lentidão em algumas coisas do site... Mas se for um site leve, isso não impactará tanto...
Lembre-se de testar o seu site em computadores e celulares ruins também, pra você não acabar exagerando na neve ou no FPS e acabar prejudicando muito a navegação de quem tem hardware ruim... xD
Bom galera, por hoje foi isso, espero que vocês tenham gostado do post de hoje... =D
Valeu!
Estão estranhando o post de hoje começar sem foto? rsrs
Pois é, é porque hoje o post vai ser diferente...rsrs
Vocês devem estar percebendo que tem alguma coisa diferente rolando nessa página né?rsrs
Pois é, está "nevando" ! xD (E o fundo do site está escuro pra vocês conseguirem ver isso...rsrsrs)
Esse efeito é bem antigo, alguns podem achar até meio cafona...rsrs Mas tive a ideia de usar isso em um site meu e fui pesquisar como fazer, já que eu até saberia fazer em javascript, porém sei que consumiria muito da cpu...
Hoje em dia tem um negócio chamado canvas, que é especialmente desenvolvido pra você criar animações na web sem precisar colocar um gif ou coisa do gênero... Seria a melhor opção pra quando o css não dá conta de te atender... ^^
Apesar de ser melhor do que javascript puro, esse blog deve estar travando pra você já...rsrs Isso acontece porque esse tema de visualizações dinâmicas usa ajax entre outras coisas que já fazem o pc trabalhar constantemente, aío adicionei esse efeito agora, complicou ainda mais...rsrs
Mas em um site normal, provavelmente você poderá colocar um efeito mais forte(mais bolinhas, caindo mais rápido) e mesmo assim não terá problemas...
O código à seguir foi retirado do link abaixo:
https://codepen.io/Motorheff/pen/zyYGxL
No codepen o autor esqueceu de avisar isso, pra usar esse código você vai precisar colocar entre as tag <head></head> da sua página o seguinte script:
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
Não costumo acessar muito esse site, talvez no codepen todo mundo use esse createjs, por isso ele não avisou sobre isso...rsrs Mas enfim... Fazendo isso, vocês podem copiar o código dele por esse link que passei que funcionará... Ou então vocês podem continuar lendo o meu post aqui se não souberem muito bem como colocar isso no site de vocês...
Depois disso, ainda dentro das tags head, coloque o css:
<style>
canvas {
background: transparent;
bottom: 0;
left: 0;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
}
</style>
Agora falta colocar o código javascript... Antes de </body> (fechamento da tag body), coloque esse código:
<script>
var amount = 150; // quantidade de neve caindo ao mesmo tempo
var speed = 1; // velocidade de queda
var canvas = document.createElement("canvas");
canvas.setAttribute("id", "snowCanvas");
document.body.appendChild(canvas);
var canvas = document.getElementById("snowCanvas");
var stage = new createjs.Stage("snowCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
stage.update();
});
createjs.Ticker.setFPS(27); // FPS da animação, quanto mais, melhor, porém consome mais CPU
createjs.Ticker.addEventListener("tick", stage);
function Particle(x, y, dx, dy, rad, alpha) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.rad = rad;
this.alpha = alpha;
var circle = new createjs.Shape();
stage.addChild(circle);
circle.graphics
.beginFill("rgba(255,255,255,"+this.alpha+")")
.drawCircle(0, 0, this.rad);
circle.x = this.x;
circle.y = this.y;
createjs.Ticker.addEventListener("tick", function() {
if (circle.y - rad > innerHeight || circle.x + rad > innerWidth || circle.x - rad < 0) {
circle.y = 0 - rad
circle.x = x
}
circle.x += dx;
circle.y += dy;
})
}
var circleArray = [];
for (var i = 0; i < amount; i++){
var rad = Math.random() * 3;
var alpha = (70+(Math.random()*0.5))/100;
var x = Math.random() * (innerWidth - rad * 2) + rad;
var y = Math.random() * (innerHeight - rad * 2) + rad;
var dx = (Math.random() - 0.5);
var dy = (Math.random() + 0.5) * speed;
circleArray.push(new Particle(x, y, dx, dy, rad, alpha));
}
</script>
Bom, eu fiz algumas alterações nesse código, além de mudar quantidade de particulas, velocidade e FPS, adicionei o efeito de alpha nas partículas... Porque tinha visto em um outro código e achei interessante... Se você for um usuário ainda mais avançado talvez consiga fazer as partículas irem sumindo aos poucos diminuindo o alpha...rs Mas enfim, eu não tive paciência/tempo pra descobrir como fazer isso...rsrsrs
Vale lembrar que a posição de todo esse código pode ser diferente das que eu acabei de falar, por exemplo, eu não coloquei o código css e o código javascript nas tags head, muito menos no final da página(</body>), eu coloquei o código dentro dessa postagem...rsrs Ou seja, se você não tem conhecimento pra mexer na estrutura do seu site/blog, você pode simplesmente criar um artigo, ou editar algum elemento que permita inserir código HTML e colar tudo isso junto...
O problema de fazer isso fora dos "padrões" é que pode ocasionar lentidão em algumas coisas do site... Mas se for um site leve, isso não impactará tanto...
Lembre-se de testar o seu site em computadores e celulares ruins também, pra você não acabar exagerando na neve ou no FPS e acabar prejudicando muito a navegação de quem tem hardware ruim... xD
Bom galera, por hoje foi isso, espero que vocês tenham gostado do post de hoje... =D
Valeu!
Comentários
Postar um comentário