Codepen Custom Code help

Design help Custom code
1

Hello,

Im new to custom code but have found something that is exactly what I’m looking to use as my home page design. The problem is I don’t know how to implement it to my homepage. Is there anyone who can guide me through the process of getting this on my site? Ive looked everywhere on line and tried so many things to no avail. Any help would be seriously amazing.

here’s what im trying to add

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="djqNrm" data-user="vcomics" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/vcomics/pen/djqNrm">
  Perlin Noise</a> by Victor Vergara (<a href="https://codepen.io/vcomics">@vcomics</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

or the CodePen link: https://codepen.io/vcomics/pen/djqNrm

and here is my read only:
https://preview.webflow.com/preview/voxstudios?utm_medium=preview_link&utm_source=designer&utm_content=voxstudios&preview=23bc1f318ca3d4f5dfec2eb72948e82f&workflow=preview

2

Hey Stephen,

Here’s a breakdown of what you need to do, but it’s a fair bit of effort.

1 Like
4

Thank you for this. I’m very new to cust coding but have watched some tutorials of people adding codepen to their Webflow sites and it definitely didn’t look as hard as this gentleman is talking about.

Also for the codepen I’m trying to use, there’s actually no relevant CSS in it. For instance the only CSS it’s using is for the words it has on it. Like the name or header. And that’s something I am not trying to use anyway. My main focus was on the moving graphic.

The problem I’m having is figuring out what to put where. Like I don’t see a Div anywhere, just a container and I don’t really know what to call it. Haha. Sucks to think I’ve finally found what I’ve been after for almost 5 months only to not be able to use it

5

Yeah that’s my video, it walks through the main problems you’ll face. In your case, compiling the Pug code, and reassembling everything into a structure that will work in your page layout.

There’s not much more to say there, the rest is just reading the webflow U stuff on where custom code goes. Once you design code that will work for you, that’s where you’ll put it.

7

Well I appreciate you answering me and trying to help. I feel like every time I finally make headway on my site I run into a whole new issue. Lol. What’s throwing me off in the “HTML” portion of the codepen is I don’t see a div anywhere. And I don’t understand this means

#container
script#vertexShader(type=‘x-shader/x-vertex’).

I guess im asking do I need to add that to a div?

Again thank you for your help

8

Hey Stephen, no that’s not HTML, that’s Pug.
Watch the video, it covers all of this.

Just be aware, like I explained in the video, this process is going to be rather like onion-peeling. You’ll most likely find another conversion problem after that, and another after that. I went into some detail on the main issues I’ve encountered.

In the end, you’re essentially re-building a widget that’s based on the original code concept. But it’s a good way to learn some programming concepts.

10

Hey Michael!

So AMAZING news after many painstaking hours of reworking code and a wonderful tool that converts pug into Webflow html I was able to get my graphic on my Webflow site!!! Seeing as you have been so helpful I was wondering if you could help me with the last piece of the puzzle.

Currently on my site I have a piece of javascript that constantly changes my background color.

<script type="text/javascript">
function setbackground()
{
window.setTimeout( "setbackground()", 15000); // 5000 milliseconds delay
var index = Math.round(Math.random() * 8);
var ColorValue = "ada197"; // default color - lt brown (index = 0)
if(index == 1)
ColorValue = "d2d8cc"; //off white
if(index == 2)
ColorValue = "ff2c34"; //red
if(index == 3)
ColorValue = "83735b"; //brown
if(index == 4)
ColorValue = "ff546e"; //pink
if(index == 5)
 ColorValue = "c7ff64"; //green
if(index == 6)
ColorValue = "ebfcc7"; //lt green
if(index == 7)
ColorValue = "ffc8ca"; //pink
if(index == 8)
ColorValue = "ffd4d6"; //lt pink



document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;

document.querySelector(".kunst-footer").style.backgroundColor = "#" + ColorValue;


//Transitions
document.getElementsByTagName("body")[0].style.transition = "all 8s";
document.querySelector(".c-nav-main").style.transition = "all 8s";
document.querySelector(".kunst-footer").style.transition = "all 10s";
}
</script>
<body onload="setbackground();">

My FINAL issue im having is making it so that my graphics background also changes color. Currently it remains this red color and it also looks as though the whole section was added. is there a way to get rid of the red background all together and just keep my graphic so that I can see my changing colors?

Thank you again!!! can’t believe I was actually able to make this happen hahaha