How to implement CodePen magic into Xara
I regularly get CodePen emails and view the amazing things people do there with HTML, CSS & JS but I've never understood if this can be implemented within a Xara page.
Below is a link to one I really think is great (but I'll never have cause to use it!)
How do you go about placing this code into a Xara page please?
LINK
Re: How to implement CodePen magic into Xara
Egg, most CodePens are fairly straightforward but the need for a module to support the import call to three.js and use of three.js-toys defeats me.
GitHub https://github.com/klevron/threejs-toys requires an npm call: npm install three threejs-toys so there is a lot of building required.
Trawling around raised a number of dodgy sites so I veered off.
Instead, as an exercise, try this CodePen: https://codepen.io/al-ro/pen/BaaBage.
Where you have:
<body> <canvas id="canvas" width="1400" height="600"></canvas>
</body>
Create a Placeholder 1400x600px.
In its body, put:
<div>
<canvas id="canvas" width="100%" height="100%"></canvas>
</div>
This gives you more Xara flexibility.
You can ignore its CSS as this is only for making the page Black.
In Xara, that is more easily done, giving, again, better control.
Finally, place the JavaScript inside <script> tags and put under the <div>.
As a rule HTML and JS in the Placeholder body.
CSS in a head (Placeholder or Website), noting Xara CSS is in-line and could overwrite parts.
Acorn
Re: How to implement CodePen magic into Xara
Thanks for that Acorn. I had no issue getting the neon heart to work.
I'll be giving it more go's in the future and if I get stuck I know who to ask ;)