How to archive this mouse over effect?

Hello boys and girls! Was wondering if any of you could help me to archive this effect

The stars will move if you move your mouse

Site example

I saw this effect on a topic here but I just cant remember which one was! If any one could give me a hand? Thanks

I reviewed the source of the site you referenced, that exact result seems to be derived from here. A similar effect is the Particle.js library, etc.

1 Like

awesome! How to apply it to blocs?

Go to the particle.js site, use the input controls on the right side of the page to set the parameters you desire. Use those generated parameters along with the provided setup and usage instructions for the library to implement it in Blocs.

So for example:

1.) Give your Bloc the proper ID and set the padding etc., as you desire:

Sidebar-Bloc-ID-Padding

2.) Input the needed script and setup code in the Page Settings:

Below for example is the above script and code used in the screenshot.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script type="text/javascript">
particlesJS("particles-js", {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":true,"straight":false,"out_mode":"bounce","bounce":false,"attract":{"enable":true,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"grab"},"onclick":{"enable":true,"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":true});
</script>

3.) Adjust any settings until you get the result you want:

The same holds true for anything you want to implement in Blocs concerning 3rd party libraries or plugins. For any of these you find and wish to implement in Blocs, just follow the usage and setup instructions which are generally provided.

Here are some Blocs 3 documents which should help you whenever you want to implement a 3rd party library or plugin. For each library or plugin you want to implement use these along with the corresponding provided usage and setup instructions the libraries or plugins come with.

  1. Classes & ID’s – https://help.blocsapp.com/knowledge-base/custom-classes-basics/
  2. HTML Bric – https://help.blocsapp.com/knowledge-base/html-widget/
  3. Page Setting - Add Code – https://help.blocsapp.com/knowledge-base/page-settings/
  4. Page Attachments – https://help.blocsapp.com/knowledge-base/page-attachments/
  5. Custom Data Attributes – https://help.blocsapp.com/knowledge-base/custom-data-attributes/
3 Likes

Thanks a lot! I will look into this when I get home! Will let you know! :slight_smile:

So how did it go, I see you are still posting about it?

Im trying to make this one also for the home page
https://turinginc.io

By the way do you know how to write vertically? Like this

That does not answer if you got the above provided particle.js method working in Blocs? Regarding vertical text, that has nothing to do with this thread. So I instead responded in the thread you made about it.

To be honest I haven’t figure out how to do it! Im not very advanced on blocs but I will do it hehe! im trying how to get the background in a different color cause is in red when I download the file :confused:

With the example provided above, you would just set the background in Blocs by way of the Side Panel > Background > Color. Make it whatever you want.

It doesn’t work :confused: I think Im doing something wrong!

See step #1 above, you need to give your Bloc an ID, as shown of ’ particles-js ', currently you have it as the default ID of ’ bloc-0 '. Or change the particles-js reference in the script to bloc-0 or whatever you want the name to be so it correlates between the two instances.

Also preview in browser for it to work, I don’t have Blocs 3 in front of me so I’m not sure it works in its preview?

Still not working! Ok Im doing this and placing the particles-js folder on my hosting right?

No the only thing you need to do is the steps outlined above. It pulls the needed library from a CDN. So if you are connected to the internet and view the preview or the export in a browser it should work correctly as demonstrated above. The same holds true once uploaded to your server. I’ll check back later but it should work without issue, if you follow all that was discussed above.

I followed everything but didn’t work! Do you know how to do the other one with the text?

Following your steps and doing a copy/paste of your code does work. In fact, I even get my own custom-generated code (with custom SVG) to work too. HOWEVER, all my Blocs content inside that Bloc gets thrown to the LEFT, and the Particle animation plays on the RIGHT.

I want my Blocs content to be placed ON TOP OF the particle animation. In other words, the particle animation should be the BACKGROUND. How do we accomplish that?

I know it’s possible because this example page puts content above the animation. Here’s a bootstrap example. I want to know how to do that in Blocs.

Hi @JDW
I don´t know anything about that code. But did you see the particles bric in the store ?

https://blocs.store/product/particles/

tom

1 Like

Thanks for the tip. Sadly, That bric won’t allow us to use a custom SVG or insert our own particles code which has our custom SVG. :frowning: I want to animate a company logo via custom SVG.

Hi @JDW
ok, I understand … sorry, I don’t know that
tom

This site is where you can create your own customized animation. It’s frustrating because you cannot simply put a URL to an SVG in the appropriate field, you have to inject the SVG code (encoded). But I finally figured it out and saved the code I wanted. It is that code I am desperately trying to get to work in Blocs. But as you can see from my earlier post, it throws all content in the same Bloc to the left, with the animation displaying on the right.

It certainly would be great if the Bric you mentioned would allow us to use own own SVG.