Efeito Canavas no fundo do fórum

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Efeito Canavas no fundo do fórum

Mensagem 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


Última edição por iScroll em 14.05.17 0:24, editado 1 vez(es)
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito Canavas no fundo do fórum

Mensagem 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/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Canavas no fundo do fórum

Mensagem por iScroll 13.05.17 22:07

iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito Canavas no fundo do fórum

Mensagem 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/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Canavas no fundo do fórum

Mensagem 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 :/
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito Canavas no fundo do fórum

Mensagem por Luiz 13.05.17 22:36

Consegui pelo inspecionar elemento!! Feliz Muito feliz
Precisarei do seu overall_header.

o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Canavas no fundo do fórum

Mensagem por iScroll 13.05.17 22:47

iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito Canavas no fundo do fórum

Mensagem 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/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Canavas no fundo do fórum

Mensagem por iScroll 13.05.17 23:08

Sem resultado ...
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito Canavas no fundo do fórum

Mensagem 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/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Canavas no fundo do fórum

Mensagem 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.
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito Canavas no fundo do fórum

Mensagem 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 - 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".
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos