Jump to content

Adding codepen to website

Recommended Posts

2 hours ago, Lillynbhbu said:

Site URL: https://codepen.io/scallemang/pen/GJBbZQ

Hello,

I am trying to add this codeopen to my website but it is not showing up on my page when I copy the code, I am not sure what I am doing wrong. https://codepen.io/scallemang/pen/GJBbZQ 

I convert the sccs to css and made some changes

<div class="text-anim">
  <svg viewBox="0 0 840 600">
    <symbol id="s-text">
      <text text-anchor="middle"
            x="50%"
            y="60%"
            class="text--line"
            >
        SCA
      </text>
    </symbol>

    <g class="g-ants">
      <use xlink:href="#s-text"
        class="text-copy"></use>     
      <use xlink:href="#s-text"
        class="text-copy"></use>     
      <use xlink:href="#s-text"
        class="text-copy"></use>     
      <use xlink:href="#s-text"
        class="text-copy"></use>     
      <use xlink:href="#s-text"
        class="text-copy"></use>     
    </g>


  </svg>
</div>

<style>
  @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
.text-anim {
  height: 100%;
}

.text-anim {
  background: white;
  font: 20em/1 'Montserrat', serif;
}

.text-anim svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: 6% 29%;
  stroke-width: 5;
  stroke-dashoffset: 0%;
  -webkit-animation: stroke-offset 5s infinite linear;
          animation: stroke-offset 5s infinite linear;
}
.text-copy:nth-child(1) {
  stroke: #4CAF50;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.text-copy:nth-child(2) {
  stroke: #F44336;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
.text-copy:nth-child(3) {
  stroke: #03A9F4;
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.text-copy:nth-child(4) {
  stroke: #FF9800;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
}
.text-copy:nth-child(5) {
  stroke: #9C27B0;
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}

@-webkit-keyframes stroke-offset {
  100% {
    stroke-dashoffset: -35%;
  }
}

@keyframes stroke-offset {
  100% {
    stroke-dashoffset: -35%;
  }
}

</style>

image.png.5781c89d6302e8ca61640b0fbcfcff28.png

image.thumb.png.007172160751161c15daf2a5085417ff.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.