O HTML
Temos 3 tubos nas cores azul, amarelo e roxo. Esses pipes são caminhos SVG que criamos no Illustrator. Quando isolados da página, os caminhos SVG são assim: Há um divelemento (que tem uma classe de visual-container) que contém o svgelemento para aquela seção específica da página da web.
O divelemento tem uma altura e largura fixas. A marcação fica assim:
<div class=”visual-container”> <svg viewBox=”0 0 563 800″ class=”stroke-lines paralax on”> <!– Pipe #1 (blue) –> <path fill=”none” stroke=”#56AFD0″ stroke-width=”10″ stroke-linejoin=”bevel” stroke-miterlimit=”10″ d=”M572,0 c0,0-0.2,7.3,0.2,13.1C572.9,26.8,580.5,50,622,50c59,0,124,0,124,0s50.5-4,50.5,53s0,94,0,94s-7.5,45.5-41.5,45.5s-55,0-55,0 s-36.5-3.5-36.5,37s0,195,0,195S661.3,519,702,519c38,0,36.5,54,36.5,54v54.5c0,0,2.8,45-44.5,45c-43,0-46.5,0-46.5,0 S610.7,668,611,730c0.4,66.4,0.9,70,0.9,70″ /> <!– Pipe #2 (yellow) –> <path fill=”none” stroke=”#F5EC87″ stroke-width=”10″ stroke-miterlimit=”10″ d=”M527.5,0l0,42c0,0-3,41.5,42,41.5s112.5,0,112.5,0 s65-3.5,65,58.5s0,57,0,57v13.5c0,0-3.3,32.2,45.5,32c53.5-0.2,232,0,232,0s55.5-8,55.5,46s0,171,0,171s7.3,56.2-45.5,56 c-46-0.1-296,0-296,0s-57.8-7.5-56.5,53c1.4,65,0,102,0,102s4,51-54.5,51s-51,76.5-51,76.5″ /> <!– Pipe #3 (purple) –> <path fill=”none” stroke=”#B685C5″ stroke-width=”10″ stroke-miterlimit=”10″ d=”M550,0v90c0,0-3.3,41.4,52.5,41 c51-0.4,143.8,0,143.8,0s53.2-5,53.2,41s-6,68,39,68s183.5,0,183.5,0s55-4.3,55,50c0,56,0,175,0,175s0,43-61,43c-54,0-265,0-265,0 s-47.7-4.7-47,52.5c0.7,61,0,105,0,105s7.3,45-66,45c-77.5,0-45.5,0-45.5,0s-42.5-6-42.5,40.5s0,49,0,49″ /> </svg> </div>
O SVG
O svgelemento é a peça central de tudo, então vamos falar um pouco sobre isso. É bem direto.
O svgelemento é embutido, no sentido de que está dentro do documento em vez de ser servido como um recurso externo ( .svgarquivo). O svgelemento consiste em vários pathelementos que representam os três tubos (como dito anteriormente). Uma parte importante do svgelemento a ser observada é o viewBoxatributo.
<svg viewBox=”0 0 563 800″ class=”stroke-lines paralax on”>
O viewBoxatributo basicamente define um “palco” para o SVG. O viewBoxdo SVG será desenhado em relação ao elemento pai do SVG. Este elemento pai, no nosso caso, é o visual-containerdiv.
O viewBoxatributo recebe quatro números : min-x, min-ye width . height
viewBox=”[min-x] [min-y] [width] [height]”
Os dois primeiros números, min-xe min-y, são a origem do viewBoxcom relação ao elemento pai do SVG. No nosso caso, nosso viewBoxcomeça em (0, 0).
Isso significa que a viewBoxorigem está no canto superior esquerdo da visual-containerdiv. A partir do canto superior esquerdo, um retângulo com largura de 563px e altura de 800px é desenhado. Esse retângulo é o nosso “palco”. Ele conterá os elementos SVG. Por que o viewBoxatributo importa? O “S” em SVG significa “escalável”. O viewBoxatributo nos permite dizer ao navegador como dimensionar nossos SVGs. Quando declaramos explicitamente um viewBoxatributo, reduzimos o risco de que nosso gráfico seja distorcido quando não for usado nas dimensões exatas para as quais foi criado.
O CSS
O CSS da página foi composto com Sass :
div.visual-container { width: 503px; height: 800px; position: relative; } svg.paralax { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 805px; width: 503px; margin: 0 auto; z-index: 0; overflow: visible; path, polyline { fill: none; stroke-dasharray: 3000px; stroke-dashoffset: 3000px; transition: 1.5s stroke-dashoffset ease-in; } &.on { path, polyline { stroke-dashoffset: 0; } } } // For Internet Explorer html[data-useragent*=’Trident’] { svg.paralax { path, polyline { stroke-dashoffset: 0; transition:none; } } }
Aqui está o CSS compilado:
div.visual-container { width: 503px; height: 800px; position: relative; } svg.paralax { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 805px; width: 503px; margin: 0 auto; z-index: 0; overflow: visible; } svg.paralax path, svg.paralax polyline { fill: none; stroke-dasharray: 3000px; stroke-dashoffset: 3000px; transition: 1.5s stroke-dashoffset ease-in; } svg.paralax.on path, svg.paralax.on polyline { stroke-dashoffset: 0; } html[data-useragent*=’Trident’] svg.paralax path, html[data-useragent*=’Trident’] svg.paralax polyline { stroke-dashoffset: 0; transition: none; }
As principais propriedades CSS que usei para o efeito de tubo SVG animado são stroke-dasharraye stroke-dashoffset.
A transitionpropriedade foi usada para criar o efeito de que os pipes estão sendo renderizados dinamicamente enquanto o usuário está rolando a página.
svg.paralax path, svg.paralax polyline { fill: none; stroke-dasharray: 3000px; stroke-dashoffset: 3000px; transition: 1.5s stroke-dashoffset ease-in; } svg.paralax.on path, svg.paralax.on polyline { stroke-dashoffset: 0; }
stroke-dasharrayé uma propriedade legal que nos permite criar um padrão tracejado em seu traço. Este é o truque chave do efeito. Usamos a stroke-dasharraypropriedade em conjunto com stroke-dashoffsetpara fazer parecer que os tubos estão sendo desenhados enquanto o usuário está rolando a página.
stroke-dashoffsetinforma ao navegador onde começar a pintar a matriz de traços no caminho. Por exemplo – apenas para simplificar – vamos fingir que 0px é o início do caminho e 100px é o fim. Definir a stroke-dashoffsetpropriedade como 50px informará ao navegador para iniciar a stroke-dasharray50px no caminho.
Você pode ver que o deslocamento no exemplo a seguir está forçando o padrão de traçado a pintar apenas parte do caminho completo. Então, no nosso caso, isso cria um caminho que se parece com isso: O caminho já está totalmente desenhado, mas o traço não abrange todo o caminho por causa do nosso CSS. É assim que a mágica acontece.
Se usarmos a transitionpropriedade CSS em stroke-dashoffset, podemos fazer com que pareça que os tubos estão sendo desenhados em tempo real:
transition: 1.5s stroke-dashoffset ease-in;
O JavaScript
Agora para cronometrar a animação. Queríamos fazer parecer que os tubos estavam chamando você para continuar rolando a página conforme você entrava na seção da página. Para fazer isso, temos alguns listeners JavaScript vinculados ao scrollevento do documento para que quando o usuário chegar a uma determinada seção, acionemos o CSS transition.
document.addEventListener(‘scroll’,function (event) { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; if (scrollTop > 456) { document.querySelector(‘section.dashboard svg.paralax’).classList.add(‘on’); document.querySelector(‘section.dashboard svg.paralax.small’).classList.add(‘on’); } })
No ponto em que o usuário percorreu cerca de dois terços dos tubos SVG em que está, iniciamos a animação para o próximo conjunto de tubos simplesmente adicionando um atributo de classe chamado paralaxque altera o deslocamento do traço no caminhos.