Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CodePen Integration


az19

Question

Hi! I hope to add this codepen url: https://codepen.io/tomwitkovsky/pen/zezQLe to the homepage of my website. I also want to have text in the center of the homepage with a subtitle. How would I do this? Thanks!

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi! I hope to add this codepen url: https://codepen.io/tomwitkovsky/pen/zezQLe to the homepage of my website. I also want to have text in the center of the homepage with a subtitle. How would I do thi

Posted Images

7 answers to this question

Recommended Posts

  • 1
27 minutes ago, az19 said:

Hi! I hope to add this codepen url: https://codepen.io/tomwitkovsky/pen/zezQLe to the homepage of my website. I also want to have text in the center of the homepage with a subtitle. How would I do this? Thanks!

This topic seems a good start

Add CSS animated background from codepen to squarespace site - Coding and Customization - Squarespace Forum

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

You should place them in code block for better organized

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
Just now, bangank36 said:

You should place them in code block for better organized

For some reason, nothing is showing up. I also added the <style> and <script> for CSS and JavaScript. 

Link to post
  • 0
1 minute ago, az19 said:

For some reason, nothing is showing up. I also added the <style> and <script> for CSS and JavaScript. 

I believe there is one dependencies

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

image.png.2a88e6248a7095608464312f7508a971.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
1 minute ago, bangank36 said:

I believe there is one dependencies


<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

image.png.2a88e6248a7095608464312f7508a971.png

Sorry what does one dependencies mean?

Link to post
  • 0
On 4/8/2021 at 1:04 PM, az19 said:

Hi! I hope to add this codepen url: https://codepen.io/tomwitkovsky/pen/zezQLe to the homepage of my website. I also want to have text in the center of the homepage with a subtitle. How would I do this? Thanks!

Try adding a Code BLock > Paste this Codepen code

<div class="particles-wrapper">
<div id="particles-js"></div>
</div>
<style>
  .particles-wrapper {
  background-color: #222;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
  /* ---- particles.js config ---- */
particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 300,
      "density": {
        "enable": true,
        "value_area": 1000
      }
    },
    "color": {
      "value": ["#356797", "#356797"]
    },
    "shape": {
      "type": "polygon",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 4
      }
    },
    "size": {
      "value": 5,
      "random": true,
      "anim": {
        "enable": true,
        "speed": 4,
        "size_min": 1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#58636d",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 5,
      "direction": "left",
      "random": true,
      "straight": true,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": true,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 200,
        "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>

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...