Years ago when we talk about good interactive websites, we have Flash in our mind. Nowadays, with the help of HTML5 and power of jQuery, or javascript to be precise, a beautiful and fully functional interactive website can be built solely on HTML without Flash. Even it is a bit quirky and slow on less powerful machines, we still love to see more of those websites, sites like the Spiderman.
Some websites are made for presentations or product showcases. Given the ability of creating interactive websites, we could build one mainly focus on the real object itself and generating interactions based on users’ inputs, such as scrolling, cursor moving, dragging, etc. So today we’d like to show you a few websites focuses on these areas and how they make the real life objects or products popping up on your screen. This definitely can’t compete with the almighty Flash but an efficient way to highlight whatever you gonna promote.
-
Be Sure to Check Out These Websites:
- 26 Subtle Grunge and Vintage Websites that Kick Ass
- Unusual Layouts in a Minimalist Way: 10+1 Examples of Minimalist Web Design
- 31 Most Creative and Funniest 404 Page Examples of All Time
- 21 Inspiring Unique Responsive Web Design Examples
Lend Your Leg
A public organisation website to help people aware of landmines and to stop the damage of explosive remnants of war. The symbolic gesture of this campaign is rolling up a pant leg or sleeve, which can be easily seen and done on this websites. It’s very straightforward and impressive. I would lend my leg if I see this website.
Matteozanga
Each dragging position will either make the man put on the sweater or taking it off, which could reveal the next correlated web page of adventure side or business side.
Spiderman Game
Full view of the city from the Spiderman’s eye and you can drag to see more of it. Hovering on each little spiderman located on different building will give you a telescoped version of that sight.
TagInterativa
It’s actually a background video of an office full of creative people moving around. The interesting thing is the twitter updates on each person’s head. And it’s updating realtime with corresponding smiley faces…
Attackemart
A man holding a smartphone that can move around a bit when your mouse is moving. And the app icon is clickable.
Lamaddalena
It looks like a big table with plates of food and menu you’d like to see. When the cursor is on the edge, it automatically moves to the next area of ‘table’. How about turn off the laptop and have dinner in this restaurant?
Followings are all basically parallax effects with the product focused in the middle.
Kiinnostus
I don’t know French and the man in the page keeps changing stats. Sounds like a twister?
Mini JP
Keep scrolling and you will see how much space this Mini has. Very, very effective way to showcase something…small…
Bagigia
Same as the previous one, it can show you every side of this iPad case.
Saucony
Each scrolling tells you each elements of the shoe and finally combine together.
Jumpman23
Another perfect example of parallax scrolling and multi scrolling path.
Krystalrae
The girl constantly changing her clothes when you scroll down… Did I miss something?
Magnificent website collection. I like Kiinnostus )