Rotating Star Effect

Hari

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!

phenomlab

@Hari have you seen these

https://codepen.io/sarazond/pen/LYGbwj

https://codepen.io/bennettfeely/pen/vYLmYJz

phenomlab

@Hari What do you have so far in terms of the page? Can you share any links, code, or CSS?

Panda

On that gatsbyconf link I cant see the rotating star?
Where is it?

phenomlab

@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?

Hari

@phenomlab yes, the rotating background, i have no pages. how do i get it in a wordpress page

Panda

@phenomlab ah, it doesnt show on mobile
But see it now in desktop mode

phenomlab

@Hari that’s not as simple as it looks. Do you have a mock-up of how you’d like it to look?

Hari

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?

https://github.com/gatsbyjs/gatsby

phenomlab

@Hari said in Rotating Star Effect:

can we find something on their github?

Have you checked there already?

crazycells

@Hari it looks very cool, I hope there is an easy way to achieve this background.

Panda

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>

phenomlab

@Hari have you seen these

https://codepen.io/sarazond/pen/LYGbwj

https://codepen.io/bennettfeely/pen/vYLmYJz

Panda

Those look good. I put my basic one in a codepen
https://codepen.io/C-L-the-selector/pen/MWZbWBo

phenomlab

@Panda That also looks good. Just short of the 3D rendering part !

phenomlab

@Hari just came across this - looks like it could fit the bill

https://jsfiddle.net/eLxazfta/

and this

phenomlab

And this is so clever - very well written

https://www.kevs3d.co.uk/dev/warpfield/

Hari

@phenomlab thanks a lot for these, both of the below are awesome!

https://codepen.io/bennettfeely/pen/vYLmYJz

https://codepen.io/C-L-the-selector/pen/MWZbWBo

Rotating Star Effect

Did this solution help you?

Targeting a disappearing element for its CSS

Fixing YouTube videos css

Footer bar add center text

hover link effect

[NodeBB] greeting message

[NODEBB] Reply Button/arrow answer

Discourse Design Change

WordPress & NodeBB

Rotating Star Effect

Did this solution help you?

Individual Categories