May 12 2009

20+ Wicked Proof of Concepts for Better use of jQuery/CSS

Advertisement

The web is a perfect playground for lots of creative designers and developers. Static HTML is just boring and these days the user wants to see some more eye candy from/on the web. By using and/or combining awesome web techniques like JavaScript (and of course, jQuery), CSS(3) and Flash (or Adobe Flex) this kind of interaction can be achieved.

Since "the sky is the limit" with these techniques, the programmers can get really creative and innovative. Some really like to take it to the next level and want to show off their use of the technique, even if it doesn’t have any practical use. These Proof of Concepts are just created because they CAN. Most of them are just really for fun or just beautiful to watch.

These PoC’s (or experiments) show off some serious power and potential, but don’t have any real practical use (yet). They’re insanely cool to watch, but really seek some better use.

Blurry Background Effect

Although not a real experiment, Chris Coyier shows the use of one often forgotten CSS trick using background-attachment. When checking the demo and resizing the browser, a blurry effect is added by using two images. Simple, yet effective and this one could actually be implemented more. Sadly, I haven’t seen it anywhere (yet).

3d Monster

No: It’s not a 3d render created with fancy software that you see below. It is an actual JavaScript "monster". This wicked Javascript experiment really shows some potential of a functional 3d engine. Simply check out the demo and be amazed. The monster is growing, rotating, resizing en you have the power to have influence on it.

BallDroppings

BallDroppings is an addicting and noisy play-toy. It can also be seen as an emergence game. I first met this program while browsing some cool Mac Apps, but the JavaScript version works just as well. Balls fall from the top of the screen and bounce off the lines you are drawing with the mouse. They play a melodic sound when they bounce of the lines. Useless, yet very addictive and fun.

BoingPic

You got to love these useless JavaScript experiments. This one, from Kelvin Luck, allows you to load an image and split it to pieces. The pieces move away when hovering with your mouse, as if they are afraid. Yet another fun experiment.

BrowserBall

This JavaScript experiment has the tagline Possible More Cool Than You Think It Will Be. When I first stumbled on that page, I really didn’t know what to expect. After launching the project and creating child windows, I was absolutely stunned. This experiment allows the user to throw a ball across several windows! I’m not sure if this will ever become useful in the future, but it sure is an awesome demonstration of some JavaScript power.

BrowserTalk

Just like BrowserBall, this JavaScript experiment manipulates the windows of your webbrowser. This proof of concept is really cool, since it is a bit more interactive. First, you’ll need to enable your microphone and grant access to the app. Launch the app, speak and (or let others) be amazed.

Clock with CSS3 and jQuery

Toby Pitman saw a real good experimental use of the CSS3 rotate property. By combining this CSS3 property with some great jQuery, he managed to create a fully working old school clock in your webbrowser. Now that’s something really creative.

CSS Puzzle

It’s amazing wot CSS can do. This example of a CSS Puzzle really shows that. Walk through the maze with your mouse and be amazed. Not by how difficult the maze is, but just by keeping in mind this example is fully written with CSS without a single line of JavaScript.

DragCaptcha

This example is actually more than a regular proof of concept. This jQuery plugin could really be used. DragCaptcha is created to drag a specified icon on a certain spot to determine if the visitor is an actual human. This fun experiment is not really userfriendly (when does CAPTCHA ever become userfriendly?), but it still shows an amazing technique.

CSS Decorative Gallery

Yet another CSS Proof of Concept that really could be used in the wild. Nick La shows a simple, yet effective technique to decorate an image gallery. This trick, using only CSS and some images, could make any image gallery outstanding.

jQuery Gestures

With the coming of the iPhone and the rise of Mac OS, gestures have really become part of our lives. This example shows an image gallery that fully works on the gestures that you make with your mouse. You can even download this experiment and implement it on your own website! Sadly, this experiment isn’t that useful, still it does demonstrates an awesome technique.

CSS Gradient Text Effect

Check out this sweet little CSS trick from WebDesignerWall. Creating images from your text, just to achieve a nice gradient, isn’t very search friendly. Also, the user isn’t able to select the text. This simple proof of concept shows a way how you can change your normal headings into some fancy gradient headings. If you don’t like gradients, there also is a Grunge effect of this technique.

Simulate Gravity with jQuery

