Trying to Add Javascript/CSS Effects: Not Working

I've been attempting to add some effects on my site for the holidays (in this case 4th of July) but have been unable to get them to display. When I test outside of Nop everything works fine but once I move it into the Nop environment nothing works no matter what I change. Any advice? I switched to a pure CSS effect thinking it may just not like JavaScript but that didn't work either.

Effect examples: Fireworks over the page, snowflakes falling, etc.

How are you adding the effects to your store?

Can you provide an example of how the effect is implemented?

Is your code getting inserted to your page or cuss file?

If so do you know if your code is being executed?

My both the CSS I use and the JavaScript is showing when I inspect the page, it's just not being implemented.

This link show's what I'm trying to do: https://cl.ly/0b9269f34865/Screen%20Recording%202019-06-28%20at%2008.30.58.71%20AM.mp4

Obviously I don't want them going at the same time but this is the test I ran outside of Nop just to make sure it wasn't my code being weird.

I have a custom plugin that allows me to insert scripts into my pages and I know it's still working but my other scripts are all working correctly. So I'm not sure why it's not allowing me to do this.

Hello AlyssaOdom,

judging by the animation you want to achieve, you most probably need a <canvas> element on which the script should be applied to. We cannot tell for sure, but it is very unlikely that it achieved with only CSS.

If you could provide a link to your site we can better investigate the issue and give you better pointers. Or at least give us an outside link where you say it is working, like CodePen or something similar.

Best Regards,
Valentin.

I'll have to set up a code pen and send what I had. Here is a site that was using the pure CSS snowflakes that I was using though. At the very least I thought those would work but I was stuck in the same situation.

https://pajasevi.github.io/CSSnowflakes/

The CSS snowflakes seem to work without a problem when I test it on a NopCommerce store. How is the code being inserting to your page.
Once you can let us view your store it will be easier to identify the problem.


It seems that most likely you custom plugin is not inserting the code correctly, possibly into the incorrect element of the page.

Is your CSS code a child of the body tag?

https://ibb.co/Fz1rr71


Have a look at the image to see an example of the code.

Where are you inserting the divs? I was using the HTML Widgets plugin but it wasn't working for me. I tried the same for fireworks too but if my divs are empty it removes them.

CSS Fireworks Example: http://jsfiddle.net/elin/7m3bL/

Try the body widget zone.

PublicWidgetZones.BodyEndHtmlTagBefore


Strange your div's are being removed. Are you not inserting the code into the head element of your page?

I will try adding them there. And as for it removing code, I'll enter this:
<div class="pyro">
    <div class="before"></div>
    <div class="after"></div>
</div>

But once I save it changes to this:
<div class="pyro">&nbsp;</div>