All entries in topic: jQuery

Franz Enzenhofer has cobbled together a whole bunch of tech to create the “unofficial Google Image Search by Drawing” service. He’s also made the source available on Github, what a nice chap.

Using the mysterious but powerful and all-knowing HTML5 canvas element, Paul and Kilian have created a laser eyes generator. Drag your photo to the window and see what you’d look like a super hero/villain with laser eye powers. Laser eyes!

Alex contacted me (at coolshit@awesomebutuseless.com – send me links!) about his latest experiment into the exciting world of HTML5 video and canvas: a video jigsaw puzzle.

That’s right, a C64 plugin called jsc64. You call $('#container').jsc64(); and a Commodore 64 emulator appears within the element with id container. Tim has ported an existing Flash/ActionScript emulator (FC64) to use JavaScript and canvas. It runs a little slow under Firefox, but Chrome seems to handle it pretty well. There’s also a small selection of ROMs you can load and play.

Thanks, Raena for the heads-up.

Continue reading…

Here’s a clever usage of the CSS3 ::selection pseudo-element (and ::-moz-selection). Chris Coyier has made a secret message generator. You have to select all the text, to be able to see the secret message within. Only Safari, Chrome, Opera and Firefox users will be able to see it. We can write rude messages to IE users, tee hee hee.

This is really clever. Tyler Gaw has made a css3-powered kinetic-type movie. The kind of display where you hear the actors speaking and the text of their speech is animated onto the screen. Lot’s of CSS3 goodness is involved including gradients, transitions, and transforms.

While I’m on the subject of animated backgrounds I thought I should give a special mention to the clever animated rocket background on Zachary Johnson’s blog. If you scroll the rocket moves up, of course. But if you scroll to the bottom, and wait a bit, the rocket comes flying down from the top right hand corner and crashes into the ground! It’s great fun.

I have a bit of a soft spot for rockets; I put one on my own blog a couple of years back — a hand sketched rocket. It was static at first, but then I noticed my kids kept on trying to click it. So I made it launch on mouse click. It seemed the logical thing to do!

Here’s a couple of cool animated backgrounds you may not have seen. Earle Castledine’s blog has some neat animated bubbles thanks to jQuery. Paul Irish has an impressive canvas-based scribbler as a background on his blog — you can literally scribble with the mouse cursor.

I’ve worked with Earle previously since he’s the co-author of the SitePoint book jQuery: Novice to Ninja. He’s one of those JavaScript savants and his JavaScript experiments page is full of fun and wonder. He’s made a retro racer game scene that reminds me of Pole Position. It’s just an animation, not an actual game, but he’s done it using a single column of 1 pixel high div elements that have the background-position value of their backgrounds constantly changed to create the animation effect. Ingenious!

I’ve recently seen a couple of experiments using the CSS3 text-shadow property and JavaScript to simulate dynamic shadows. There’s one by Zachary Johnson, and another by Daniel Kurdoghlian. It’s a cool effect. Maybe something similar could be achieved using the box-shadow property.

Whoa, hold on a minute. text-shadow was originally a CSS2 property, and now a CSS3 property. It was apparently dropped from CSS2.1. How about that eh?

Update: Zach has mentioned in a comment that he has another demo that uses no images.