Rotating Star Effect

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?

Related Topics

The theme came with space on left side

Footer bar add center text

The best css to customize our logo?

Flarum - WordPress Journey

[NodeBB] Import custom Font

[NODEBB] Scroll Button

Hardening WordPress - Reducing the attack vector

WordPress & NodeBB

Rotating Star Effect

Did this solution help you?

Related Topics

Individual Categories