Implement HTML & Java Script + CSS to Homepage

  • Hello everyone!

    For a website I would like to create a SVG-based scroll animation of a line that goes back and forth according to the user’s scrolling.
    Similar to this: Example Page

    I found a tutorial for that Youtube.

    Now I got a HTML file WITH Javascript and CSS. How to I get that scrolling animation from the HTML file to my homepage (just the landing page)?

    If you have an idea, please explain in detail, for I am not very proficient with this advanced backend work.

    Thanks in advance!

    Regards,

    M.H.

    • This topic was modified 2 years, 4 months ago by mh1web.
Viewing 2 replies - 1 through 2 (of 2 total)

  • You would have to use the Functions.php file to enqueue your scrips. It probably already has a section in the functions.php to enqueue scripts and styles. You could also create a small plugin and have it enqueue the style sheets and scripts. In the long run the plugin would probably work best.

    For the image you could try using an image block to add your svg image. The only problem is that it wouldn’t bind to the sites DOM. So a better option would be to use the custom HTML block and create an <SVG> tag and put the xml code from your svg graphic in it. This would cause the svg image to be applied to your DOM. You would need to add the classes and id that your script needs.

    Thread Starter mh1web

    (@mh1web)

    Hi Mr Tom,

    Thank you for your message.

    So a better option would be to use the custom HTML block and create an <SVG> tag and put the xml code from your svg graphic in it. This would cause the svg image to be applied to your DOM.

    I’m a bit overwhelmed by all that. Coul you please explain how to “use a custom HTML block”. You mean also in functions.php?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Implement HTML & Java Script + CSS to Homepage’ is closed to new replies.