VincentGarreau / particles.js

A lightweight JavaScript library for creating particles
https://vincentgarreau.com/particles.js/
MIT License
28.95k stars 4.82k forks source link

How to position html text within canvas #319

Open Code-Neutron opened 6 years ago

Code-Neutron commented 6 years ago

Greetings,

We have successfully applied (text) to the code using the canvas remarks indicated in this form, and although the sentence/sentences appear nicely on the canvas of the browser, they are situated at the top left side. Currently the website simply has the particles.js appearing without text as we have not applied this to the live website until figuring out the proper syntax. Can you please indicate the proper (html and CSS) so we can use our own text? Greatly appreciated. Thank you!

gemanepa commented 6 years ago

The way I use particle.js with html text is applying to the particles a CSS {position:absolute; z-index: 0; width: whateverYouNeed; height: whateverYouNeed; top/right/bottom/left: whateverYouNeed} if the interactivity is not working 100% right after that, I just switch canvas to window and it works just fine

Code-Neutron commented 6 years ago

Hi Gabriel.

Please see below the html and CSS. I seem to have gotten the canvas working to show the html at the top and left side. Kind of lost after that though. I have visited Vincent’s website and it looks amazing actually with the text and effects he has there now: https://vincentgarreau.com/en Our current website live is: www.codeneutron.comhttp://www.codeneutron.com Any assistance is appreciated.

Html -

Code Neutron Technology Coming Soon!
CSS - body{ margin: 0; padding: 0; height: 100vh } #particles-js { height: 100%; background-image: url(universe1.jpg); background-size: cover; background-position: center; } #particles canvas{ position: absolute; width: 100%; height: 100%; z-index: 999; } #hello { position:absolute; top: 0; left:0; color: #fff; z-index: 9999; font-family: 'Muli', sans-serif; font-size: 40px; text-align:center; } Best regards, Craig From: Gabriel Ernesto Martínez Cánepa [mailto:notifications@github.com] Sent: Wednesday, May 30, 2018 3:13 PM To: VincentGarreau/particles.js Cc: Craig Castle ; Author Subject: Re: [VincentGarreau/particles.js] How to position html text within canvas (#319) The way I use particle.js with html text is applying to the particles a CSS {position:absolute; z-index: 0; width: whateverYouNeed; height: whateverYouNeed; top/right/bottom/left: whateverYouNeed} if the interactivity is not working 100% right after that, I just switch canvas to window and it works just fine — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.
Code-Neutron commented 6 years ago

Hi Gabriel,

Actually we were able to figure it out and it was pretty straight forward. Thank you.

Best regards, Craig

From: Gabriel Ernesto Martínez Cánepa [mailto:notifications@github.com] Sent: Wednesday, May 30, 2018 3:13 PM To: VincentGarreau/particles.js particles.js@noreply.github.com Cc: Craig Castle craig@codeneutron.com; Author author@noreply.github.com Subject: Re: [VincentGarreau/particles.js] How to position html text within canvas (#319)

The way I use particle.js with html text is applying to the particles a CSS {position:absolute; z-index: 0; width: whateverYouNeed; height: whateverYouNeed; top/right/bottom/left: whateverYouNeed} if the interactivity is not working 100% right after that, I just switch canvas to window and it works just fine

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/VincentGarreau/particles.js/issues/319#issuecomment-393282960, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AlwoIatOCl91nbJlwXOu8iOU2MZAjQbmks5t3u9TgaJpZM4UT0a9.

Code-Neutron commented 6 years ago

Hi Gabriel,

Question hoping you can answer:

How do you add an image onto the Particles.js canvas? By example: Social media Instagram (Logo) see attached. The site is currently a coming soon page: www.codeneuton.comhttp://www.codeneuton.com Thank you!

Warm regards, Craig Castle

From: Gabriel Ernesto Martínez Cánepa [mailto:notifications@github.com] Sent: Wednesday, May 30, 2018 3:13 PM To: VincentGarreau/particles.js particles.js@noreply.github.com Cc: Craig Castle craig@codeneutron.com; Author author@noreply.github.com Subject: Re: [VincentGarreau/particles.js] How to position html text within canvas (#319)

The way I use particle.js with html text is applying to the particles a CSS {position:absolute; z-index: 0; width: whateverYouNeed; height: whateverYouNeed; top/right/bottom/left: whateverYouNeed} if the interactivity is not working 100% right after that, I just switch canvas to window and it works just fine

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/VincentGarreau/particles.js/issues/319#issuecomment-393282960, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AlwoIatOCl91nbJlwXOu8iOU2MZAjQbmks5t3u9TgaJpZM4UT0a9.

Code-Neutron commented 6 years ago

Hi Gabriel,

My apologies, my coming soon page url: www.codeneutron.comhttp://www.codeneutron.com Question hoping you can answer:

How do you add an image onto the Particles.js canvas? By example: Social media Instagram (Logo) see attached. Thank you!

Warm regards, Craig Castle