Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How is this done?

Discussion in 'Website Coding & Programming Forum:' started by HEM, Mar 20, 2017.

  1. 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: 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!
  2. wac

    wac Senior Member

    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.
  3. Paul Murray

    Paul Murray Moderator Staff Member

    It's a HTML 5 canvas object that utilises Javascript for the interactivity. There's a tutorial for a somewhat similar example here –

    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?
    Stationery Direct likes this.
  4. HEM

    HEM New Member

    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!
  5. scotty

    scotty Well-Known Member

    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 a little cat. ;)
  6. HEM

    HEM New Member

    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
  7. scotty

    scotty Well-Known Member

    In that case please carry on. :D

Share This Page