vielle.dev / site-archive
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Stagger star parallax based on size of star Bigger stars move faster

afterlifepro 8f394661 fc93d15b

+15 -12
+13 -10
src/components/blog/background/Stars.astro
··· 15 15 16 16 <div id="stars"> 17 17 { 18 - new Array(blog.background.stars.count).fill(0).map((_) => ( 19 - <img 20 - src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.istockphoto.com%2Fphotos%2Fgolden-star-picture-id498723198%3Fk%3D6%26m%3D498723198%26s%3D612x612%26w%3D0%26h%3DrIeSl8WZdo6qWBvw_vgWc3vPhrBj39jCyeiZKltHIWk%3D&f=1&nofb=1&ipt=d84206dedd597d64591aa883e18799f72d5863f495a9ce7b22c0e1814215263b" 21 - alt="" 22 - style={`--parallax-speed: ${blog.background.parallax.star}; 23 - --size: ${blog.background.stars.size[0] + Math.random() * (blog.background.stars.size[1] - blog.background.stars.size[0])}rem; 18 + new Array(blog.background.stars.count).fill(0).map((_) => { 19 + const sizeSeed = Math.random(); 20 + 21 + return ( 22 + <img 23 + src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.istockphoto.com%2Fphotos%2Fgolden-star-picture-id498723198%3Fk%3D6%26m%3D498723198%26s%3D612x612%26w%3D0%26h%3DrIeSl8WZdo6qWBvw_vgWc3vPhrBj39jCyeiZKltHIWk%3D&f=1&nofb=1&ipt=d84206dedd597d64591aa883e18799f72d5863f495a9ce7b22c0e1814215263b" 24 + alt="" 25 + style={`--parallax-speed: ${blog.background.parallax.star[0] + sizeSeed * (blog.background.parallax.star[1] - blog.background.parallax.star[0])}; 26 + --size: ${blog.background.stars.size[0] + sizeSeed * (blog.background.stars.size[1] - blog.background.stars.size[0])}rem; 24 27 --x: ${Math.random()}; 25 28 --y: ${Math.random()}`} 26 - data-parallax 27 - 28 - /> 29 - )) 29 + data-parallax 30 + /> 31 + ); 32 + }) 30 33 } 31 34 </div>
+2 -2
src/config.ts
··· 12 12 clouds: 50, 13 13 sun: 10, 14 14 moon: 20, 15 - star: 5, 15 + star: [0, 5], 16 16 }, 17 17 clouds: { 18 18 count: 8, ··· 24 24 stars: { 25 25 count: 40, 26 26 size: [2, 5], 27 - } 27 + }, 28 28 }, 29 29 };