How is this done?

HEM

HEM

New Member
Hey everyone!

I've been working mainly in print media for many years, but I am currently learning to code, checking into Adobe Animate and doing webstuff again.

Doing a thing for a client, and would love to copy a thing I saw online. I'm guessing that this is a bit complicated, but I have no clue how this is done. So I'm hoping someone could shed a light on this ...

I'm wondering how this effect in the header is achieved: http://samarskaya.com/ The effect of having the logo turn into sand or grains when the cursor moves over it. How can I apply this effect to, say, a logo or graphics of my own. Is there any tutorial that I could read/watch in order to make this effect?

Thanks in advance!
 
If you right click and select 'View Source' you can see the code that was used for the effect. If you are interested in how it works, you could copy all of the code to an offline test site, then remove anything superfluous. This will allow you to see what's happening more clearly so you can play around with it. Don't copy it unless it's tagged for public use, though.
 
It's a HTML 5 canvas object that utilises Javascript for the interactivity. There's a tutorial for a somewhat similar example here – https://tympanus.net/codrops/2011/11/09/interactive-html5-typography/

From a quick glance it looks like they load the logo in as an image and then use a method to convert the pixels in the image to an array of particles which you can manipulate with the mouse or touchscreen. If you're not familiar with Javascript or programming then it's not something you can just knock up, but it might be a good reason to learn?
 
Thanks guys. I tried looking at the source, but it didn't make too much sense to me. Couldn't figure out how the effect was made, so I gave this forum a try instead. I'll have a look at that tutorial, Paul. Cheers!
 
Although it's quite cool, it seems a bit counter intuitive to destroy your logo.

I always liked the ones where there would be particles in the header that followed the curser.
A bit gimmicky I know but I usually find myself playing with them for a while

......like a little cat. ;)
 
I agree, Scotty. But I'm doing some work for a bakery, and was thinking that it would be cool to make it look like their logo was made of flour :D
 
You must log in or register to reply here.
Back
Top