Jump to content

How to Add Codepen to my Website.

Recommended Posts

  • 2 weeks later...

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
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...

image.thumb.png.026a85cf930ef1a25278aa89ab1c8c71.png

Can you share link to page in screenshot?

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

@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 by bwjames
Link to comment
  • 1 year later...
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.