Wavify – Como usar o codepen no wordpres

  • deubode

    (@deubode)


    3 anos, 8 meses atrás

    Olá amigos, estou tentando usar um efeito do codepen no meu site mas não consigo. O efeito que tenho interesse é o Wavify. Estou tentando usar este:

    https://codepen.io/cosmicamy/pen/pGeXyz

    meu codigo:

    <!DOCTYPE html>
<html>
<head>
 <style> 
svg {
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.box {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  position: absolute;
  z-index: 1;
}</style>
</head>
</html>
</head>
<body><div class="container"></div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/></svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="dave" d=""/></svg>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85188/jquery.wavify.js"></script>
</div>

<script>$('#wave').wavify({
  height: 60,
  bones: 3,
  amplitude: 40,
  color: 'rgba(0, 145, 234,.25)',
  speed: .25
});
$('#dave').wavify({
  height: 50,
  bones: 7,
  amplitude: 50,
  color: 'rgba(0, 145, 234,.25)',
  speed: .30
});
</script></body></p></p></div>

    O efeito aparece mas a página desconfigura toda, e ainda aparece uma segunda barra de rolagem ao lado.

    Exemplo de comoquero deixar: https://polvo.com.br/

    Quem poder me “helpar” agradeço de coração ♥

  • O tópico ‘Wavify – Como usar o codepen no wordpres’ está fechado para novas respostas.