Jump to content

Is it possible to control/customize WebGL background elements using CSS?

Recommended Posts

  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

1 hour ago, pro said:

Site URL: https://steven.squarespace.com/home-2

The background art that I'm using lets you adjust the size of floating shapes. I currently have it set to 20. Is it possible to change the size, for example, to 10 for mobile only using CSS or JS? Any help would be greatly appreciated. Thanks.

Which part are you mentioning about?

image.thumb.png.4be67c6480df92970bfbe438a2223878.png

Greeting, it's 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, Delivery Date Picker, Keyword Highlighter
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 comment
5 hours ago, pro said:

The blue shapes.

Try

section[data-section-id="62ec3a8368bdfa3285f350ca"] .section-background canvas {
  transform: scale(1.2);
}

Let me know how it works on your site

Greeting, it's 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, Delivery Date Picker, Keyword Highlighter
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 comment

My testing

image.thumb.png.8ec49b89e12c08f2670e9cdb38661822.png

Greeting, it's 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, Delivery Date Picker, Keyword Highlighter
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 comment
16 hours ago, bangank36 said:

Try

section[data-section-id="62ec3a8368bdfa3285f350ca"] .section-background canvas {
  transform: scale(1.2);
}

Let me know how it works on your site

Thank you, BaNgan. I see that you scaled the canvas, but not the shapes themselves. Is there a CSS code that would make the shapes smaller as opposed to making the canvas bigger? I also would like to reduce the number of shapes for mobile. Currently there are 100 shapes. But for mobile, I would like 20 shapes. Sorry, this issue is low-priority.

 

BaNgan, could you take a look at this page https://steven.squarespace.com. It's more important than the issue above 😁

I would like to customize the canvas for mobile:

1. Make it 200% wide
2. Center it horizontally

Could you help me with that? I'd be so grateful. Thank you in advance.

Edited by pro
Link to comment
  • pro changed the title to Is it possible to control/customize WebGL background elements using CSS?

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.