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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.