Hey guys, how is this effect on the homepage possible?
The stars and hovering over effect that lighten them up?
2 Likes
with a canvas background here is source code so you can see how it works http://findmatthew.com/scripts/canvas.js
1 Like
Do you think he made this from scratch?
I like this guy’s work. Very clean code.
It is using the pt library, it was likely build using code from line.getPerpendicularFromPoint (here is the latest version ptsjs).
I am trying to just draw inspiration and not so much copy or do the exact same thing he is doing. Any ideas on that?
Basically you could add the text in an HTML element with a default opacity: 0;. Then once page is loaded, you can set a timer function which waits some specified time and calls another one that sets its opacity to 1.
It’s what i’m doing in my portfolio web. I’m sure there are a lot of ways to accomplish this.
Not really, I’d go through the docs and guide/examples on the library page. Maybe search Codepen, etc. for particles stuff and check out the codrops site for some ideas.
Just be mindful of how and where you use this stuff. For the art site you have, you can get away with more than say, on a portfolio site. Don’t go too crazy with this type of effect unless it is called for.
That art site has just been my main full stack app (I could’ve made it much easier being a Netlify CMS), but it’s for my girlfriend, haha. I am curious why you think it should be considered less for a portfolio site? Aren’t they supposed to be a bit more personal and fun?
Just to be clear, I mean for a coding portfolio site.
Personally, I’d go with something clean and professional-looking, not flashy and in your face. A little personality is fine but it can quickly get out of hand if you try to be too “creative”. Makes sure the site conveys the right message and doesn’t try to impress too much with “smoke and mirrors”. Some portfolio sites are very artsy and if that is your style it can be fine to go all out but then you need to keep the style throughout. It’s a balancing act and depends on personal taste as well.
I’m just tired of seeing the landing section being all “hey look at me” and then the rest of the site is totally normal, boring and samey.
1 Like
Haha, thanks for the honest input, I will try my best.
TL;DR version of my post: just speculating how the effect mentioned (moving lines that light up when the cursor is near) was made. A random comment from a random person. 
You probably have the answer already, but here’s some extra input:
at a glance, it seems to calculate the distance from cursor to each line (not sure if it is each line) and change its style (CSS) if the distance is less than some number of pixels. This is done < your screen’s refresh rate > number of times per second, so it looks like fluid motion. It looks cool and is rather power hungry, so I wouldn’t do it for a page you plan to look at more than once (it will consume way more resources compared to a static website). But hey, for the first impression it works great!
If you want to do something similar, you’ll need the following: some framework (preferably) to do most calculations for you (perpendicular distance was mentioned here) and some basic understanding of rendering engines (just for the geek points). Basically, you want to launch a re-drawing function that executes, like, 60 times per second (or at refresh rate) and changes CSS every time depending on some parameters, like distance to cursor, and it should also move the lines at different speeds for some 3D effect.
I hope someone finds this very basic information useful, or will, at least, find it interesting enough to dig a little deeper and google some free game development courses to deepen their knowledge of rendering engines in web browsers and whatnot.
Have a nice day!