Rotating Star Effect
-
Hello! I hope everything is going well.
I’m interested in creating a page featuring a captivating rotating star effect similar to what’s showcased on the https://gatsbyconf.com/ website.Could you please guide me on how to achieve a similar WordPress page using the Gutenberg builder? Specifically, I’m aiming to incorporate the rotating effect, and I intend to overlay additional text elements on it. While attempting to save the page, I encountered difficulties in copying the required CSS or JS for the effect. I’m uncertain about where to commence. Your assistance in this matter would be greatly appreciated. Thank you!
@Hari What do you have so far in terms of the page? Can you share any links, code, or CSS?
Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd
-
@Hari What do you have so far in terms of the page? Can you share any links, code, or CSS?
-
On that gatsbyconf link I cant see the rotating star?
Where is it?
@Panda said in Rotating Star Effect:
On that gatsbyconf link I cant see the rotating star?
Where is it?I think it’s the rotating star background?
Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd
-
@Panda said in Rotating Star Effect:
On that gatsbyconf link I cant see the rotating star?
Where is it?I think it’s the rotating star background?
@phenomlab yes, the rotating background, i have no pages. how do i get it in a wordpress page
-
@Panda said in Rotating Star Effect:
On that gatsbyconf link I cant see the rotating star?
Where is it?I think it’s the rotating star background?
@phenomlab ah, it doesnt show on mobile
But see it now in desktop mode -
@phenomlab yes, the rotating background, i have no pages. how do i get it in a wordpress page
@Hari that’s not as simple as it looks. Do you have a mock-up of how you’d like it to look?
Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd
-
@Hari that’s not as simple as it looks. Do you have a mock-up of how you’d like it to look?
just the rotating background without text would just work fine. i want to save this effect on page for now so i can refer to it later.
can we find something on their github?
-
just the rotating background without text would just work fine. i want to save this effect on page for now so i can refer to it later.
can we find something on their github?
@Hari said in Rotating Star Effect:
can we find something on their github?
Have you checked there already?
-
Hello! I hope everything is going well.
I’m interested in creating a page featuring a captivating rotating star effect similar to what’s showcased on the https://gatsbyconf.com/ website.Could you please guide me on how to achieve a similar WordPress page using the Gutenberg builder? Specifically, I’m aiming to incorporate the rotating effect, and I intend to overlay additional text elements on it. While attempting to save the page, I encountered difficulties in copying the required CSS or JS for the effect. I’m uncertain about where to commence. Your assistance in this matter would be greatly appreciated. Thank you!
@Hari it looks very cool, I hope there is an easy way to achieve this background.
-
Im on mobile, is there anyone who can paste this into one of those jsfiddle / codepen sites, to make a clickable demo from this very basic version1
I will add some matrix sin/cos to make it rotate round rather than flat in v2<!DOCTYPE html> <html> <body> <canvas id="canvas" width="600" height="400"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var s=[],i for(i=0;i<200;i++){ s[i]={x: Math.random()*600, y: Math.random()*400, r: Math.random()*3} } setInterval(draw,30) function draw() { for(i=0;i<200;i++){ ctx.beginPath() ctx.fillStyle='white' ctx.arc(s[i].x, s[i].y, 5, 0, 6.3) ctx.fill() ctx.beginPath() ctx.fillStyle='black' s[i].x+=1 if(s[i].x>610){s[i].x=-5} ctx.arc(s[i].x, s[i].y, s[i].r, 0, 6.3) ctx.fill() } } </script> </body> </html> -
@Hari have you seen these
Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd
-
Those look good. I put my basic one in a codepen
https://codepen.io/C-L-the-selector/pen/MWZbWBo -
Those look good. I put my basic one in a codepen
https://codepen.io/C-L-the-selector/pen/MWZbWBo -
@Hari just came across this - looks like it could fit the bill
https://jsfiddle.net/eLxazfta/
and this
-
And this is so clever - very well written
-
@Hari have you seen these
@phenomlab thanks a lot for these, both of the below are awesome!
-
Hari has marked this topic as solved on
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register Login
