bwjames Posted January 24, 2021 Share Posted January 24, 2021 Hello, I want to use this code on my website's homepage either as a section background or page background. https://codepen.io/mlxar/pen/RwGmNgr Not sure where to paste the various HTML, CSS & JS codes. Thanks for any help! Ben Link to comment
tuanphan Posted February 2, 2021 Share Posted February 2, 2021 If apply on a section, try adding a Code Block > Paste this code <!-- particles.js container --> <div id="particles-js"></div> <!-- stats - count particles --> <div class="count-particles"> <span class="js-count-particles">--</span> particles </div> <!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <!-- stats.js lib --> <script src="http://threejs.org/examples/js/libs/stats.min.js"></script> <style> /* ---- reset ---- */ body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #462426; background-image: url("https://lh3.googleusercontent.com/dx2xB7nM05g7kjuEbsr08kMhgcITNI7vIFS7XTYaSBWF8Q1Gui85jkfzIg_WQTrRXBbk0V1cGL6AVdMiDO7t0RGpdEjr2S2JHsKDYOkNzM7xEjYsH6dBUie-AiuatLnhJ45OIOzV_jCPaotVDV0yyC3ZARh1oLKu5nHzd_OKoH2deTdTmuLDJ6J-gajAuhiEkomlCbHuQKkGVSPklDAwNtoIAugEUdhRVAWponhZxk8BJLAMK2dN6NJOSD_DvoAIDK2ZT9gWgZ8tpQJ9-fmcv86ZskvMkhg3mHmLMgqDUWWCgmQH6R0xTZRn9ci8zwzTNIhYqrlvC_3gxd9lVpvDXtgzdMrGPGp1u293rh1sGkzlyk3wyh6nhCM4mITohARdZG59qM-WZehAe_deYNe7NWeGAD3IWwrbISHC0Yd4YtIuzVYDOqg_dJz02MEd6e0GZ4qe7pkYKxJIjiuddZen-OEyvQ8459qFuy76KdWfjbZ0R1OcdhbvQvRfcVmoMcUbCPcMpeWhwLzG4UdHjlWorQ397kjUZm-ChtnvHsHnNfRgisFRDqgMH7CDydtSHV35RXF6XXgvO9Tp2p32Zb5gbJ2_s5506DIH5nDQWKep6CJUhr1ulC8fsCYvuWgfH0_UVNiYz2ievF3LcRh3vpfHazf0DP6p6rXwjEkoMCNbv3y-0F3IaucRvUy6STM=w1200-h600-no?authuser=1"); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; } </style> <script> particlesJS("particles-js", {"particles":{"number":{"value":600,"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":true,"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":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":false,"mode":"remove"},"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});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);; </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
bwjames Posted February 2, 2021 Author Share Posted February 2, 2021 Thank you @tuanphan! This seems to just place a very small window of the background into my section with no particles (but with text that says '-- particles' - image below. I will try to play around with this code block to see if i can make it work somehow... Link to comment
tuanphan Posted February 4, 2021 Share Posted February 4, 2021 On 2/2/2021 at 4:14 PM, bwjames said: Thank you @tuanphan! This seems to just place a very small window of the background into my section with no particles (but with text that says '-- particles' - image below. I will try to play around with this code block to see if i can make it work somehow... Can you share link to page in screenshot? bwjames 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
bwjames Posted February 4, 2021 Author Share Posted February 4, 2021 @tuanphan https://www.mlxar.com/test2 Thanks! Link to comment
tuanphan Posted February 5, 2021 Share Posted February 5, 2021 try change http in above code to https bwjames 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
bwjames Posted February 5, 2021 Author Share Posted February 5, 2021 (edited) @tuanphan thanks! the particles appeared now, it still is only a very tiny rectangle rather than a section background though... do you know if I can change this? I'm also trying to figure it out on my own... Update: if i change the position tags to relative then the size is fixed. The main problem is that it acts like a standalone block rather than a section background, so the other text / content goes above or below it, never on top / overlayed... Edited February 5, 2021 by bwjames Link to comment
Guest Posted March 23, 2022 Share Posted March 23, 2022 Hello, how can I add https://codepen.io/hollyos/pen/QNRXYK and https://codepen.io/rileyjshaw/pen/bEEVra into my website? I have been trying to follow, but nothing changed! Link to comment
tuanphan Posted March 26, 2022 Share Posted March 26, 2022 On 3/24/2022 at 4:37 AM, Alexis2107 said: Hello, how can I add https://codepen.io/hollyos/pen/QNRXYK and https://codepen.io/rileyjshaw/pen/bEEVra into my website? I have been trying to follow, but nothing changed! It looks like I answered in another post. Have you solved it yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment