Embedding a CSS longer than 10.000 characters

Design help Custom code
1

Hi guys,

I would like to embed a CSS animation from Codepen but it’s long. I tried to look on forum and there are some solutions with GitHub which are a bit outdated because something shut down/changed on their end.

How could I actually embed it then?

Also if the code on codepen is divided in to CSS/html/javascript, as far as I understand I place CSS through , javascript into a page’s before </body/ but where do I actually put the HTML snippet?

I am actually trying with this Codepen animation: https://codepen.io/alvarotrigo/pen/ZEJqLzY

P.s. I know that I could maybe re-create this specific one with webflow’s interactions but I would like to understand the principle of using embedded code from Codepen because maybe I am going to use other animations which I wouldn’t be able to create in Webflow.

thank you

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi, injecting code from GitHub is simple, you can do so with the below script.

<div id="ajaxContent" style="width: 100%;"></div>
<script>
  var Webflow = Webflow || [];
  Webflow.push(function() {
    $.get('https://your-page.github.io/path', function(data) {
      $('#ajaxContent').append(data);
    });
  });
</script>

And about how to set up on GitHub, please look at: https://pages.github.com

3

hi thank you for the answer.
it seems that this link explains how to create a website using GitHub codes or something. I am not so good at this.

I am not sure how to work with that if I have to embed both CSS and HTML snippets from Codepen

4

I created this file

is this the path that I have to use in the code snippet you suggested?

5

um… not sure if you set up the public page correctly or not
it may look like this if you do it correctly: meetingingorkipark.github.io/customysocks/xxxxxxxxx.xxxx

And as you are injecting the code into body, you probably need to make the file on GitHub as .html.

So, the path will be xxxx.html and don’t forget to wrap the CSS with <style> </style> to make it works like inline styles.

6

&::after
content: ‘’
position: absolute
width: 100%
height: 100%
border-radius: 50%
transform-origin: -10vw

&::before
background: black
opacity: 0.4
animation: drift ease alternate infinite

&::after
background: white
opacity: 0
box-shadow: 0 0 0vw 0vw yellow
animation: drift ease alternate infinite, flash ease infinite

// Randomize Fireflies Motion
@for $i from 1 through $quantity

$steps: random(12) + 16
$rotationSpeed: random(10) + 8s

.firefly:nth-child(#{$i})
animation-name: move#{$i}

&::before
  animation-duration: #{$rotationSpeed}

&::after
  animation-duration: #{$rotationSpeed}, random(6000) + 5000ms
  animation-delay: 0ms, random(8000) + 500ms

@keyframes move#{$i}
@for $step from 0 through $steps
#{$step * (100 / $steps)}%
transform: translateX(random(100) - 50vw) translateY(random(100) - 50vh) scale(random(75) / 100 + .25)

@keyframes drift
8%
transform: rotate(0deg)
100%
transform: rotate(360deg)

@keyframes flash
0%, 30%, 100%
opacity: 100
box-shadow: 0 0 0vw 0vw yellow
5%
opacity: 100
box-shadow: 0 0 2vw 0.4vw yellow.

I THINK IT IS SLOVED😊