20+ Wicked Proof of Concepts for Better use of jQuery/CSS
- By Noupe Editorial Team
- Posted in CSS
- 37 comments
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.
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
Celes | EmbraceLiving.Net, 12 May 2009
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