Webb Depot

Tuesday, February 25, 2014

Merry Scrolling with skrollr.js

A colorful, interactive and extremely attractive Christmas card designed with JavaScript and CSS putting the scrolling effects to the best use. This Christmas card has been designed to give away Merry scrolling feel with the use of skrollr.js plugin. Get lost in the demo and enjoy the real feel of Christmas and new year with this lovely card. Right from the images, effects, colors and feel, everything has been blended perfectly to come up with this really attractive Merry Scrolling Christmas card.

Website

Demo

15 Nostalgically Cute 404 Pages

11:15 AM 1 comment

Get nostalgic about the addictive video games, most cherished animated movies and all the adorably favorite animated characters. This is an aggregation of 15 wonderfully creative, animated and nostalgic 404 pages. Have fun, get nostalgic and get inspired with a glimpse of this collection. 404 pages are most often the most seen page on a website as it can be easily traversed with any erroneous website path. 404 page of any website generally reflects the creative quotient of the website too. Enjoy the creatively designed 404 pages aimed to bring in nostalgia.

1. Smurfed 404 Page

If you loved the animation movie "Smurfs", then you are sure to enjoy this 404 page. The page brings up the nostalgic feeling of being with the Smurfs back again. A cute little Smurf who keept looking out for the page is seen worried that the Page is not found!

2. Blooming Mario Brothers 404 Page

Showcasing "Super Mario", the all time favorite video game of everyone, this 404 page takes us down memory lane to our cherished childhood. This 404 page shows the very first level of Mario game which has been very well imprinted in every game lovers mind and soul. Mario jumping around, breaking bricks, collecting coins, dodging the little bear character, ducks and yes collecting the flower power and much more. Get truly lost in Mario land on this 404 page.

3. Ice Age 404 Page

Ice age is undoubtedly one of the favorite movies of most animation loving crowd. The official website of Ice Age movies has showcased its 404 page with all the prominent Ice Age characters. A treat to get to lost with your favorite cartoon characters from Ice Age and relive the legendary movie.

4. Retro Nintendo Games 404 Page

Retro Nintendo Games Super Mario 404 Page

Retro Nintendo Games, the website for all Nintendo stuff - to play classic and retro Nintendo games online has a simple but catchy 404 page. This 404 page is based on the Super Mario game, the best and most popular of all Nintendo games. The pipes, bars and ducks with the black backdrop bring back the lovely memories of the addictive Super Mario game.

5. Pixar's Wall-E 404 Page

Wall-E, the cutest robot ever greets us on the 404 page of the Pixar website. One can watch Wall-E cutely say that the page was not found and we have been lost on earth, just like Wall-E.

6. Disney Movies 404 Page

The official website of Disney movies has the trademark cartoon character of Disney - Our lovable Mickey Mouse showcased on its 404 page. Mickey looks shocked and stunned that some one looted up the page being looked up!

7. Wild Gunman - Animated 404 Page

This is a nostalgic 404 page. One can relive the age old days of video games with this 404 page. The gun game in old video game console, where one had to point and shoot the characters in a wild desert is relived on this page. A cool surprise on a 404 page to keep the website visitors entertained by Nintendo. Visit, get lost and have fun reliving the video game age with the Wild Gunman 404 page.

8. Nick Junior 404 Page

Get o-fish-ally lost on this fishy Nick Junior 404 page. All the fishy characters of Nick Jr greet you sweetly on getting fishily lost on their website.

9. "Someone Ate the page" Disneyworld 404 Page

The Disney World website has an interesting 404 page where "Lilo and Stitch" fame "Lilo" shows off its tantrums by yelling out that "Some one ate the page" one was looking for and hence is lost on the website.

10. Sanrio Hello Kitty 404 Page

Yet another cute 404 page and this one is by Sanrio. The lovable and adorable Hello Kitty enjoys her ride on a balloon and seems lost in the clouds, giving us company for being lost in the winds on the Sanrio website. Cute clouds and the lovely Hello Kitty make it a really cute 404 page.

11. Barbie 404 Page

Everyone is a Doll in Barbie land. Get lost on the Barbie website and you can see a pretty Barbie exclaim surprisingly that you are shockingly lost in Barbie land.

12. Rio 404 Page

A Who doesn't love the move Rio? And of course how can one not be frightened by Nigel - the evil huge bird of Rio. The official Rio movie page which now celebrates the upcoming launch of Rio 2 has a 404 page featuring scary Nigel, and the page mentions that Nigel made the page disappear! Ssh!

13. Mario Kills Death Star 404 Page

This is one among the Best 404 page collection, a 404 page design that features our all time Super Hero Mario killing the Death Star himself!

14. Alice in Wonderland 404 Page

Relive the whole story of Alice in Wonderland on this animated 404 page. See Alice, her friends and all the characters hopping and jumping around on this 404 page bringing back lovely memories of this evergreen tale.

15. Chicken Little 404 Page

Everyone knows Chicken Little and his notorious acts. See Chicken Little being shocked on having the page gone missing on the Disney France website's 404 page.

10 Amazing HTML5 Animations

6:54 PM 1 comment