With the use of the jQuery easing methods, Gaya Kessler created a sweet Proof of Concept to simulate some actualy gravity in your webbrowser. Cut the strings and see the blocks fall down, bouncing up and down untill they stop. As you could have expect, this has no practical use (yet?), but it really adds some fun to your website.

CSS3 Hidden Messages

Craig Wilson shows an amazingly simple technique using the CSS3 selection property to hide messages on your webpage. Just read the article, check out the demo and select some text. You’ll clearly be able to see the hidden message; A great way to add sumliminal messages to your site.

CSS Image Text Wrap

This is one technique that I actually don’t really like. Not because of the crazy code you would have to write to achieve it, but just because it doesn’t look that fancy. With CSS Image Text Wrap, you can wrap your text around an image, giving the user the feeling that it’s created outside the box model. To wrap your text around an image, simply think outside the box!

jParallax

I absolutely love the parallax effect, it just gives the browser a whole new dimension. jParallax, a jQuery plugin, allows you to create this effect and act on mousemovement. Althouh some websites make use of this technique, it could be used in more ways. If you’re a MooTools lover, there also is a Mootools version: mParallax.

The Leopard Desktop

What? Placing an OS inside your webbrowser? What’s the use of that? None (just like creating the iPhone for your browser is useless fun)! It just shows the power of jQuery and brings some beauty of the OS to your browser. Harley did a great job converting a big part of the Leopard Desktop to a webpage, just to show that he can. Some parts might be useful, most parts of the tutorial are just for fun.

CSS3 3d Cubes

Did you ever thought you could create an actual 3D cube using only CSS? Paul Hayes managed to create this effect using the CSS3 transform properties. Combined with the transition property, these cubes can move too: All without the help of any JavaScript. These kind of experiments could give the web a whole new dimension.

Illusion using the Parallax effect

A great example using the CSS parallax effect to create an awesome illusion. You would simply have to check out the demo and be amazed. You can also learn how to create such an effect of your own to use in any of your future projects. There are no real practical uses that I can think of, still it’s pretty cool to see.

CSS3 Polaroid Photo Viewer

Another creative CSS3 and jQuery experiment. Although pretty cool to use when the CSS3 options aren’t enabled, the real fun of this application is the rotation of the polaroids. It simply gives you more feel, as if you’re really tossing those pictures around. Combined with a neat look, this example could be used when CSS3 will be more of a standard. For now, this is a real cool proof of concept.

Animated Cartoon Robot

The article from Anthony Calzadilla starts with Why?. Like I said in the start of this article, the answer is: Just because it can! Check out this cute little robot moving and bouncing on your script, mainly using jQuery. His detailed tutorial even explains how he created the little fella.

CSS Secret Message by scrolling

Chris Coyier once again makes the name of his website – CSS-Tricks – proud. Another kind of Secret Message, but now the user only sees the message when scrolling down. Very easy to implement and use, but not really userfriendly. Still once again showing some unique uses of CSS.

BONUS: Facebook Lens Flare

I learned this little trick from Jacob Cass. Click on the background of the Facebook website and press the following: Up, Up, Down, Down, Left, Right, Left, Right, b, a, enter, click. Check it out: An awesome lens flare! The combination of pressing the keys is the Konami Code. Useless? Kinda. Fun? Absolutely.

Do you know any proof of concepts out there that are really awesome, but aren’t on the list? Please share it with us!

Author: Marco Kuiper

Marco Kuiper is just another creative design geek that loves PHP, CSS and jQuery and is always looking for innovative things. He’s also the founder of Marcofolio.net: His blog and personal playground where he shares all kinds of stuff. If you’d like to connect with him, you can follow him on Twitter.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

About the Author

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Homepage

