1

Estou com um problema com meu efeito em svg adicionei um efeito de triângulos com svg e js em uma das sessões do meu site como podem ver funciona normalmente porem precisava colocar esse efeito novamente em outra sessão estou chamando o efeito via class e não por id porém não funciona ele só funciona na primeira sessão segue as fotos Primeira sessão funcionando: inserir a descrição da imagem aqui

Segunda sessão não funciona: inserir a descrição da imagem aqui

Percebam que nem os triângulos aparecem porque? pelo que entendo o javascript só esta pegando a primeira class e a segunda ele não encontra então não ativa o efeito segue meus códigos:

HTML:

JS:

/*SVG Background*/
        var refreshDuration = 6000;
        var refreshTimeout;
        var numPointsX;
        var numPointsY;
        var unitWidth;
        var unitHeight;
        var points;

        function onLoad()
        {
            var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            svg.setAttribute('width',window.innerWidth);
            svg.setAttribute('height',window.innerHeight);
            document.querySelector(".bg").appendChild(svg);

            var unitSize = (window.innerWidth+window.innerHeight)/20;
            numPointsX = Math.ceil(window.innerWidth/unitSize)+1;
            numPointsY = Math.ceil(window.innerHeight/unitSize)+1;
            unitWidth = Math.ceil(window.innerWidth/(numPointsX-1));
            unitHeight = Math.ceil(window.innerHeight/(numPointsY-1));

            points = [];

            for(var y = 0; y < numPointsY; y++) {
                for(var x = 0; x < numPointsX; x++) {
                    points.push({x:unitWidth*x, y:unitHeight*y, originX:unitWidth*x, originY:unitHeight*y});
                }
            }

            randomize();

            for(var i = 0; i < points.length; i++) {
                if(points[i].originX != unitWidth*(numPointsX-1) && points[i].originY != unitHeight*(numPointsY-1)) {
                    var topLeftX = points[i].x;
                    var topLeftY = points[i].y;
                    var topRightX = points[i+1].x;
                    var topRightY = points[i+1].y;
                    var bottomLeftX = points[i+numPointsX].x;
                    var bottomLeftY = points[i+numPointsX].y;
                    var bottomRightX = points[i+numPointsX+1].x;
                    var bottomRightY = points[i+numPointsX+1].y;

                    var rando = Math.floor(Math.random()*2);

                    for(var n = 0; n < 2; n++) {
                        var polygon = document.createElementNS(svg.namespaceURI, 'polygon');

                        if(rando==0) {
                            if(n==0) {
                                polygon.point1 = i;
                                polygon.point2 = i+numPointsX;
                                polygon.point3 = i+numPointsX+1;
                                polygon.setAttribute('points',topLeftX+','+topLeftY+' '+bottomLeftX+','+bottomLeftY+' '+bottomRightX+','+bottomRightY);
                            } else if(n==1) {
                                polygon.point1 = i;
                                polygon.point2 = i+1;
                                polygon.point3 = i+numPointsX+1;
                                polygon.setAttribute('points',topLeftX+','+topLeftY+' '+topRightX+','+topRightY+' '+bottomRightX+','+bottomRightY);
                            }
                        } else if(rando==1) {
                            if(n==0) {
                                polygon.point1 = i;
                                polygon.point2 = i+numPointsX;
                                polygon.point3 = i+1;
                                polygon.setAttribute('points',topLeftX+','+topLeftY+' '+bottomLeftX+','+bottomLeftY+' '+topRightX+','+topRightY);
                            } else if(n==1) {
                                polygon.point1 = i+numPointsX;
                                polygon.point2 = i+1;
                                polygon.point3 = i+numPointsX+1;
                                polygon.setAttribute('points',bottomLeftX+','+bottomLeftY+' '+topRightX+','+topRightY+' '+bottomRightX+','+bottomRightY);
                            }
                        }
                        polygon.setAttribute('fill','rgba(0,0,0,'+(Math.random()/3)+')');
                        var animate = document.createElementNS('http://www.w3.org/2000/svg','animate');
                        animate.setAttribute('fill','freeze');
                        animate.setAttribute('attributeName','points');
                        animate.setAttribute('dur',refreshDuration+'ms');
                        animate.setAttribute('calcMode','linear');
                        polygon.appendChild(animate);
                        svg.appendChild(polygon);
                    }
                }
            }

            refresh();

        }

        function randomize() {
            for(var i = 0; i < points.length; i++) {
                if(points[i].originX != 0 && points[i].originX != unitWidth*(numPointsX-1)) {
                    points[i].x = points[i].originX + Math.random()*unitWidth-unitWidth/2;
                }
                if(points[i].originY != 0 && points[i].originY != unitHeight*(numPointsY-1)) {
                    points[i].y = points[i].originY + Math.random()*unitHeight-unitHeight/2;
                }
            }
        }

        function refresh() {
            randomize();
            for(var i = 0; i < document.querySelector(".bg svg").childNodes.length; i++) {
                var polygon = document.querySelector(".bg svg").childNodes[i];
                var animate = polygon.childNodes[0];
                if(animate.getAttribute('to')) {
                    animate.setAttribute('from',animate.getAttribute('to'));
                }
                animate.setAttribute('to',points[polygon.point1].x+','+points[polygon.point1].y+' '+points[polygon.point2].x+','+points[polygon.point2].y+' '+points[polygon.point3].x+','+points[polygon.point3].y);
                animate.beginElement();
            }
            refreshTimeout = setTimeout(function() {refresh();}, refreshDuration);
        }

        function onResize() {
            document.querySelector(".bg svg").remove();
            clearTimeout(refreshTimeout);
            onLoad();
        }

        window.onload = onLoad;
        window.onresize = onResize;

OBS: Código pego desse site aqui

1 Resposta 1

1

Uma forma de solucionar isso é colocando no final da sua função onLoad():

var bg_svg = $("div.bg").first().html();
$("div.bg").each(function(){
   if($(this).find("svg").length == 0) $(this).html(bg_svg);
});

Isso irá clonar o conteúdo da primeira sessão e jogar dentro da segunda que está vazia (ou de todas que estiverem vazias).

Ou, se forem apenas 2, você pode usar:

$("div.bg:eq(1)").html($("div.bg").first().html());
9
  • cara muito obrigado funcionou porém acontece um probleminha tipo eu fiz aqui ele funciona na primeira e na segunda porem a segunda funciona um pouco depois para e nao volta a funcionar vou upar essa com essa sua resposta no link ai você da uma olhada deepocean.com.br/2018 30/01/2018 às 16:19
  • a primeira sessçao funciona normal e nao para já la na ultoima sessão funciona por um tempo depois os triangulos param de se mexer subi no servidor da uma olhadinha por favor 30/01/2018 às 16:20
  • 1
    @Kirito Vou dar uma olhada...
    – Meu ovo
    30/01/2018 às 16:22
  • beleza te mandei o link ai nos comentários 30/01/2018 às 16:25
  • 1
    @Kirito Localize o setTimeout dentro da função "refresh()"
    – Meu ovo
    30/01/2018 às 17:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .