Inspired by the nice floating canvas in the back of whois.domaintools.com I did my first steps with canvas today.

For the new design of my website – especially for the front page – I wanted something crazy. I searched for a freaky javascript library but couldn’t find anything in the last weeks. But then, some days ago, I stumbled over domaintools and their canvas. I especially liked the hover effect, when you move the cursor over the page.

So, I immediately knew, I had to try something like this on my own. I never worked with canvas before, basically because there are still many users out there browsers not supporting canvas. Also this time, I first tried it with pure HTML and absolute positioned DIVs:

See the Pen pvEERp by Benjamin Plocek (@benplocek) on CodePen.

As you can see, I my first idea was to randomly generate letters, and position them in the back of my content. When you move your cursor over them, they’ll start to glow.

This looked good on first sight but problems started when I tried to put this on my website. I started with 300x300px but for my front page I had to increase the size and with this the number of letters. This caused first performance issues. Together with other transitions and animations my i7 quad core didn’t have enough power.

So, I thought, maybe canvas is a bit faster than the ugly DOM tree hack from above. Nope. 3000 letters rendering every 40 milliseconds are too much. I don’t want to embed the result here in this post, because it may stress your computer.

See the Pen emdZym by Benjamin Plocek (@benplocek) on CodePen.

So, I moved on and tried some stuff that is closer to the original idea. I played with circles, but they didn’t really fit to the design of my website, which is dominated by rectangles. I simply replaced the circles with rectangles, which was more what I wanted:

See the Pen ogzLRm by Benjamin Plocek (@benplocek) on CodePen.

In the end I connected the lines and got to a result, that looks a bit crazy and broken, but that’s what I like about it ;-)

See the Pen QwKEXd by Benjamin Plocek (@benplocek) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">