Efeito Canavas no fundo do fórum

por iScroll 13.05.17 21:22

Detalhes da questão

Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: PunBB

Descrição

Olá, gostaria desse efeito que tenho na minha index: http://prntscr.com/f7hc80

Nessas partes do meu fórum:
http://prntscr.com/f7hdj3
e nas laterais : http://prntscr.com/f7hgov

por Luiz 13.05.17 21:57

Olá,

O senhor arrumou esse efeito canvas onde?
Ele é feito por uma biblioteca JS? Poderia passar o link de onde conseguiu pegar tal efeito para eu ler a API e tentar entender?
Não sou muito bom com canvas, mas vou tentar aprender para lhe ajudar, desde que haja uma API.

o/

por iScroll 13.05.17 22:07

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js
Cá está.

por Luiz 13.05.17 22:12

Esse é o código.
Qual é o site que explica o funcionamento dele? o7

Deve ter um README.md no Github ou um site mesmo explicando...

o/

por iScroll 13.05.17 22:28

https://ajuda.forumeiros.com/t109016-carregar-forum#764514

O código estaria aqui, tenta analisar ai pra ver se acha algo :/

por Luiz 13.05.17 22:36

Consegui pelo inspecionar elemento!! Feliz

Precisarei do seu overall_header.

o/

por iScroll 13.05.17 22:47

Vamos lá kkk
https://pastebin.com/MBfbqVK1

por Luiz 13.05.17 23:03

Procure por <body>, e depois dele, adicione o seguinte:

Código:: <canvas id="background-canvas" width="1298" height="974"></canvas> <style> canvas#background-canvas { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: -1; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js" type="text/javascript"></script> <script type="text/javascript"> ! 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() }(); </script>

o/

por iScroll 13.05.17 23:08

Sem resultado

por Luiz 13.05.17 23:12

Apague as últimas atualizações no overall e crie um novo JS com o código:

Código:: (function ($) { $(function () { $.getScript('https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'); $('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));

o/

por iScroll 14.05.17 0:12

Aew \o/ funfou, mas percebi que o wallpaper do fundo ele vai junto com a página quando você gira, teria como fixar ele para não abaixar o wallpaper ? Acho que deu pra entender kk
----

Edit
Acabei apagando um codigo sem querer e achei q fosse esse kkk, mals, pode fechar e muito obrigado.

por Luiz 14.05.17 0:44

De nada.
Acho que vou até fazer um tutorial para isso... É um efeito muito legal!

Eu dei uma analisada nessa biblioteca JS... É excelente para animações!

---

Efeito Canavas no fundo do fórum Symbol10

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".

Hitskin.com

Efeito Canavas no fundo do fórum