HTML5 is the buzz word these days all over the web. There are plenty of features that HTML5 provides to help designers create inspiring and attractive user interface and animation effects on the web. HTML5 is being used to craft several full fledged animations. This is a collection of the 10 most amazing HTML5 animations. Most of the simple features of HTML5 have been put to creative use and clubbed with great graphic skills to design these inspiring and amazing HTML5 animations.

1. Ball Pool

Start by shaking the browser, then create new balls (click on empty space), move some others (drag) and reset the screen (double click). Yes, then it is like the old days once again! :) This amazing ball pool was actually designed to showcase Google Chrome's performance. A super simple collision system in between the circles was developed and was mixed with the browser movement. With the physics of inspired by Google gravitiy integrated to it, the Ball Pool was up and running in full swing.

2. Liquid Particles with HTML5

These colorful liquid particles powered by HTML5, hideously follow your cursor movement and light up the whole screen with fascinating colors. These are juts like the particles trapped in a wormhole discoball. Play around with your cursor and come up with amazing color patterns on the screen. They are really tough to control and take up some time and practice to gain control. Amidst the various HTML5 animations this one developed by Daniel Puhe truly stands out!

3. HTML5 Love Dots Audio Burst Animation

An amazing animation crafted with HTML5 connects the dots of love for HTML5. Synced with audio, the dots bubble out and flood the screen in a wonderfully random manner. What started out as a little weekend experiment radically changed the way everyone perceived HTML5. The concept was originally a performance study how many particles a browser can calculate and display with a decent frame rate. Soon was music added music and a social element displaying tweets from twitter that contain the words love + html5. The experiment was a huge success and got some nice accolades from Google chrome experiments and Hackernews.

4. HTML5 3D Destructive Video

An amazing effect created using HTML5, this animation effect allows one to destroy a video and blow it up with every single click on the video. The video blows up into the space and adding to all the joy of animation is the 3D video used in the demo for the added effect. One feature that could have been added was adding depth to the explosion, so pieces that are closest to ground zero fly up into the air as they sail outward. With full shadow effects this could look really cool. The whole idea is based on the Canvas.drawImage() api call. The api lets you take the contents of specific HTML elements and draw them into a canvas, and the 3rd element in that list is just begging to be abused. Copying video into a canvas element means opening up the ability to manipulate or process video frames at runtime!

5. HTML5 Blob Sallad

HTML5 has got too cute. These cute pink blobs powered by HTML5 are sure to please and entertain. Play, drag, rotate and have all fun that you want to have with these Blobs. Named as "Blob Sallad" this HTML5 rendition is simple fun. Move the blobs around with arrows, split up blobs to create new ones, join existing blobs together and even play with their gravity! Interesting collision detection mechanics and bouncy feature keep this Blob Sallad simple yet intriguing.

6. Spread With HTML5

Spread is an interesting HTML5 experiment by Tom Theisen. Spread was developed to test the boundaries and capabilities of HTML5. Generate amazing spirals and spread them around randomly and rapidly with this HTML5 rendition. One can easily customize spread with the attributes like frame rate, cycle colors, fade option, randomized position and wrap edge. Spread is much more than just HTML5, it is colors, spirals and randomness!

7. HTML5 JS Fireworks

Light up the night sky with the fireworks in words of your choice with HTML5 powered JS Fireworks. Developed by Kenneth Kufluk, JS Fireworks is a Chrome Experiment, amongst other things! It's published out to Google AppEngine (free!), which is what the app.yaml and index.yaml files are. The default version presented is the HTML5 Canvas experiment. There are also written versions for Flash, Flex and SVG. Some of them are more complete than others!

8. CoolClock - The Javascript HTML5 Analog Clock

CoolClock is a customisable javascript analog clock. Using CoolClock is just simple. Download coolclock.js, moreskins.js and excanvas.js and put them in the same folder as your html file. Now there are two approaches to enabling your clocks, depending on whether your page uses jQuery. If your page uses jQuery and jQuery is loaded before coolclock.js is loaded, then you don't have to do anything more. If your page doesn't use jQuery then you need to add onload="CoolClock.findAndCreateClocks()" to your body tag, (or the equivalent in your preferred javascript framework). Powered with the features of HTML5, CoolClock will be a great addition to every cool website!

9. HTML5 Bubbles - Interactive Canvas

Bubbles is an interactive HTML5 canvas animation. Colorful, zippy bubbles powered by HTML5 is just fun. Bubble up, spread the bubbles, choose their colors and multiply the bubble count. There are several color customization options provided while we add a new bubble. Using the bubble canvas is imple, just click on the canvas to add more blobs. The colored buttons set the blob color. RND sets random color. This works in Firefox, Safari, Chrome, iPhone, and IE9 browsers.

10. HTML5 Kaleidoscope

Kaleidoscope is a very beautiful rendition by Christophe Résigné using FlashCanvas. FlashCanvas is a JavaScript library which adds the HTML5 Canvas support to Internet Explorer. It renders shapes and images via Flash drawing API. It supports almost all Canvas APIs and, in many cases, runs faster than other similar libraries which use VML or Silverlight. Kaleidoscope is a very attractive HTML5 animation developed with this framework!