How to archive this mouse over effect?

JDW · February 20, 2020, 12:44am

An even bigger problem is that Particles Bric doesn’t work, except on a new, blank document. When I add it to any of my existing Blocs web pages, it won’t display when I Preview. But when I create a new document, and either color the background or color the particles (so they become visible), then it works. So clearly, that Bric doesn’t play well with other things on the page. Not that it matters, I guess. I really want to get my custom SVG animated, which is something that Bric won’t do.

Anyone can test my custom-generated Particles code (with custom SVG) in your own Blocs website simply by performing the following 2 steps:

Open your Blocs site and click on a Bloc with a background color (so you can see the Particles on Preview), then name its ID “particles-js”.
Copy the script below and then Paste it in the Footer of the “Add Code” section of Page Settings…

(When you Preview in Blocs, you should see your page content is thrown to the Left, and my K-shaped SVG floating around on the right. That’s BAD. What I want to happen is get that SVG animation to float BEHIND the page content. The solution to that problem is one of life’s great mysteries, I guess.)

<script type="text/javascript">
particlesJS("particles-js", {"particles":{"number":{"value":10,"density":{"enable":false,"value_area":710.2342786683108}},"color":{"value":"#daddf0"},"shape":{"type":"image","stroke":{"width":0,"color":"#000"},"polygon":{"nb_sides":4},"image":{"src":"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' opacity='0.2' width='50' height='50' viewBox='0 0 64.1 46.2'> %09%3Cpolygon%20points%3D%220.5%2020.1%2010.1%2014%2019.6%2020.1%2010%2026.2%22%2F%3E%20%09%3Cpolygon%20points%3D%2211.4%2027.1%2021%2021%2030.5%2027.1%2020.9%2033.2%22%2F%3E%20%09%3Cpolygon%20points%3D%2222.4%2020.2%2032%2014%2041.5%2020.1%2031.9%2026.3%22%2F%3E%20%09%3Cpolygon%20points%3D%2244.3%2020.1%2053.9%2014%2063.4%2020.1%2053.8%2026.3%22%2F%3E%20%09%3Cpolygon%20points%3D%2222.4%206.1%2032%200%2041.5%206.1%2031.9%2012.3%22%2F%3E%20%09%3Cpolygon%20points%3D%2222.4%2034.2%2032%2028.1%2041.5%2034.2%2032%2040.3%22%2F%3E%20%09%3Cpolygon%20points%3D%2210.8%2028.6%2020.4%2034.7%2020.4%2039.2%2010.8%2033%22%2F%3E%20%09%3Cpolygon%20points%3D%220%2021.6%209.5%2027.7%209.5%2032.2%200%2026.1%22%2F%3E%20%09%09%3Cpolygon%20points%3D%2221.7%2035.5%2031.2%2041.6%2031.2%2046.2%2021.7%2040%22%2F%3E%20%09%09%3Cpolygon%20points%3D%2242.3%2035.5%2032.7%2041.6%2032.7%2046.2%2042.3%2040%22%2F%3E%20%09%09%09%3Cpolygon%20points%3D%2243.5%2021.5%2053%2027.6%2053%2032.1%2043.5%2025.9%22%2F%3E%20%09%09%09%3Cpolygon%20points%3D%2264.1%2021.5%2054.6%2027.6%2054.6%2032.1%2064.1%2025.9%22%2F%3E%20%09%09%09%3Cpolygon%20points%3D%2221.6%207.5%2021.6%2011.9%2027%2015.4%2030.5%2013.2%22%2F%3E%20%09%09%09%3Cpolygon%20points%3D%2242.2%207.5%2033.3%2013.2%2036.8%2015.4%2042.2%2011.9%22%2F%3E%20%09%09%09%3Cpolygon%20points%3D%2242.2%2021.5%2033.3%2027.2%2036.9%2029.4%2042.2%2026%22%2F%3E </svg>","width":50,"height":50}},"opacity":{"value":0.07215332581736189,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":88.18739822122009,"random":true,"anim":{"enable":false,"speed":10,"size_min":40,"sync":false}},"line_linked":{"enable":false,"distance":336.71552048102217,"color":"#ff0000","opacity":1,"width":2},"move":{"enable":true,"speed":0.5,"direction":"left","random":true,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":false,"mode":"grab"},"onclick":{"enable":false,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":false});
</script>

PeteSharp · February 20, 2020, 12:56am

@JDW. The Particles bric is actually based on the code from the page you link too. (well the GitHub project).

JDW · February 20, 2020, 12:57am

See my previous post which I just edited so you can try it yourself.

PeteSharp · February 20, 2020, 1:02am

Not a problem, it works for me I just tried it with an existing project.

The other “issue” you are talking about is CSS, which you need for that to work.

JDW · February 20, 2020, 1:04am

I see I need to make a cut down version of my Blocs document to PROVE I am having this problem.

I really wish there was a faster way to make cut down versions AND eliminate all the unused graphics too. Well, I will work on that now. It’ll take me 10 minutes…

JDW · February 20, 2020, 1:15am

@PeteSharp

Here is my 1-page cut-down version site with the Script in the Footer and pertinent CSS in the Header:

https://kiramek.com/21test95/TestSite-Particles.zip

I apologize on behalf of Blocs for the massive filesize. Blocs is not intelligent enough to NOT put ALL the site graphics in the “assets” folder when you “Generate Package” after having deleted all the web pages except for one. And the manual labor involved in deleting all those pages one by one and confirming the delete for each one is frustrating beyond words. Again, I hope and pray for a near 1-click solution in the future to allow me to “delete all content except for the current page” and then auto-generate the appropriate Package. That would be a glorious blessing indeed to share cut-down documents with others here in this forum.

Anyway, when you open my 1-page document in Blocs 3.4.3 and Preview, you will see the page content is thrown to the left (horrible!) and the animation plays on the right. THAT is the problem I’ve been talking about.

Now if you can isolate the cause for me, I certainly would be grateful.

Pealco · February 20, 2020, 2:03am

Hello @JDW,
There you go fixed and ready to go…

TestSite.bloc (1.2 MB)

Hope it helps you…

JDW · February 20, 2020, 2:14am

Bless you, my dear friend, @Pealco! You’re the CSS Magic Man!

Specifically, your code here:

#particles-js canvas{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0px!important;
	top: 0px!important;
	left: 0px!important;
	right: 0px!important;
	bottom: 0px!important;
    z-index: 4;
}

Bravo!

JDW · February 20, 2020, 2:18am

@Pealco

QUESTION: Your code makes the animation on top, so page text cannot be selected. How do I make the animation go BEHIND the page content, so text CAN be selected?

Thanks!

PeteSharp · February 20, 2020, 7:25am

Apply a higher z-index to the container with the text in it.

@JDW

JDW · February 20, 2020, 7:26am

Wait… “Container”?

PeteSharp · February 20, 2020, 7:32am

TestSite.bloc (1.9 MB)

I added a class called .layerfix

By the way your dark grey headers are semi transparent, so they show through. ?

JDW · February 20, 2020, 7:38am

Thanks! That puts the animation behind the container perfectly!

I am not seeing any problem with my dark dray headers. I colored them #35393e in the right sidebar, but I did not set any transparency. I am not seeing the animation come through them either, now that I have your fix in place. How are you determining them to be partially transparent?

PeteSharp · February 20, 2020, 6:36pm

This is what I see. Granted this is not your main project file, so it could be wrong.