Welcome to TalkGraphics.com
Results 1 to 3 of 3
  1. #1
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default 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
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default 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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  3. #3
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default 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
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •