Fundo do fórum animado

[Jhool]

Detalhes da questão

Endereço do fórum: http://familiawarning.forumeiros.com/forum
Versão do fórum: PunBB

Descrição

Olá, o meu fórum não tem fundo algum e estava tentando achar alguns legais, até que eu encontrei este fórum e achei algo muito interessante, o fundo do fórum dele é em gif e quando coloca o mouse encima ele faz uma animação. Poderiam me passar um código parecido? ou ensinar colocar um fundo desta forma?

Fórum em que vi: http://brasilplayultimate.forumeiros.com/portal

[Kyo Panda]

Acredito que o senhor busca isso:

https://ajuda.forumeiros.com/t109024-efeito-canavas-no-fundo-do-forum#764568

[Jhool]

Tentei de todas as formas e não consegui, segui certinho o que foi dito no tópico, criei o JS e tudo, mas não funcionou.

Tem como me ajudar?

[Kyo Panda]

Utilize esse script com Investimento em Todas as páginas:

Código:

(function ($) {
   $(function () {

      $.getScript('https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js').then(function() {
         $('body').prepend('<canvas id="background-canvas"></canvas>');

         !function(){function s(){e=window.innerWidth,i=window.innerHeight,r={},n=document.getElementById("background-canvas"),n.width=e,n.height=i,o=n.getContext("2d"),y()}function u(){"ontouchstart"in window||window.addEventListener("mousemove",h),window.addEventListener("resize",p)}function d(){v()}function v(){a&&w(),requestAnimationFrame(v)}function h(e){var i=posy=0;e.pageX||e.pageY?(i=e.pageX,posy=e.pageY):(e.clientX||e.clientY)&&(i=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,posy=e.clientY+document.body.scrollTop+document.documentElement.scrollTop),r.x=i,r.y=posy}function p(){e=window.innerWidth,i=window.innerHeight,n.width=e,n.height=i;for(var o in t)TweenLite.killTweensOf(t[o]);y()}function y(){t=[];for(var n=0;e/c>=n;n++)for(var o=0;i/c>o;o++){var r=n*c,a=o*c,f={x:r,originX:r,y:a,originY:a};t.push(f)}for(var s=0;s<t.length;s++){for(var u=[],d=t[s],v=0;v<t.length;v++){var h=t[v];if(d!=h){for(var p=!1,y=0;5>y;y++)p||void 0==u[y]&&(u[y]=h,p=!0);for(var y=0;5>y;y++)p||x(d,h)<x(d,u[y])&&(u[y]=h,p=!0)}}d.closest=u}for(var s in t){var w=new b(t[s],l,"rgba(255,255,255,0.3)");t[s].circle=w}for(var s in t)g(t[s])}function w(){o.clearRect(0,0,e,i);for(var n in t)r&&(Math.abs(x(r,t[n]))<4e3?(t[n].opacity=.3,t[n].circle.opacity=1):Math.abs(x(r,t[n]))<2e4?(t[n].opacity=.1,t[n].circle.opacity=1):Math.abs(x(r,t[n]))<4e4?(t[n].opacity=.02,t[n].circle.opacity=.8):(t[n].opacity=0,t[n].circle.opacity=.7)),t[n].circle.color="rgba(0,146,255)",m(t[n]),t[n].circle.draw()}function g(e){TweenLite.to(e,1+1*Math.random(),{x:e.originX+Math.random()*(c/2),y:e.originY+Math.random()*(c/2),ease:Circ.easeInOut,onComplete:function(){g(e)}})}function m(e){if(r)for(var i in e.closest)o.beginPath(),o.moveTo(e.x,e.y),o.lineTo(e.closest[i].x,e.closest[i].y),o.strokeStyle="rgba(0,146,255,"+e.opacity+")",o.stroke()}function b(e,i,n){var t=this;!function(){t.pos=e||null,t.radius=i||null,t.color=n||null}(),this.draw=function(){o.beginPath(),o.arc(t.pos.x,t.pos.y,t.radius,0,2*Math.PI,!1),o.fillStyle="rgba(0,146,255,"+t.opacity+")",o.fill()}}function x(e,i){return Math.pow(e.x-i.x,2)+Math.pow(e.y-i.y,2)}var e,i,n,o,t,r,a=!0,c=45,l=2;s(),d(),u()}();
      });
   });
}(jQuery));

E adicione ao CSS:

Código:

#background-canvas {
    position: fixed;
}

[Jhool]

Tem alguma forma de trocar a cor das bolinhas?

[Kyo Panda]

No código, procure por:

Código:

rgba

Ele indica qual cor será desenhada na tela. Se quisesse mudar o azul para vermelho, por exemplo:

Código:

rgba(0,146,255

Ficaria:

Código:

rgba(255,0,0

[Jhool]

Resultou, obrigado, pode fechar.

[Kyo Panda]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas.