I want to use codepen code into a page… but the scripts are only loading in an html-frame but not in a before body…
I have a problem with my large project: html-frame can only contain 10000 characters so I want to load my script via before body…
I did a test with small code: but this 2 scripts are not loading (also not when I put them at ‘custom code’ for all the pages… why?
this is the code https://codepen.io/karelrosseel-prive/pen/qBNoNgo
in codepen the 2 scripts you can find in the settings
the total code
// Sprite by Antonio Caggiano - use for educational purposes only
const scaling = "fit"; // this will resize to fit inside the screen dimensions
const width = 3000;
const height = 768;
const color = dark; // ZIM colors like green, blue, pink, faint, clear, etc.
const outerColor = darker; // any HTML colors lke "violet", "#333", etc. are fine to use
const assets =
["https://raw.githubusercontent.com/karelrosseel/fietsverzet/master/blauw50.png",
"https://i.ibb.co/Jy2PfD6/g"];
const frame = new Frame(scaling, width, height, color, outerColor, assets);
frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
zog("ready from ZIM Frame"); // logs in console (F12 - choose console)
// often need below - so consider it part of the template
const stage = frame.stage;
const stageW = frame.width;
const stageH = frame.height;
// REFERENCES for ZIM at https://zimjs.com
// see https://zimjs.com/intro.html for an intro example
// see https://zimjs.com/learn.html for video and code tutorials
// see https://zimjs.com/docs.html for documentation
// see https://codepen.io/topic/zim/ for ZIM on CodePen
// CODE HERE
var points = [[-230.1,226.1,0,0,-148.6,-27.6,148.6,27.6],[-17,59,19.4,-5.1,-30,47.1,68.9,-57.3],[154.1,51.1,0,0,-39.2,-53.2,39.2,53.2],[216.8,250.3,0,0,-76,-50.1,76,50.1],[420.9,213.8,0,0,-65.8,-3.1,65.8,3.1]];
const path = new Squiggle({
thickness:20,
points:points,
color:"yellow",
dashed:false,
interactive:true,
onTop: false,
}).sca(1.5).center().mov(100,-100);
asset("https://raw.githubusercontent.com/karelrosseel/fietsverzet/master/blauw50.png")
.clone()
.centerReg()
.sca(2)
.outline()
.animate({
props:{path:path, flip:true},
time:10000,
ease:"linear",
rewind:false,
loop:true
});
asset("https://raw.githubusercontent.com/karelrosseel/fietsverzet/master/blauw50.png")
.clone()
.centerReg()
.alp(0)
.sca(2)
// .outline()
.animate({
props:{path:path, flip:true},
wait:1000,
waitedCall:plane=>{plane.alp(1)},
time:10000,
ease:"linear",
rewind:false,
loop:true
});
asset("https://raw.githubusercontent.com/karelrosseel/fietsverzet/master/blauw50.png")
.clone()
.alp(0)
.centerReg()
.sca(2)
// .outline()
.animate({
props:{path:path, flip:true},
wait:2000,
waitedCall:plane=>{plane.alp(1)},
time:10000,
ease:"linear",
rewind:false,
loop:true
});
new Label({ // found on https://zimjs.com/ten/beads3.html
text:"drag or double tap points - shift (or hold) click to remove - click to add",
size:20,
color:white
}).alp(.7).pos(0,30,CENTER,BOTTOM)
stage.update(); // this is needed to show any changes
}); // end of ready
</script>
my project: page:
https://smc-techniek.webflow.io/2a/rollercoaster1
my project:
https://preview.webflow.com/preview/smc-techniek?utm_medium=preview_link&utm_source=designer&utm_content=smc-techniek&preview=c1a69b62e9be914e4ce29f8da17a629d&pageId=5f9bcfbc6d8f48a9051f8f4f&mode=preview