Comments and Discussions
  • sean steezy, 12 May 2009

    sweet!

  • Jason, 12 May 2009

    And here is how you can use the lens flare effect of facebook on your website.

  • neki chan, 12 May 2009

    weeewwww… great post!

  • art2code, 12 May 2009

    nice!! thx

  • Marco, 12 May 2009

    Once again a big “Thanks” Noura, for allowing me to write this guest article on Noupe. I hope some real great practical uses of these Proof of Concepts come forward :) .

    • Noupe, 13 May 2009

      Thanks to you Marco for taking time to write such a nice post, we are happy to have you on our team :)

  • josh, 12 May 2009

    The “monster” HAMMERS my brand new octo-core machine … something tells me we’re years away from viable javascript based 3d (unless they make it multi-core). Definitely a good test to show how much better javascript runs with Chrome though.

  • Janko, 12 May 2009

    Nice roundup, Marco!

  • marco, 12 May 2009

    good list but those glasses make you look like king of the d-bags, d-bag.

    • Marco, 12 May 2009

      Hahaha, “thanks” I guess :P .

      Still need a good picture that I don’t mind placed online.

  • Ben, 12 May 2009

    Nice list.

    3D Monster, though cool, doesn’t really have anything to do with jQuery or CSS.

  • Tom Wright, 12 May 2009

    Great roundup, and nice to see another Zotero user!

  • pipisdicelana, 12 May 2009

    just like Janko said: Nice roundup

    thanks for sharing

  • That facebook trick is really the bomb. Great list Marco!

  • Ezra, 12 May 2009

    These are some awesome techniques. Browser Talk is my fav by far. It app made me laugh. I wish there was a tutorial.

  • Emma, 12 May 2009

    These have given me some great ideas, thanks

  • saurabh shah, 13 May 2009

    this post is awesome … this is the power of jQuery … and ofcourse CSS :) … keep rocking …

  • Premium Theme Info, 13 May 2009

    I’m focus on wordpress theme design. This is a great article to the web design! I tell me a lot. Thanks!!

  • Many, 13 May 2009

    very nice!! very very useful!!

  • Liam McCabe, 13 May 2009

    hehe awesome, I was messing with this stuff a couple of weeks back. Great creativity!

  • 2tone, 14 May 2009

    Amaaaaaizing

  • Craig Wilson, 15 May 2009

    Thanks for the include guys. :)

    Great list!

  • Brian Cray, 16 May 2009

    Great list! jQuery has definitely changed the scene in terms of what we can easily accomplish on our websites

  • Issa Qandil, 16 May 2009

    Wonderful list thank for sharing.

    BTW there is a couple of sites have the same facebook trick ;)

  • ilz, 17 May 2009

    Great post.. bookmarked for sure! That facebook thing is weird, huh? Reminds me of the old mortal kombat video game combo moves.. “Finish Him!” >

  • Ricardo, 18 May 2009

    There’s a forbidden on web designer wall (The one with the CSS-Decorative-Gallery) :(

  • Matt Hill, 18 May 2009

    “Static HTML is just boring and these days the user wants to see some more eye candy from/on the web.”

    Really? Which users want to see that? Most users I talk to don’t actually care, they just want sites that are quick, functional, useful and intuitive. Loading them up with visual trickery generally makes them harder to use. Less is more and all that…

    There are some interesting and clever effects here but I’m not sure how many of them are actually practical or useful.

  • Neon, 18 May 2009

    Awesome article, some really interesting uses of javascript. Hopefully stuff like this will be picked up commercially and driver more and quicker browser innovation. We can hope ;)

  • Martin Luff, 18 May 2009

    Nice roundup – thanks for the time to put that all together. If you’re after more then one I’d take a look at is http://www.netzgesta.de/glossy/ for some interesting effects.

    All the best…

  • RandumBoi, 07 June 2009

    I found a really cool example of javascript…
    http://ejohn.org/apps/hero/
    It’s basically a javascript version of guitar hero. You click play on a music video from YouTube (Smells Like Teen Spirit by Nirvana), and the game starts. Pausing the video pauses the game. It’s awesome!

  • Shrikrishna Meena, 05 November 2010

    Great examples, Really awesome… Never seen such….. Bookmarked this article.

  • Jesus Breuninger, 18 January 2011

    You should definately write more about this! Please!

  • Mohamed Samir, 02 April 2011

    thanks dude, i’ll be back

  • Rahul Singh, 02 May 2011

    Nice collection. The jquery apps are evolving and will soon overtake the big fat flash builds :)

  • Ross, 08 July 2011

    Really good finds, much better than you’re regular “top 10″ lists.

    Thanks for sharing.

    Ross

  • Shadow Caster, 01 February 2012

    The Facebook thing didn’t work for me.

  • Mark Cody, 26 August 2012

    Have played with BoingPic and find J-query fascinating as to what it can do.

    Great post

    Keep them coming

search form
 
image description image description