Rotating Star Effect
Solved
Let's Build It
-
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 have you seen these
-
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?
-
@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?
-
@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?
-
@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
-
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@Panda That also looks good. Just short of the 3D rendering part !
-
@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!
-
undefined Hari has marked this topic as solved on 10 Sept 2023, 18:22
