need help integrating a piece of custom code

[Jeremy_Levy]

Hello,

I’m trying to embed a piece of code in a section of my page, but not in an iframe. It’s a scroll effect that isn’t taken into account in my iframe, so I need to implement it in the Wix Studio code editor, but I can’t. Can someone help me? Here’s the code.

Effet Parallaxe /* Reset et centrage */ body { height: 100vh; margin: 0; display: grid; place-items: center; overflow: hidden; }

/* Conteneurs */
.wrapper,
.content {
  position: relative;
  width: 100%;
  z-index: 1;
}
.content {
  overflow: hidden;
}

/* Section hero pleine hauteur */
.content .section {
  width: 100%;
  height: 100vh;
}
.hero {
  background-image: url("https://codetheworld.io/wp-content/uploads/2024/05/hero.jpeg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Conteneur image 3D */
.image-container {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  perspective: 500px;
  overflow: hidden;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

[Rob]

Do you have more to the code by chance? All of this seems to be CSS which manages the styling of elements but I’m unsure of how things should be styled and how elements should be structured and if there is more to the site.
Here’s a screenshot:

You can see what I did on a site here as well. https://robertor0.wixstudio.com/my-site-63

[Jeremy_Levy]

I can integrate it into an iframe but the interaction doesn’t work. When you scroll on this section, it zooms into the circle until the entire image behind it appears.